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

From last day, We were having problem with a project which was shut down in the middle due to heavy traffic. As a technical manager, I was the person who to take charge over the project bring it down to the track. After doing few benchmark test, I came to know that the MySql access from a PHP file was creating the overhead to the CPU of the server.

Problem of CPU Overhead with MySql

Let me explain the problem clearly first,

We’re working on a website which was similar to http://www.swoopo.co.uk/ and as you can see clearly in that website the most recent data should be fetched form MySql database in each second. in the PHP page, which was being called from Ajax every second, had around 5 SQL queries to retrieve data from server.

First of all, I optimized that page reducing the 5 queries into single query by using left outer joins among 3 tables. And then, I did benchmark test by using Apache benchmark tool(ab) 50 request with concurrency of 50 with the following command.

ab -n 50 -c 50 http://xyz.com/ajax_page.php

And then in another SSH shell prompt, I run the top command to view the CPU usages parallelly.

I was still horrified that the CPU usages by mysql after 50 concurrent user was going out of control(100%) despite of optimized query. But many joins have been used in that single query and lots of data were there in those tables so the database overhead was high even though it was a single query.

How did I reduced the CPU overload drastically caused by MySql?

Now, the first challenge was to reduce the database access. It was clear that it was caused by concurrent database overhead in the PHP page which was being called in every second. Here is the simple steps what I did to reduce the database overhead.

1. I created another PHP file in which I’ve transferred the mysql query causing CPU overhead and called it from Cronjob.
2. Created a temporary table for storing the output given by PHP page called from CronJob.
3. Then, I scheduled the CronJob in every second, don’t tell me that CronJob can’t be run less than a minute, take a look at this post before saying this.And from each call, the output data was stored in the temporary table.
4. And, finally from the Ajax the a new PHP page was called which was only accessing the data from temporary table with single row.

I did the same benchmarking again to the newly made page(which is accessing data only from temporary table) and saw that CPU usages after the this process reduced drastically.

I know I can further reduce the CPU overhead by storing the temporary data in a text file. You guyz know that I’m lazy so that part is left for another day.

Few times back, sNare asked me how do display wordpress like overlay box where you can pass the variables when you click on the link and manipulate simultaneous actions in the overlay until user choose to close it. Today, I’ve come up with the solution of this with model upload overlay box using thickbox, a jquery plugin. I’ve used the Iframe content of thickbox while displaying the box as modal box.

LIVE DEMO

How to use the thickbox as modal overlay box?

Let’s look at the step by step to use thickbox for passing variables.

First of all, we have to include jQuery JavaScript Library to our page,

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

After this, include the thickbox plugin of jQuery,

<script type="text/javascript" src="thickbox-compressed.js"></script>

There is a CSS for using thickbox which also need to linked to the current page,

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

Now, let’s look at the anchor tag which passes the variables to overlay box and keep the overlay at top no matter how many simultaneous accesses occur in the box.

<a href="file_upload.php?post_id=5&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" ><strong>Upload Files</strong></a>

If you want to know how to use the thickbox, then you can checkout their home page which contains good documentation. The main point is, class=’thickbox’ must be used for the displaying the content in overlay.

How to pass variables to overlay box (thickbox)?

If you look at the href attribute of anchor tag, you can see clearly that I’ve passed post_id variable with value 5 to file_upload.php, which can be easily fetched from PHP using $_GET['post_id'].

How to make overlay box stay opened on simultaneous access?

Now this is part which many people has asked me how to do it. To use thickbox in this fashion, you’ve to use it in iframe content mode.The following property of thickbox make it remained open on simultaneous access,

TB_iframe=true

Furthermore, We’ve used the following property to display the overlay box as modal box.

modal=true

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

Yesterday, I was in a party and a guy came near to me and asked me what is JSON and how can handle it via PHP. Today, I’m going to tell you something about JSON data and how we can handle them via PHP. Although, JSON stands JavaScript Object Notation, it is used by many other technologies like PHP and Java for data interchange format over the Internet.

What is JSON?

JSON is ultra-weight data interchange data format used over the internet for transferring the data. While XML is a dominant data interchange format over the internet but JSON is less complex and light-weight data.

