Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools.  Since it was in mootools, I thought of replicating it in jQuery. I have two example of similar menu, first using jQuery core and CSS and another uses jQuery easing plugin to give bounce effect to the same menu.And I’ve added one more example which I though would be nice menu to show you guys.

VIEW DEMO

First of let me start, with the images which i’ve used in the background to create the first two menus.

and

Please note that the please keep the left image as big as possible if you’re menu text can be long.

Now, let’s look at the html code

Html code for the animated jquery menu

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>

All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.

 <li class="ybg"></li>

CSS code for the smooth jQuery menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}

As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.

The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.

jQuery code for animation in the  on menu

$('#nav1 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
  $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});

The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.

As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.

The code is exactly same for the second menu except the following line,

$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');

You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.

$('#nav2 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
     $(this).animate({height:"28px"},150);
  });
},
function()
{
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
      $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
   });
});

And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.

DOWNLOAD SOURCE CODE

Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.

LIVE DEMO

Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
   var total_words;

  if(params) {
      jQuery.extend(p, params);
   }

  //for each keypress function on text areas
  this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
   });
};

VIEW PLUGIN’S CODE

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

In a jQuery tutorial, I’ve shown how to display different color in alternate row of table using jQuery. This time I’ve come up with advanced version of same tutorial where you can add different color in alternate row of table whereas you can display a different color when mouse moves over each row of table furthermore you can assign a different color to table row when mouse is clicked in the table row.

View Live Demo

HTML code for table row filtering using jQuery

<table id="mytable" border="0" width="40%">
  <tr><td>Michael</td><td>21</td></tr>
  <tr><td>Sam</td><td>22</td></tr>
</table>

As you can see there is nothing special in the above code where I’ve defined a table with id “mytable”.

CSS code for table row manipulation

.oddtr
{
	background-color:#EFF1F1;
}
.eventr
{
	background-color:#F8F8F8;
}
.trover
{
	background-color: #0099CC;
}
.trclick
{
	background-color: #00CCCC;
}

As you can above code, I’ve defined four different classes with four different color. oddtr for coloring the odd row of table, similarly eventr for even row of table then trover class for displaying different color when mouse moves over the table row i.e on mouse over event. Finally, trclick class for displaying different color of the row when mouse is clicked in the table row. Note that you can change these colors according to your choice.

jQuery’s JavaScript code for table row manipulation

//these two line adds the color to each different row
$("#mytable tr:even").addClass("eventr");;
$("#mytable tr:odd").addClass("oddtr");;
//handle the mouseover , mouseout and click event
$("#mytable tr").mouseover(function() {$(this).addClass("trover");}).mouseout(function() {$(this).removeClass("trover");}).click(function() {$(this).toggleClass("trclick");});

The first two line of jQuery adds two differnt classes to the alternate rows of  table with id “mytable“. The last line of jQuery acts for three differnt on the table row. When mouse is moved over the table row trover class is added to that table row. When mouse moves away form that table row trover class is removed from that particular row and finally when mouse is clicked on tha particular row it toggles the class trclick on that particular row.

Download Full Source Code

Yesterday Tarquin macey asked me how can we change the value of the textbox based using Ajax and PHP based on the changing value of the dropdown list.Today, I’ve come up with a solution from him.In this post, you’ll see how to get the currency code of a country from PHP using Ajax and this currency code will replace the value of textbox each time the dropdown list changes.

View Live Demo

Writing Code for changing textbox value from dropdown list using Ajax and PHP

After looking at the above demo, let’s start writing code for the changing the currency code value in the textbox form Ajax using PHP when you changes the country from the dropdown list.

HTML Code

<select name="country" onChange="getCurrencyCode('find_ccode.php?country='+this.value)">
 <option value="">Select Country</option>
	<option value="1">USA</option>
	<option value="2">UK</option>
	<option value="3">Nepal</option>
</select>
<input type="text" name="cur_code" id="cur_code" >

