Tag Archives: codeigniter

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">
		<div style="padding:10px;">
			<div class="left">
				<div class="doc_heading">Basic Information</div>
				<ul>
					<li><a href="#">&rarr; Server Requirements</a></li>
					<li><a href="#">&rarr; License Agreement</a></li>
					<li><a href="#">&rarr; Credits</a></li>
				</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.

EZMVC – PHP Framework

When working on a PHP project, you have to choose how you are going to develop the site whether you are going to use some framework to develop the site or use custom development.  Both approaches have some dis-advantages, for example if you are going to use some framework then you know framework is not all that easy, if you are going to change something in your site, you have to first search where this change will be made from but if you are going to use the custom approach then it is time-consuming and sort of boring thing.

So what’s the solution?

The solution would be something that comes up with best of the two approaches discussed above. In simple terms, the solution would be to create your own custom framework with some good software patterns like MVC.

I was in similar dilemma as well, so i decided to come up with my own framework which would be simple, easily customizable and fast with ability to add functionality. So the solution I have come up with is named EZMVC, a very easy-to-use framework that can be extended to more power with PHP classes and libraries.

EZMVCEZMVC is an easy-to-use framework implementing the MVC (Model View Controller) design pattern. It helps you create maintainable, flexible and scalable applications. This release of EZMVC framework is very basic, immature, you won’t see all the features present in frameworks like cakephp, codeigniter or symfony in this particular release but I am looking to continue working on this project and come up with an extremely flexible and scaleable framework. Your feedback and suggestions will be greatly appreciated to make this project better and better.

You can download the EZMVC here. The always updated version can be found here:

http://sourceforge.net/projects/ezphp/

.
tweet_this
.