Though it was first made to be used with JavaScript for accessing remote data, it is now used by many other languages because JSON data is platform independent data format.

Data Types and Example of JSON data

JSON supports various kind of data types which included numbers, strings, booleans as well as array datas and obviously object (collection of key:value pairs, comma-separated and enclosed in curly brackets).

Now, let’s look at the example of simple format of JSON data for a detail of a employee,

{"id":"1","name":"mike","country":"usa","office":["microsoft","oracle"]}

Creating and Parsing JSON data format in PHP

To handle JSON data there is JSON extension in PHP which is aviable after PHP 5.2.0. Two funcitons : json_encode() and json_decode() are very useful converting and parsing JSON data through PHP.

First of all, let’s look at the PHP code to create the JSON data format of above example using array of PHP.

$json_data = array ('id'=>1,'name'=>"mike",'country'=>'usa',"office"=>array("microsoft","oracle"));
echo json_encode($json_data);

The above code generates the JSON data exactly as above. Now, let’s decode above JSON data in PHP.

$json_string='{"id":1,"name":"mike","country":"usa","office":["microsoft","oracle"]} ';
$obj=json_decode($json_string);

Now, the $obj variable contains JSON data parsed in PHP object which you can display using code below.

echo $obj->name; //displays mike
echo $obj->office[0]; //displays microsoft

As you can guess,$obj->office is an array and you can loop through it using foreach loop of PHP,

foreach($obj->office as $val)
    echo $val;

Yesterday, Steve asked me how can we have random number function in JavaScript like rand() function of PHP where the programmer can specify the range of two numbers within which we need the random number. Today, I’m going to share two functions in JavaScript, In first function , you can specify the number and the function generate the random number between 1 and N. In another JavaScript function, you can specify range of two numbers between which you’ve to get a random number. Furthermore, there is optional last parameter in these function for decimal places, if provided, will return the random number with the decimal places specified in the third parameter.

Getting random number in JavaScript

Getting random number is very easy you can use JavaScript function random() of Math object to get the random number between 0 and 1. For example, above JavaScript statement returns a random number between 0 and 1.

alert(Math.random()); // returns number like 0.3871769046200184

JavaScript function to get random number between 1 and N

//function to get random number from 1 to n
function randomToN(maxVal,floatVal)
{
   var randVal = Math.random()*maxVal;
   return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

As, you can see in the above JavaScript function, there are two parameters. One for the maximum value(N) up to which random number have to be generated. The second parameter is optional which specifies number of digits after decimal point.If not provided, this function returns integer.

JavaScript function to get random number between a range

//function to get random number upto m
function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

The above JavaScript funciton accepts three parameters.The first and second parameter is mandatory while the third is optional. The first and second parameter specifies the range between which the random number has to be generated. The thir parameter is optional which specifies number of floating point digits, if not provided, the above JavaScript function returns integer random number.

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

Today, I would like to tell you how to handle character set problem which occurs during the data fetched from PHP using Ajax mainly on the western characters(European charset).Lots of people asked me about this problem where these European charset is displayed in unreadable format after fetching it from ajax.

Problem with European Charset with Ajax and PHP

Suppose that I’ve the following code in PHP file, which output the string which contain the european characters.

<?php
  $str="€-accentuée";
  echo $str;
?>

Now, let’s use the Ajax from JavaScript using Jquery Code to fetch the data from PHP.

<script type="text/javascript">
$(function()
{
  $('#charsetdiv').load("test2.php");
});
</script>
<div id="charsetdiv"></div>

If you’ve not used jQuery then you might be wondering about the ajax code, you can check the benefits of jquery from this post and download free ebook of jQuery.

After getting value from Ajax, the division with id “charsetdiv”, let’s look at the output.

?-accentu?e

Solving western Character Set problem with Ajax and PHP

The above problem is occurred because of not defining proper charset to these European characters. We can solve this problem by sending the header which define the appropriate Character Set for these characters.Let’s see, how I solve this problem just adding the header which define the charset Windows-1256 – which support Arabic as well as European characters.

<?php
  header("Content-Type: text/html; charset=Windows-1256\n");
  $str="€-accentuée";
  echo $str;
?>

After adding that header in PHP, you’ll get the appropriate european characters in your Ajax enabled application.

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

In this post, I’ll show you how can you download the multiples files in a zip archive using PHP. I’ve made a function in PHP where you’ve to pass the parameters the array of files to be zipped, the second parameter is file name as which zip archive file has to be downloaded and finally the path of files where files to be zipped are located.(assuming that they are all in same folder)

PHP function to download mutiple files in a zip archive

//function to zip and force download the files using PHP
function zipFilesAndDownload($file_names,$archive_file_name,$file_path)
{
  //create the object
  $zip = new ZipArchive();
  //create the file and throw the error if unsuccessful
  if ($zip->open($archive_file_name, ZIPARCHIVE::CREATE )!==TRUE) {
    exit("cannot open <$archive_file_name>\n");
  }

  //add each files of $file_name array to archive
  foreach($file_names as $files)
  {
    $zip->addFile($file_path.$files,$files);
  }
  $zip->close();

  //then send the headers to foce download the zip file
  header("Content-type: application/zip");
  header("Content-Disposition: attachment; filename=$archive_file_name");
  header("Pragma: no-cache");
  header("Expires: 0");
  readfile("$archive_file_name");
  exit;
}

Download Source code

In the above PHP function, first of all the object of ZipArchive class. Remember that this library is bundled in PHP after the version of PHP 5.2 only.If you’re using the PHP version older than that one then you’ve to get it from PECL extension.

After that, we’ve tried to create the zip arhive with the open() function using the ZIPARCHIVE::CREATE flag.After successfully creating the archive, each files whose names are passed as array are added to zip file using addFile() function of ZipArchive() class.Then, this zip archive is closed using close() function of same class.

And, finally different headers are passed through PHP to force download the newly created zip file.

Example of Using Above PHP function

  $file_names=array('test.php','test1.txt');
  $archive_file_name='zipped.zip';
  $file_path=dirname(__FILE__).'/';
  zipFilesAndDownload($file_names,$archive_file_name,$file_path);

The above PHP function call is straighforward and after calling that function you’ll get the zip archive containing mutiple files passed as array in the first parameter of the function.

You’ll be in a great confusion if you have to buy the service from a new web hosting provider. There are many web hosting providers in the market and you’ve to choose the best among them so that you’ll not be suffered by choosing it. Most of the customers suffers from bad web hosting companies due to their unreliability and lacking of sustainability in the high volume of traffic.So, I always suggest you to compare the features of web hosting providers before buying it.

How to compare and get suitable web hosting provider?

There are many web hosting review and rating websites where you can find the information and review among the good web hosting providers. You can compare the features among the leading hosting providers in market. If you want to find the comparison among the different leading web hosting providers then you can view this web hosting rating website.webhostingratings.com is a new web hosting rating website where they are trying to build one of the biggest web hosting provider guide.

How to find a suitable web hosting plan? The answer of this question is a bit complicated. It depends upon the requirement of you and your websites.For example, if you have a web development company then what kind of web hosting plan will you buy ? My answer would be Reseller Hosting Providers as I can sell the web spaces among my customers where I act like a secondary web hosting provider. You can also buy Shared hosting or Virtual Private hosting(VPS) depending upon your requirement. If you want to know more about them then you can check the web hosting tutorials from webhostingratings.com.

Things you’ve to care about before choosing a web hosting provider

Here are the list of things you have to care about before choosing a web hosting provider.

1. Web Space – What is the size of space they are providing at the give cost ? Is is cheaper than others?
2. Bandwidth – What is the limitation of bandwidth(data transfer allowed) per month allowed? Is is enough for you per month ? Is it better than the other web hosting providers?
3. Uptime – Uptime measure weather the given web hosting provider is reliable or not. For example, 99% uptime tells that you’re going to get hassle for 1 minute in every 100 minute. Is that web hosting provider has the uptime of 99.99% or not?
4. Awards – Weather the web hosting providers you’re going to choose has got any web hosting awards for their excellent service or not. This measure also justify their excellency about the service.

These are the most basic things you’ve to look after before choosing the best web hosting provider.So, if you’ve to buy a web hosting provider then I recommend to read the reviews and their features from http://webhostingrating.com .

Today, I would like to share the way of handling array of HTML FORM elements using JavaScript and PHP.Well, it’s very easy to get the data from the array of HTML form elements in PHP and using them but in JavaScript it’s a bit tricky to handle the array of HTML form elements. I had a hard time to handle them via JavaScript in past thats why I’m posting it here so that people will not have hard time to cope with array of form elements in JavaScript and PHP.

Array of HTML form elements

You can create the array of Form Elements for grouping the similar kind of object or data. The array of elements are very useful in the context where you don’t know how many similar kind of data user have to enter. For example, you have a form where user have to enter his education qualification then you might not know how many of the textboxes are required for a person and in such kind situation you can dynamically generate array of the elements in the form for entering such kind of information.

<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />
<input name="education[]" type="text" size="20" maxlength="40" />

As you can in the above code, there are array element of textbox defined with the name “education”.Now, let’s see how can we handle them via JavaScript and PHP.

How to handle array of HTML form elements using PHP

If you submit the the the form with the above the array of elements then you can assess it via array of $_POST['education'] in PHP. You can use foreach() loop to access the value of the value of these form elements via PHP.

foreach($_POST['education'] as $key=>$value)
 echo $key.' '.$value;

Normally, posted variable are contained within the POST array but when you post the array of Form Elements then at that time the values are contained within the array of array i.e within $_POST['education'] in above exmaple.

How to handle array of Form elements using JavaScript

Handling the array of Form element part is a bit tricky. Now, let try to access the values of the above elements using JavaScript. First, let’s store the above object in a JavaScript variable

var mutli_education = document.form_name.elements["education[]"];

After storing the object in the variable, we can access the individual variables in the following way in JavaScript

for(i=0;i<mutli_education.length;i++)
{
 alert(mutli_education[i].value);
}

As you can see, you can get how many elements are there in the array using the lengh property and you can use the value property to get the value of the indivisual element.

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, Jacob mailed me and asked me how can I show different text or link in the status bar of browsers like Firefox or safari when mouse is over the link.He found the technique which only worked for IE but not for other browser but I’ve come up with a technique which works for all browser. This kind of technique is quite useful if you want to hide the actual link in status bar of browsers and show the different URL instead of actual one.

Old technique to display hide actual URL  in the status bar

If you search in google with the keyword change status bar text , you’ll find that many codes in different websites which are using window.status to change the text of the status bar while mouse is over the link. For example,

<a href="http://www.sell.com/?referrer=225" onMouseOver="window.status='http://www.sell.com';
return true" onMouseOut="window.status=''">Click here </a>

The above link displays “http://www.sell.com” instead of “http://www.sell.com/?referrer=225″ in the status bar when mouse is mover the hyperlink. But, the main drawback of above code is that it only works in Internet Explorer(IE) . It doesn’t change the status bar text of the link in any other browsers like “Firefox”, “Safari” etc.

How to display diferent URL of links in status bar of Firefox , Safari etc ?

To change the satus bar text of the the link in firefox and safari you’ve to just use a small technique with the help of “href” and “Onclick” attribute of the hyperlink. Let’s look at the this technique step by step,

1. First, make a javaScript function and define it exactly as below,

       <script language="javascript" type="text/javascript">
        function redirect(URL)
        {
          document.location=URL;
          return false;
        }
       </script>

2. Now, define the hyperlink with the status bar text in href attribute and call the above function from onClick attribute of the link like below,

   <a href="http://www.sell.com" onclick="return
   redirect('http://www.sell.com/?referrer=225');">Click here</a>

As we know the we see the text in status bar which is defined in the href attribute of the hyperlink. And when you click the link, code within onclick event of element is called. We’ve taken the benefit of this phenomenon to show the different text .

But remember, this technique also have a drawback as it doesn’t work if JavaScript is diabled in the web browsers. In that case, the browers will be redirecteed to URL in the href attribute. If you worried about disabled JavaScript then you can check this post to knnow how to handle disabled JavaScript in browser.

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