As you can in the above code, there are two main components one dropdown list whose name is country and contains the list country in it.The JavaScript function getCurrencyCode() is called when user change value in the list. Note down the name and id of textbox which will have the currency code fetched from Ajax.

JavaScript Code for changing textbox value without refreshing the page

function getCurrencyCode(strURL)
{
  var req = getXMLHTTP();
  if (req)
  {
	//function to be called when state is changed
	req.onreadystatechange = function()
	{
  	  //when state is completed i.e 4
	  if (req.readyState == 4)
	  {
		// only if http status is "OK"
		if (req.status == 200)
		{
			document.getElementById('cur_code').value=req.responseText;
		}
		else
		{
			alert("There was a problem while using XMLHTTP:\n" + req.statusText);
		}
	  }
        }
	req.open("GET", strURL, true);
	req.send(null);
  }
}

In the first line of the above code, the XMLHTTPRequest object is created using getXMLHTTP() function. To look at the the structure of this function, take a look at this old post change the value of dropdown list using Ajax and PHP . After checking the appropriate value of readystate(4 means completed) and status(200 means ok) property of XMLHTTPRequest object, the value of textbox is replaced with the returned value from PHP using Ajax . The response ,which is can be accessed via req.responseText property, is written to textbox via the value property of textbox.

PHP code for changing the value of textbox using Ajax and PHP

<?php
$country=$_REQUEST['country'];
switch($country)
{
	case "1" :
		echo "USD";
		break;
	case "2" :
		echo "GBP";
		break;
	case "3" :
		echo "NPR";
		break;
}
?>

As you can see the above PHP code, it is fairly simple which just print the currency code value according to the name of country. The value which is in the echo statement is going to returned from PHP via Ajax.

Download Full Source Code

Today, I’ve come along with another post where you’ll see how to move a object within web page when you scroll the mouse wheel using JavaScript.In this example, when you move the mouse wheel the object i.e div moves upwards or downwards depending upon the scrolling direction the mouse wheel. Now, let’s look at the detail of this tutorial in JavaScript.

View Live Demo

HTML and CSS for object to be scrolled on mouse wheel movement

<div id="object">This block moves as you move mouse wheel.</div>

As you can see above code, the object which is going to be moved is placed in the division with id object. For the above division, I’ve defined style and you can see the CSS code below. Remember that ,you can change the below CSS code according to your need but remember that the position should be absolute.

#object {
font-weight:bold;
background:yellow;
padding:5px;
width:300px;
position:absolute;
left:500px;
top:200px;
}

JavaScript code for handling mouse scroll event.

window.onload = function()
{
  //adding the event listerner for Mozilla
  if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.onmousewheel = moveObject;
}

First of all, we need to attach the mouse wheen scroll event to the document.As you can see in the first line of above function, event listner “moveObject” is added to the mouse scroll event in the document for Mozilla browsers and in the second line event handler “moveObject” is called for document.onmousewheel event for browsers like IE and Opera etc.

Now look at the mouse wheel scroll event handler function “moveObject”

function moveObject(event)
{
  var delta = 0;
  if (!event) event = window.event;
  // normalize the delta
  if (event.wheelDelta)
  {
    // IE & Opera
   delta = event.wheelDelta / 120;
  }
  else if (event.detail) // W3C
  {
    delta = -event.detail / 3;
  }
  var currPos=document.getElementById('object').offsetTop;
  //calculating the next position of the object
  currPos=parseInt(currPos)+(delta*10);
  //moving the position of the object
  document.getElementById('object').style.top=currPos+"px";
}

As you can see in the above function first the scrolling delta value is calculated. The delta variable holds the value  -1 or 1 depending upon the movement of the wheel.

After calculating the detail value, the top offset of the object is taken using offsetTop property using JavaScript. After that, the next position of the object is calculated, which is 10 pixel up or down from the current position of the object.

Finally, style.top property is used to set the current position of the object using JavaScript.

