[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("



Show


");

		$(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 : ");

		//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("



Hide


");

		$("#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("



Show


");
		$(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("



Show


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

	}

});

Click Next to Continue