[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

Leave a Reply

Your email address will not be published. Required fields are marked *