Download Full Source Code

Yesterday, my friend Sujit asked me how can we get the mouse clicked position and display the pop-up message in that mouse clicked position using jQuery.Today, I’ve come up with the tutorial for the solution of this problem. In this tutorial, you’ll see how to display the pop-up message in mouse clicked position using jQuery. When you click the mouse in any position of document, the pop-up message gets displayed with the mouse position around the middle part of the pop-up message.

Live Demo                 Download Full Source Code

HTML code to display pop-up message on mouse clicked position

<div id="popuup_div" class="popup_msg">
   ....you can write the mssage here...
</div>

As you can above, the element displaying pop-up message is defined with the id “popup_div” and class of this element is “popup_msg“. You can write your custom message inside that div.

CSS code to display pop-up message on mouse clicked position

.popup_msg{
position:absolute;
z-index:10;
width:172px;
height:102px;
text-align:center;
color:#FF0000;
font: 14px Verdana, Arial, Helvetica, sans-serif;
background:url(bg_image.gif) bottom right no-repeat;
display:none;
}

The above CSS attribute is straightforward and you can change the attribute according to your requirement. But remember that, the position attribute should be set to absolute value and z-index should be greater than the other element’s z-index. Furthermore, the width and height attribute must be set according to the background image of pop-up message.

JavaScript ( jQuery ) code for displaying pop-up message

$(document).click(function(e)
{
  //getting height and width of the message box
  var height = $('#popuup_div').height();
  var width = $('#popuup_div').width();
  //calculating offset for displaying popup message
  leftVal=e.pageX-(width/2)+"px";
  topVal=e.pageY-(height/2)+"px";
  //show the popup message and hide with fading effect
  $('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(1500);
});

As the above code is well document. I’m just going to give you the brief description. First of all, we took the height and width of the pop-up element. After that, we’ve calculated the left and top offset of element so that it gets displayed with the mouse position is around in it’s middle part. of the element With the last line of jQuery code, pop-up message’s left and top position is set and displayed. This pop-up message gets hidden with fading effect with the fadeOut() function of jQuery.

Live Demo                  Download Full Source Code

Last time, I’ve made the top floating message box using jquery. And a lot of people has asked me how can I preserve the state of that message box so that when it is closed.It won’t be open to for some time interval. Today, I’ve come with state preserved bottom hanging message box. When you close the message box, it’s state is preserved in cookie created using JavScript so that this message box won’t show up for certain hours.

View Live Demo

I’m not going to post the HTML code, it is same the previous post of floating message box using jQuery. You can refer to that article for HTML code.

CSS code for state preserved hanging message

#message_box { 
position: absolute;
left: 0px;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
width:99%;
display:none;
color:#0000FF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

The element with id “message_box” is made hidden first with it’s position set to “absolute” for making it hanging. Other attribute you can change according to your need.

JavaScript Code for state preserved hanging message box

As this time, I’ve come up with the state preserved solution. I’ve used JavaScript for setting and getting value from cookie. I’ve used two functions getCookie() directly taken from w2school’s JavaScript cookie tutorial.But I’ve modified the setCookie() functions where you can set the cookie expirty time in number of hours Here is that function,

//function to set the cookie name, values and expiry time in hours
function setCookie(c_name,value,expireHours)
{
  var exhour=new Date(); //create the current date object
  exhour.setHours(exhour.getHours()+1); //setting hours
  document.cookie=c_name+ "=" +escape(value)+
  ((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}

Now, let’s dig through the jQuery code to provide the state preserved bottom hanging message box.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"-=15px",opacity:0 }, "slow");
   setCookie('show_message','no',1); //cookies is set to "no" value
});

As you can see above, when the cross icon is clicked the message box gets hidden and furtheremroe, it sets a cookie “show_message” with value “no” which expires in one hour. Now, look at the jquery code,

