Creating CodeIgniter-Like User Guide Panel With JQuery

In this particular tutorial, I will show how to create CodeIgniter-Like User Guide Panel with the help of JQuery.  This panel is readily available on each user guide page of CodeIgniter which makes it very useful because you are able to browse through different topics which are always available and just a click away. Here are some of the most obvious benefits or uses of this panel:

  • Contains a host of links or content
  • Always available on the top
  • Can be used for any content or even a form

The HTML Markup

First of all, we create a panel container div with id panel and then put all content inside it. We will use this id in CSS as well as JQuery to style and manipulate the panel respectively. The html markup for the panel looks like this:

	<div id="panel"></pre>
<div style="padding: <span class=;">10px;"></div>
<pre>
			<div class="left">
				<div class="doc_heading">Basic Information</div>
				<ul>
<ul>
	<li><a href="#">&rarr; Server Requirements</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; License Agreement</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; Credits</a></li>
</ul>
				</ul>
			</div>
		</div>
	</div>

The div with class left is where each distinct section goes and then each section is followed by another div with id divider which is basically a vertical line separating each section.

The CSS
This is the CSS for the panel:

	.left
	{
	 	float:left;
	}
	.right
	{
	 	float:right;
	}
	.clear
	{
	 	clear:both;
	}
	.doc_heading
	{
		font-weight:bold;
		margin:10px 0px 5px 0px;
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	body
	{
		margin: 0px auto;
		padding:0px;
	}
	div#panel
	{
		width:100%;
		height:400px;
		color:#FFFFFF;
		background:#666666;
		display:none;
		padding:0px;
	}
	div#btn
	{
		cursor:pointer;
		cursor:hand;
	}
	div#divider
	{
		background:url(images/dot.gif) repeat-y;
		height:350px;
		float:left;
		width:20px;
		margin-left:20px;
	}
	div#panel ul
	{
		list-style:none;
		margin:0px;
		padding:0px;
	}

	div#panel ul li a
	{
		color:#ffffff;
		font-weight:normal;
		text-decoration:none;
		font-size:11px;
		font-family:'verdana';
	}

	div#panel ul li a:hover
	{
		color:#cccccc;
	}

The JQuery
In the JQuery’s ready event which fires as soon as DOM becomes ready, we set the width of the panel so that it adjusts according to size of the browser window and also give appropriate width to the panel images based on the browser window size:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();
	});

Here is the setWidth function:

	function setWidth()
	{
		// get main document width
		var dimension = getPageDimensions();
		var doc_width = dimension[0];
		var slide_button_width = 143;

		// let's find out how much width should be given to each
		// of the left and right bar (slide_panel_01.gif) of the slide panel.
		var diff = doc_width - slide_button_width;
		// now divide diff with 2 to get width for each bar
		var bar_width = diff / 2;

		// now apply width to each bar
		$("div#left_bar, div#right_bar").css("width", bar_width);
	}

Now comes the magic. The JQuery has amazing function by the name of slideToggle which can be used to toggle content with sliding animation style. This function automatically takes care of current state of the sliding element. We put this function in ready even too:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();

		// slide the panel when slide panel button is clicked !
		$("div#btn").click(function(){
			$("div#panel").slideToggle("fast");
		});

	});

Now what it basically means is that when a div with id btn (which is actually slide panel handle at the bottom of the panel) is clicked, slide toggle the div with id panel which is our panel.

See Demo.

Download Code.

Advertisements

2 thoughts on “Creating CodeIgniter-Like User Guide Panel With JQuery

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