[Tutorial] Collapsable and Expandable jQuery Fixed Modal Box (Continue…)

Collapsable and Expandable jQuery Fixed Modal Box (Continue…)

Our Jquery Code that actually does the binding for click events and adjusting the CSS dynamically.

jq-fixed.js

$(document).ready(function() {        

        //Initialize our jquery actions
        initialposition();

        //If user decides to make no action
        $("#mask").click(function(e){
                $(this).hide();
                resetmask();
        });

        function initialposition() {
                //position the navigation bar at top initially
                // when user clicks on that slide down and show other options
                var id = $("a[name=modal]").attr('href');
                var winH = $(window).height();
                var winW = $(window).width();

                //alert(id);
                $('.clickme').css('position','absolute');
                $('.clickme').css('top','780');
                $('.clickme').css('left','7180');
                $('.clickme').css('bottom','450');
                $('.clickme').css('right','1');

                $('.clickme').css('margin-left','390');
                $('.clickme').css('padding','0');

                //alert($('.clickme').html());
                $(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
                $(id).css('left',winW/2-$(id).width()/2);
                $(id).html("

<h3 id="fullarticle"><strong>

Show</strong></h3>


");

                $(id).show(1000);

        }

                $("#fullarticle").click(function(e){
                                showExpand(e);
                });
        //select all the a tag with name equal to modal

        function showExpand(e) {

                //$("a #btnsubmit").html("My Image : <img alt="" decoding="async" src="images/up-arrow.gif"></img>");

                //Cancel the link behavior
                e.preventDefault();

                //Get the A tag
                var id = $("a[name=modal]").attr('href');

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set heigth and width to mask to fill up the whole screen
                $('#mask').css({'width':maskWidth,'height':maskHeight});

                //transition effect
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow",0.8);        

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                $(id).css('top',winH/2-winH/2-10-$(id).height()/3*0.060);
                $(id).css('left',winW/2-$(id).width()/2);

                $(id).slideDown(1000);

                $(id).html("

<h3 id="hidearticle"><strong>

Hide</strong></h3>


");

                $("#hidearticle").click(function(e){
                        resetpanels();
                });
        }

        function resetmask() {
                        $('#mask').css({'width':'0','height':'0'});

                //transition effect
                $('#mask').fadeOut(1000);
                //$('#mask').fadeTo("slow",0.8);
                var id = $("a[name=modal]").attr('href');
                var winH = $(window).height();
                var winW = $(window).width();

                $(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
                $(id).css('left',winW/2-$(id).width()/2);

                $(id).html("

<h3 id="fullarticle"><strong>

Show</strong></h3>


");
                $(id).slideDown();
                $("#fullarticle").click(function(e){
                        showExpand(e);
                });
        }

        function resetpanels() {
                var id = $("a[name=modal]").attr('href');

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set heigth and width to mask to fill up the whole screen
                $('#mask').css({'width':maskWidth,'height':maskHeight});

                //transition effect
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow",0.8);        

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                $(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
                $(id).css('left',winW/2-$(id).width()/2);
                $(id).html("

<h3 id="fullarticle"><strong>

Show</strong></h3>


");
                $(id).slideDown();
                $("#fullarticle").click(function(e){
                        showExpand(e);
                });

        }

});

Click Next to Continue