if(getCookie('show_message')!='no')
{
  var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
  $('#message_box').css("top",pos-26+"px");
  $('#message_box').show(); //display the message box

  //scroll the message box to the top offset of browser's scrool bar
  $(window).scroll(function()
  {
    var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
    $('#message_box').animate({top:pos-26+"px" },{queue: false, duration: 500});
  });
}

As, you can see there is condition to show the message box and  code inside scroll event to execute. If the cookie is not set then the message box gets displayed and it will be shown to the bottom of the page according to the requirement.

Download Full Source Code

Last time, I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.

LIVE DEMO

HTML code for floating message box using jQuery

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .

CSS code for floating message box using jQuery

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.

jQuery code for floating message box

<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>

You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.

DOWNLOAD FULL SOURCE CODE

As you can see in the poll running on this blog, jQuery is leading among the other JavaScript framework by a good margin. And, this blogger is also a great fan of jQuery.This time, I’ve come up with another tutorial of jquery. In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser using jQuery. This alert box gets displayed with animation when the page is loaded for the first time.

Live Demo

Let’s start looking at the HTML, CSS and JavaScript Code in jquery to make the animated alerting message box using jQuery.

HTML code for Flashing Alert Message using jQuery

<div id="object" class="message">
  <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
  <strong>Massive Offer </strong>
  <p>The detail of this offer goes here dude just Grab this offer !!!!!!! </p>
</div>

As you the message box which I want to display is inside the “div” element with id “object”. And there is an image inside of this box with id “close_window”, when this image is clicked the message box gets vanished with fading effect.

CSS code for Flashing Alert Message Box using jQuery

.message{
border:1px solid #CCCCCC;
position:absolute;
width:150px;
border:1px solid #c93;
background:#ffc;
padding:5px;
left:0px;
top : -170px;
}

As you know, I’m very poor in selecting good colors, please forgive me for the bad design of the alert box.

Above is the class which I’ve used for flashing message box. The position property must be “absolute” and the top property should be choosen such a way that the message box gets hidden in the top part of the browser. The other part property of CSS is straightforward you can change them according to your need.

JavaScript code in jQuery for Flashing Alert Message Box

$(document).ready(function()
{
  //first slide down and blink the message box
  $("#object").animate({
  top: "0px"
  }, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

  //close the message box when cross red image is clicked
  $("#close_message").click(function()
  {
     $("#object").fadeOut("slow");
  });
});

As you know, we’ve placed the message box in the top of the browser in such a way that it is not visible in the browsers. Now, the above jQuery code is used this message box to get slide down and gets flashed in the browser. For this, I’ve used animate() and fadeOut() and fadeIn() functions of jQuery.

And, when the close image of the message box is clicked, the alert box gets vanished with the fading effect.

Download Full Source Code

Last time, I showed you how to navigate the content in various effect using jQuery. In this post, I’ll show you how can you generate the shuffle effect i.e one block moves under another block with sliding from the left.

LIVE DEMO

Now let’s look at the various code to perform this task.

HTML and CSS code for shuffling the block

This code is same as the the one I’ve shown you in the content navigation effect using jquery post. Please refer to that post to view the HTML and CSS code for detail. Note that, each link’s “href” attribute is pointing to the “id” element of the block.

JavaScript code in jQuery to shuffle the block

//when the anchor is clicked
$("a.linkclass").click(function()
{
   //check weather the visible block and clicked link's block is same or different
   if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
   {
      //reduces the z-index and margin of left side increased and decreased by 400px and hide
      $(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
     //increase the z-index of the new visible block
     $($(this).attr("href")).css("z-index","10").fadeIn(400);
   }
}

When the anchor with the “linkclass” is clicked, first of all it is check that weather the clicked anchor’s link is same as the visible block. If it is the same then the animation doesn’t take place. When these are different, then the visible block’s “z-index” is decreased to zero and it gets slides to the left and then into right by using altering the value in the “margin-left” property. And, finally this block gets hidden. In the meanwhile, block whose name in the “href” attribute of the clicked anchor gets visible with fade in effect and “z-index” of this block is set to “10″ so that it overlaps the slided block.

Download Full Source Code

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Live Demo of accordion menu using jQuery

HTML structure for accordion menu using jQuery

<div id="firstpane" class="menu_list">
  <p class="menu_head">Header-1</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-2</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-3</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
   </div>
</div>

As you can see the structure, the elements of the menu are inside the div with class “menu_list”. And each blocks of menu contains the header with class “menu_head” and div with class “menu_body”. Note that, there is another pane with the id “secondpane” whose code is similar as above and not posted above.

CSS code for accordion menu using jQuery

.menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}

I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight forward and you can change is according to your need. Note that, the display property in “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded. Furthermore, the display property in the link inside “menu_body” class is set to “block” so that each menu appears in new line. You can see a image in the “menu_head” class, this is the image which gets changes with the visibility of the menu item in each menu’s head.

I’ve used the images from sweetie icon pack, you can download the other beautiful icon from the their website.

Javascript Code using jQuery

Now finally look at the JavaScript code to accomplish this, first of we need to import the jQuery library

<script type="text/javascript" language="javascript" src="jquery.js"></script>

And, then we need to write few lines of simple code in jQuery to do this, let’s look at the jquery code of the first accordion menu whose visibility gets toggled on the mouse click event on each header,

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});

