Home > javascript, jquery > Stylish Javascript / Jquery panel navigation part two

Stylish Javascript / Jquery panel navigation part two


A little while ago, I posted an entry on the stylish jkpanel plugin for jquery. While useful, it didn’t quite meet my needs at the time and I made certain adjustments. I’ve since made further updates making the implementation of the script more unobtrusive and hopefully far simpler.

First, the modified script ( jkpanel.js ) :

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified by Barry Roodt (September 08) : https://calisza.wordpress.com

var jkpanel={
	controltext: 'Close Panel',
	$mainpanel: null, contentdivheight: 0,
	$contentdiv: null, $controldiv: null,

	openclose:function($){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed'){
			this.$mainpanel.animate({top: 0}, 500).attr({openstate: 'open'});
			this.$controldiv.show();
		} else {
			this.$mainpanel.animate({top: -this.contentdivheight+'px'}, 500).attr({openstate: 'closed'});
			this.$controldiv.hide();
		}
	},
	
	loadfile:function($, file, height, openpanel){
		jkpanel.$contentdiv.load(file, '', function($){
					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px';
					jkpanel.$contentdiv.css({height: heightattr});
					jkpanel.contentdivheight=parseInt(jkpanel.$contentdiv.get(0).offsetHeight);
					jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'});
					jkpanel.$controldiv.css({cursor:'hand', cursor:'pointer'});
					if (openpanel){
						jkpanel.openclose($);
					}
					return true;
		})
		
		return false;
	},
	
	init:function(file, height){
		jQuery(document).ready(function($){
			jkpanel.$mainpanel=$('<div id="dropdownpanel"><div id="jkcontentdiv"></div><div id="jkcontrol">'+jkpanel.controltext+'</div></div>').prependTo('body');
			jkpanel.$contentdiv=jkpanel.$mainpanel.find('#jkcontentdiv');
			jkpanel.$controldiv=jkpanel.$mainpanel.find('#jkcontrol').css({cursor: 'wait', display: 'none'});
			jkpanel.loadfile($,file, height, false);
			jkpanel.$mainpanel.attr('openstate', 'closed');
			$('#jkcontrol').click(function(){jkpanel.openclose($)});
			$('.panelbutton').click(function(){
				var pfile = this.href;
				var pheight = this.rel || false;
				jkpanel.loadfile($,pfile, pheight, true);
				return false;
			});
					
		})
	}
}

Next, the updated css ( jkpanel.css ):

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}

#jkcontentdiv{ /*Div containing Ajax content*/
background: white;
width: auto;
color: black;
padding: 10px;
margin: 0px auto;
}

#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid #ECECEC;
color: white;
font-weight: bold;
text-align: center;
background: transparent url("../images/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

And lastly, a usage example :

<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jkpanel.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jkpanel.css" type="text/css" />
<script type="text/javascript">
  jkpanel.init('initialcontent.htm', '200px');
</script>
</head>
<body>
<p> Some text <a href="someothercontent.htm" rel="500px" class="panelbutton">my link</a></p>
</body>
</html>

You will need to take note of the following :

  • Use class=”panelbutton” to enable the jkpanel for your link
  • Tell jkpanel which content to load by specifying the path in the href attribute
  • Specify a height for the panel using the “rel” attribute. You can set this to rel=”auto” to tell the panel to automatically match the height of it’s contents
  • Make sure to read the terms of usage on jkpanel’s home page, you can also obtain the panel button from the same page

This is of course a simple example and I plan on posting a proper, working demo shortly.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: