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.

As you might know that this blog and tradepub.com are providing free magazines to the reader of this blog. You can check the free magazines and E-book in the free magazines resource of this blog. You can find a collection of great resources of IT knowledge from here. And, today I’m here to highlight the great E-books from sitepoint.com on essential PHP and JavaScript tips , tricks  and other resources.

Free E-book on the essential tips, tricks and hacks of JavaScript and PHP

You can find the great list of resources for the web developer in the list below. You can check them out grab a copy of your E-book right now.

• The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition – Free 207 Page Preview!
• The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks – Free 158 Page Preview

Other resources which are be very useful for the web developer. Do check them out and get a copy of yours.

• The Principles Of Project Management – Free 66 Page Preview!
• The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks & Hacks – Free 156 Page Preview
• Run Your Own Web Server Using Linux & Apache – Free 191 Page Preview
• Remote Replication Best Practices for Oracle 10g using XP Continuous Access
• Best Practices for Implementing HP Quality Center Software

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.

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

In last poll, Many people supported Zend Framework as the first choice for the PHP developments. And, today I would like to announce the result of the poll “which is the best JavaScript and Ajax framework ?” I would like to thanks all of you 690 voters who has participated in this poll. Today, I’ve no hesitation on saying that jQuery is the most popular and leading choice of web developer as a JavaScript and Ajax framework.

You can look at the poll result below. There is no dispute that  John Resig’s JavaScript library (jQuery) is their first choice as 52% web developers have voted for this library. In this blog, I’ve also posted many jQuery tutorials, Check them out .

[poll id="2"]

Today, I would like to share a fairly simple technique to disable right click menu of the website. I was using around 10-15 lines of JavaScript code to disable the menu that appears on the right click on the browser.

Here the code which you can use in the body tag of the document.

<body oncontextmenu="return false;">

As you can see, this code blocks the context menu i.e the menu which appears on the right click on the browsers. I’ve tested this code with major four browsers IE. Firefox, Opera and Safari. It worked well in all three browsers except Opera.

Last time, I had published a poll asking which is the best PHP framework and in that poll Zend Framework stand out itself to be the most popular PHP framework among the PHP developers. This time ,I’ve come up with another Poll and I would you to participate in this POLL “Which is the best JavaScript and Ajax Framework?”.

There are many JavaScript and Ajax framework available in the web and I think a lot of Web developers are confused which one to begin with. Today, I would like to hear from you which is the best JavaScript Framework among the popular JavaScript framework jquery, prototype.js, mootools, Dojo and YUI.

First let’s see some facts about these framework.If you look at the google trend of these JavaScript and Ajax framework Dojo seems to be dominant in the year 2007 but jQuery seems to be popular these days.

And if you look at this Slick speed selecter test , it seems that Mootools is providing better performance than the other JavaScript frameworks. Prototype.js is one of the oldest JavaScript and Ajax framework which is widely used in many high profile websites over the Internet. Furthermore, YUI which is supported by yahoo and is another strong framework in the list.

If you ask me which one is best JavaScript framework?, My personal favorite is jQuery as you can  see lots of examples in this blog with jQuery. One plus point of jQuery is that it is supported by large community and have a very good documentaion with example in jquery.com.

But I would like to hear from you which JavaScript and Ajax Framework you recommend for other to  use in their project.

[poll id="2"]

Sites like Google Image search and goodphptutorials.com displays the website under the IFRAME and I don’t think you guyz want your site to be displayed it under the IFRAME. If you want to protect your site to be displayed under the IFRAME then here is the tips for you.

JavaScript Code Prevent web page being displayed inside iframe

Place the following piece of code in JavaScript to those pages which you want to prevent being displayed inside the IFRAME.

<script type="text/javascript">
<!--
if (top.location.href != self.location.href)
  top.location.href = self.location.href;
//-->
</script>

The above code is simple and straightforward. First of all, it is checked that if url of the top frame is different to the URL containing the JavaScript code, if they are different then the website comes out of the IFRAME and gets displayed in the browser. This is how we can prevent your web page being displayed inside IFRAME but note that javascript must be enabled otherwise the code won’t take any action.

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

In this blog, I’ve been writing a lot of tips and tutorials using JavaScript. I really love JavaScript and hope that you guyz also like it. But what to do when JavaScript is disabled in the client’s browser?. I would like to redirect the visitor to a warning page where he’ll be suggested to enable the JavaScript.

In many scenario, we must need JavaScript in some pages and we never want to process that page.In this post, I’ll show you how to know and handle the disabled JavaScript in browser.

First click on the below link to see a JavaScript enabled page. Now, disable the javaScript in browser and click the below link.

View the Demo

How to know JavaScript is disabled in browser?

As you guyz know, <script></script> tag is used for javaScript. Same way there is <noscript></noscript> tag which gets in action when the Javascript is diabled in browser.

<script>code here gets executed when javascript is enabled</script>
<noscript>code here gets executed when javascript is diabled</noscript>

How to handle diabled javascript in browser?

When javascript is diabled I always want user to be redirected to a page to show warning to enabled javascript.But, JavaScript is diabled how to do this ? well there is meta tag in HTML named “meta refresh” which will redirect you to another page in the interval specified in that header

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=disabled.html">
</noscript>

As, you can see above code inside noscript, there is “meta refresh” tag with intevel of “0″ second. As, the javascipt is disabled in that page, the browser gets redirected to “disabled.html” to show some warning message

Download Example Files

Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with animation.

View Demo

HTML Code

<input type="text" name="quantity" id="quantity" /> <span id="errmsg"></span>

As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.

Javascript Code

First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.

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

Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.

//when key is pressed in the textbox$("#quantity").keypress(function (e)
{
  //if the letter is not digit then display error and don't type anything
  if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
  {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
  }
});

When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.

And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.

Download Full Source Code