TEAMPHP: May 2011

Difference between $(document).ready(function(){}); and $(window).load(function(){});

When I have started learning I was bit confused about what is the difference between $(document).ready(function(){}) and $(window).load(function(){}) is all about and when does these scenarios will help while coding. I gone through so many articles in this regard from this web world and done some research on the same.

This article might help people who are at beginner level and what to know more about $(document).ready(function(){}) and $(window).load(function(){}) in jQuery.

$(document).ready(function(){}):

If you want to execute a function when the DOM [example: an 'element'] is fully loaded, then you can specify that function in $(document).ready(function(){});
If you want to know more about this, you can visit one good site named “learningjquery“. Karl Swedberg has explained clearly about the same with an example of how to start coding in jQuery.

<script language="javascript">
$(document).ready(function() {
 // execute when the DOM [example: an 'element'] is fully loaded
});
</script>

$(window).load(function(){}):

This executes when the complete page is fully loaded that is when all items are fully loaded on the page which includes all images, iframes, objects etc., This helps when you want to play with images which has been loaded on the page, for example: if you want to know the width and height of the particular image or if you want to adjust the alignment of the image inside a ‘div’ element lets say vertical middle in a div.

<script language="javascript">
$(window).load(function() {
 // executes when complete page is fully loaded, including all images, iframes etc.,
});
</script>

If you have more examples of this sort, please do share the same in comments section below. It would help people like me to understand and to learn quickly

Flipping of image with another using JavaScript

Below is very simple snippet code for flipping of two images using JavaScript. If possible you guys can make it generic snippet code. This code will help in mainly for showing / hiding of div’s, for example if he clicks on ‘Show Image’ it will automatically changes to ‘Hide Image’. Its a simple snippet code.

Below is the div, in div – Initially I am showing the hide image, when user clicks on this image, the image as well as the title of the img will be swapped with show image and the title will be ‘Maximize’… and Vice-Versa.

The below function should be placed in <script></script>.

//This Function is for Flipping of 'Show Image' to 'Hide Image' and Vice-Versa
function flip(imageID) {
var img = document.getElementById(imageID);
if (img.src.indexOf('images/hide.gif') > -1) {
img.src = 'images/show.gif';
img.title='Maximize';
} else {
img.src = 'images/hide.gif'
img.title='Minimize';
}
}

below div should be placed in <body>.

<div><a href="#" onClick="flip('hide'); return false;" title="Minimize" style="padding:0px"><img src="images/hide.gif" id="hide" border="0"></a></div>

Javascript to strip special characters from a string

 <script language="JavaScript"><!--
var temp = new String('This is a te!!!!st st>ring... So??? What...');
document.write(temp + '<br>');
temp =  temp.replace(/[^a-zA-Z 0-9]+/g,'');
document.write(temp + '<br>');
//--></script>

Remove duplicates from an array using JavaScript

Here is a simple and easily understandable snippet code, to remove duplicates from an existing array using JavaScript. You guys! might have come across in some situation where in which the array has got some duplicates and want to remove those duplicates to show up unique ones. Below simple JavaScript code does the same, initially the respective array has got some value like below:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4);

javascript code:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4); //Declare array
document.write(uniqueArr(sampleArr)); //Print the unique value
 
//Adds new uniqueArr values to temp array
function uniqueArr(a) {
 temp = new Array();
 for(i=0;i<a.length;i++){
  if(!contains(temp, a[i])){
   temp.length+=1;
   temp[temp.length-1]=a[i];
  }
 }
 return temp;
}
 
//Will check for the Uniqueness
function contains(a, e) {
 for(j=0;j<a.length;j++)if(a[j]==e)return true;
 return false;
}

Monday, May 9, 2011