When the paragraph with class “menu_head” inside the element with the id “firstpane” gets clicked, the background image of it changed to down arrow. And then, next div with class “menu_body” gets slided in toggling it’s visibility. Furthermore, the other sibling’s div with class “menu_body” gets slided up. And then, the background image of the other sibling’s of “p” is changed to left arrow. Now look at the code of the accordion menu under mouse over effect.

//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
   $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
   $(this).siblings().css({backgroundImage:"url(left.png)"});
});

This code is preety similar to the above code but the difference is only that this accordion menu works on the mouse over effect whereas the above accordion menu works on the mouse click event.

Download Source Code

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

If you are unaware of default argument in function then you should know that you candefine the function with default arguments in PHP as you can do it C and C++. Providing default arguments in the function can be very useful when you’ve to extend the the functionality of the previously written functions.

Example of using default argument in the function of PHP

Let’s suppose that you’ve already written a function to “calculate the amount collected in day by site”

function getAmountCollected($day)
{
//code for function goes here
}

Assume that this function is called from around 20 places in your project. After sometime, your client asked you to find the ” amount collected by site in that date range”. For this case, you need to pass two parameters(start date and end date) to the function.

Do you write another function or extend the functionality of the same function?

I would use the same function for this purpose to minimize the code. But one major problem, we’ve already called the functions from many places with the single argument. How can we define the same function which can be called both with single and double argument? In this case, default argument comes handy,

function getAmountCollected($day, $end_day=’none’)
{
//code for function goes here
}

As you can see above, we’ve placed the second argument in this function like “$end_day=’none’“, which is called the default argument of the function. You can call this function with both single and double arguments.

And, when the second argument is not supplied while calling the function, the variable “$end_day” contains “none” value in it. i.e when we call this function called like this with single argument

getAmountCollected(’2008-05-14′); //remember single argument

then the second parameter will have “none” value in it in the called function.

You guys must have know about server variables in PHP. Server Variables are those variables which are inside the super global array named $_SERVER available in PHP. There are many server variables in PHP and some of them are very useful for fore developing PHP projects. I’m going to post here some of the very useful server variables available in PHP development.

8 Useful server variables available in PHP

1) $_SERVER['REQUEST_URI'] - It return the URL in to access the page which is executing the script. If you need to type http://www.example.com/product.php?id=5 to access the page then $_SERVER['REQUEST_URI'] returns “/product.php?id=5″.

2) $_SERVER['DOCUMENT_ROOT'] – Returns the root directory of the server which is specified in the configuration file of server. This variable usually returns the path like “/usr/yoursite/www” in Linux and “D:/xamps/xampp/htdocs” in windows.

3) $_SERVER['HTTP_HOST'] – Returns the host’s name as found in the http header. This variable usually returns the path like “example.com” when the you find “http://example.com” in browser’s address-bar and return “www.example.com” when you see http://www.example.com in the address-bar. This is quite useful when you’ve to preserve session while making online payment using PHP since session stored for “http://example.com” is not same as for the “http://www.example.com”.

4) $_SERVER['HTTP_USER_AGENT'] - Returns the user agent’s (browser) detail accessing the web page. We can use strpos($_SERVER["HTTP_USER_AGENT"],”MSIE”) to detect Microsoft Internet explorer or you can use strpos($_SERVER["HTTP_USER_AGENT"],”Firefox”) to detect firefox browser in PHP.

5) $_SERVER['PHP_SELF'] - Returns the file-name of the currently executing script. Let’s suppose that you’re accessing the URL http://www.example.com/product.php?id=5 then $_SERVER['PHP_SELF'] returns “/product.php” in your script.

6) $_SERVER['QUERY_STRING'] – Returns the query string if query string is used to access the script currently executing. Query strings are those string which is available after “?” sign.if you use $_SERVER['QUERY_STRING'] in the script executing the following URL “http://www.example.com/index.php?id=5&page=product” then it returns “id=5&page=product” in your script.

7) $_SERVER['REMOTE_ADDR'] – Returns the IP address of remote machine accessing the current page. But you can’t relie on $_SERVER['REMOTE_ADDR'] to get the real IP address of client’s machine. See this article to know how to get real IP addrees in PHP.

8 ) $_SERVER['SCRIPT_FILENAME'] - Returns the absolute path of the file which is currently executing. It returns path like “var/example.com/www/product.php” in Linux and path like “D:/xampp/xampp/htdocs/test/example.php” in windows.

]]> http://roshanbh.com.np/2008/05/useful-server-variables-php.html/feed 18 http://roshanbh.com.np/2008/05/date-format-validation-php.html http://roshanbh.com.np/2008/05/date-format-validation-php.html#comments Sun, 11 May 2008 11:20:19 +0000 Roshan http://roshanbh.com.np/?p=105

Today Sushil asked me how can we validate the date which is entered from textbox in “YYYY-MM-DD” format. Well, we can validate the format of the date using regular expression but how to validate weather that date is valid date or not, such as “2007-02-29″ is the correct format of the date but it’s not the valid date.

To overcome that situation, I’ve used checkdate() function available in PHP for validation of date.

Function to validate date format in PHP

function checkDateFormat($date)
{
  //match the format of the date
  if (preg_match ("/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/", $date, $parts))
  {
    //check weather the date is valid of not
	if(checkdate($parts[2],$parts[3],$parts[1]))
	  return true;
	else
	 return false;
  }
  else
    return false;
}

In the above function, first of all format of date is validated using regular expression. As you can see the in the preg_match() function, there are three expression each separated by “-” and there can be only digits of length of 4,2 and 2 in these expressions. If the date format is incorrect then this function returns “false” value. And, if the supplied string contains the valid date format then the part matching each expression are stored in the “$parts” array. Such as, if we supply “2007-03-12″ then “2007″, “03″ and “12″ are stored in the “$parts” array. After that, checkdate() function of PHP is used check weather the supplied date is valid date or not.

Example

echo checkDateFormat("2008-02-29"); //return true
echo checkDateFormat("2007-02-29"); //return false

I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let’s the whole web page gets loaded and new page gets displayed. It would be better to show another content in the same page with few animation without loading the whole page.

In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,

HTML Code for animated content navigation

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>
</div>

As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.

CSS code for animated content navigation

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation

Faded content navigation

View Live Demo

 //hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.

Shutter like content navigation effect

View Live Demo

//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.

Sliding Content Navigation Effect

View Live Demo

 //hide the all div except first one
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.

Download full source code