Web Design Codes

Thursday, July 21, 2011

Javascript Dancing text

9:20 AM Admin No comments

Here is the code that makes the text Dancing:

<script language="JavaScript1.2">



//configure message
message="Welcome to webdesign-codes.blogspot.com"
//animate text in NS6? (0 will turn it off)
ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
</head>
<body>

<h2><div id="jumpx" style="color:green"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>

JQuery Hover Image Zoom

5:35 AM Admin No comments

This is zooming hovered image. it can be use in image gallery or simple zoom effect on any image.

1. Here we need a file called jquery-1.6.1.min.js, Click Here to download

2.HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                width: "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });
 
        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>
    <style type="text/css">
        #container {
            text-align: center;
            position: absolute;
            left: 260px;
            margin-top: 150px;
            width: 790px;
        }
        .img {
            position: fixed;
            z-index: 0;
        }
        .end {
            margin-right: 0;
        }
        .clear {
            clear: both;
        }
        .img a img {
            position: relative;
             border: 0 solid #fff;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="img"><a href="#"><img src="images/1.jpg"/></a></div>
        <div class="img"><a href="#"><img src="images/2.jpg"/></a></div>
        <div class="img"><a href="#"><img src="images/3.jpg"/></a></div>
        <div class="img"><a href="#"><img src="images/4.jpg"/></a></div>
        <div class="img end"><a href="#"><img src="images/5.jpg"/></a></div>
        <div class="clear"></div>
    </div>
</body>
</html>

Make your website as user's Homepage

10:36 PM Admin No comments

Here is the Code for make your website as user's Homepage.

Code:

<BODY>


<SCRIPT LANGUAGE="JavaScript">

 <!-- Begin
 // If it's Internet Explorer, use automatic link
 // Be sure to change the "http://www.YourWebSite.com\"
 // to the URL you want them to bookmark.
 if (document.all){
   document.write('<A HREF="javascript:history.go(0);" onClick="this.style.behavior=\'url(#default#homepage)\';this.setHomePage(\'http://www.YourWebSite.com\');">');
   document.write('<font size="5" color=6699FF face=arial><B>Click Here to Make My Web Page Your Homepage</B></font></a>');
 }

 // If it's Netscape 6, tell user to drag link onto Home button
 // Be sure to change the "http://www.YourWebSite.com\"
 // to the URL you want them to bookmark.
 else if (document.getElementById){
   document.write('<a href="http://www.YourWebSite.com">Drag this link onto your Home button to make this your Home Page.</a>');
 }

 // If it's Netscape 4 or lower, give instructions to set Home Page
 else if (document.layers){
   document.write('<b>Make this site your home page:</b><br>- Go to <b>Preferences</b> in the <B>Edit</B> Menu.<br>- Choose <b>Navigator</b> from the list on the left.<br>- Click on the <b>"Use Current Page"</b> button.');
 }

 // If it's any other browser, for which I don't know the specifications of home paging, display instructions
 else {
   document.write('<b>Make this site your home page:</b><br>- Go to <b>Preferences</b> in the <B>Edit</B> Menu.<br>- Choose <b>Navigator</b> from the list on the left.<br>- Click on the <b>"Use Current Page"</b> button.');
 }
 //  End -->
</script>

JavaScript Analog Clock

9:54 PM Admin No comments

DHTML clock scripts sure have come a long way since the straightforward numeric display. Meet this clock app, which shows neatly in the browser's corner the time in standard format.

Preview

<script language="JavaScript">

fCol='444444'; //face colour.
sCol='FF0000'; //seconds colour.
mCol='444444'; //minutes colour.
hCol='444444'; //hours colour.

Ybase=30; //Clock height.
Xbase=30; //Clock width.


H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}



function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=1; i < dots+1; i++){
 document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)
 document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=0; i < dots; ++i){
 document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
 document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}

if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20;
for (i=0; i < dots; ++i){
 ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
 ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
 x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
 y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
 z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
setTimeout('clock()',100);
}
clock();
//-->
</script>

PHP Contact Form

9:18 PM Admin 1 comment

In this tutorial create 2 files
1. contact.php
2. send_contact.php

Step
1. Create file contact.php.

<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td><strong>Contact Form </strong></td>
</tr>
</table>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><form name="form1" method="post" action="send_contact.php">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="16%">Subject</td>
<td width="2%">:</td>
<td width="82%"><input name="subject" type="text" id="subject" size="50"></td>
</tr>
<tr>
<td>Detail</td>
<td>:</td>
<td><textarea name="detail" cols="50" rows="4" id="detail"></textarea></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input name="name" type="text" id="name" size="50"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="customer_mail" type="text" id="customer_mail" size="50"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit"> <input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

2. Create file send_contact.php.

<?php
// Contact subject
$subject ="$subject"; 
// Details
$message="$detail";

// Mail of sender
$mail_from="$customer_mail"; 
// From 
$header="from: $name <$mail_from>";

// Enter your email address
$to ='someone@somewhere.com';

$send_contact=mail($to,$subject,$message,$header);

// Check, if message sent to your email 
// display message "We've recived your information"
if($send_contact){
echo "We've recived your contact information";
}
else {
echo "ERROR";
}
?>

Rounded corners without the HTML mess

5:21 AM Admin No comments

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.

<div class="roundedbox">
  <div class="hd">
  <div class="c"></div>
</div>
<div class="bd">
  <div class="c">
    <div class="s">
      <-- main content goes here -->
    </div>
  </div>
</div>
<div class="ft">
  <div class="c"></div>
</div>
</div>

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTMLdivs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

<script type="text/javascript">
$(document).ready(function(){
    $("div.roundbox").wrap('
      <div class="roundedbox">'+
      ' <div class="bd">'+
      '   <div class="c">'+
      '     <div class="s">'+
      '     </div>'+
      '  </div>'+
      ' </div>'+
      '</div>');
});
</script>

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div‘s.

Here’s a sample div HTML structure:

<div class="roundbox">
  <-- main content goes here -->
</div>

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

useful jQuery tips, tricks

4:56 AM Admin No comments

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code.

As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.

1. Disable right-click

Disable right-click contextual menu.

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
        return false;  
    });  
});  

2. Disappearing search field text

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {  
$("input.text1").val("Enter your search text here");  
   textFill($('input.text1'));  
});  
  
    function textFill(input){ //input focus text function  
    var originalvalue = input.val();  
    input.focus( function(){  
        if( $.trim(input.val()) == originalvalue ){ input.val(''); }  
    });  
    input.blur( function(){  
        if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  
    });  
}  

3. Opening links in a new window

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {  
   //Example 1: Every link will open in a new window  
   $('a[href^="http://"]').attr("target", "_blank");  
  
   //Example 2: Links with the rel="external" attribute will only open in a new window  
   $('a[@rel$='external']').click(function(){  
      this.target = "_blank";  
   });  
});  
// how to use  
<a href="http://www.webdesign-codes.blogspot.com" rel="external">open link</a>  

4. Detect browser

Change/add something for a certain browser.

Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.

$(document).ready(function() {  
// Target Firefox 2 and above  
if ($.browser.mozilla && $.browser.version >= "1.8" ){  
    // do something  
}  
  
// Target Safari  
if( $.browser.safari ){  
    // do something  
}  
  
// Target Chrome  
if( $.browser.chrome){  
    // do something  
}  
  
// Target Camino  
if( $.browser.camino){  
    // do something  
}  
  
// Target Opera  
if( $.browser.opera){  
    // do something  
}  
  
// Target IE6 and below  
if ($.browser.msie && $.browser.version <= 6 ){  
    // do something  
}  
  
// Target anything above IE6  
if ($.browser.msie && $.browser.version > 6){  
    // do something  
}  
});  

5. Preloading images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {  
jQuery.preloadImages = function()  
{  
  for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);  
  }  
}  
// how to use  
$.preloadImages("image1.jpg");  
});  
</arguments.length;>  

6. CSS Styleswitcher

Switch between different styles?

$(document).ready(function() {  
    $("a.Styleswitcher").click(function() {  
        //swicth the LINK REL attribute with the value in A REL attribute  
        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
    });  
// how to use  
// place this in your header  
<link rel="stylesheet" href="default.css" type="text/css">  
// the links  
<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>  
<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>  
<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>  
});  

7. Columns of equal height

If you are using two CSS columns, use this to make them exactly the same height.

$(document).ready(function() {  
function equalHeight(group) {  
    tallest = 0;  
    group.each(function() {  
        thisHeight = $(this).height();  
        if(thisHeight > tallest) {  
            tallest = thisHeight;  
        }  
    });  
    group.height(tallest);  
}  
// how to use  
$(document).ready(function() {  
    equalHeight($(".left"));  
    equalHeight($(".right"));  
});  
});  

8. Font resizing

Want to let the users change there font size?

$(document).ready(function() {  
  // Reset the font size(back to default)  
  var originalFontSize = $('html').css('font-size');  
    $(".resetFont").click(function(){  
    $('html').css('font-size', originalFontSize);  
  });  
  // Increase the font size(bigger font0  
  $(".increaseFont").click(function(){  
    var currentFontSize = $('html').css('font-size');  
    var currentFontSizeNum = parseFloat(currentFontSize, 10);  
    var newFontSize = currentFontSizeNum*1.2;  
    $('html').css('font-size', newFontSize);  
    return false;  
  });  
  // Decrease the font size(smaller font)  
  $(".decreaseFont").click(function(){  
    var currentFontSize = $('html').css('font-size');  
    var currentFontSizeNum = parseFloat(currentFontSize, 10);  
    var newFontSize = currentFontSizeNum*0.8;  
    $('html').css('font-size', newFontSize);  
    return false;  
  });  
});  

9. Smooth(animated) page scroll

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {  
$('a[href*=#]').click(function() {  
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')  
 && location.hostname == this.hostname) {  
   var $target = $(this.hash);  
   $target = $target.length && $target  
   || $('[name=' + this.hash.slice(1) +']');  
   if ($target.length) {  
  var targetOffset = $target.offset().top;  
  $('html,body')  
  .animate({scrollTop: targetOffset}, 900);  
    return false;  
   }  
  }  
  });  
// how to use  
// place this where you want to scroll to  
<a name="top"></a>  
// the link  
<a href="#top">go to top</a>  
});  

11. Get the mouse cursor x and y axis

Want to know where your mouse cursor is?

$(document).ready(function() {  
   $().mousemove(function(e){  
     //display the x and y axis values inside the div with the id XY  
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);  
  });  
// how to use  
<div id="XY"></div>  
  
});  

12. Verify if an Element is empty

This will allow you to check if an element is empty.

$(document).ready(function() {  
  if ($('#id').html()) {  
   // do something  
   }  
});  

13. Replace a element

Want to replace a div, or something else?

$(document).ready(function() {  
   $('#id').replaceWith(' 
<div>I have been replaced</div> 
 
');  
});  

14. jQuery timer callback functions

Want to delay something?

$(document).ready(function() {  
   window.setTimeout(function() {  
     // do something  
   }, 1000);  
});  

15. Remove a word

Want to remove a certain word(s)?

$(document).ready(function() {  
   var el = $('#id');  
   el.html(el.html().replace(/word/ig, ""));  
});  

16. Verify that an element exists in jQuery

Simply test with the .length property if the element exists.

$(document).ready(function() {  
   if ($('#id').length) {  
  // do something  
  }  
});  

17. Make the entire DIV clickable

Want to make the complete div clickable?

$(document).ready(function() {  
    $("div").click(function(){  
      //get the url from href attribute and launch the url  
      window.location=$(this).find("a").attr("href"); return false;  
    });  
// how to use  
<div><a href="index.html">home</a></div>  
  
});  

18. Switch between classes or id’s when resizing the window.

Want to switch between a class or id, when resizing the window?

$(document).ready(function() {  
   function checkWindowSize() {  
    if ( $(window).width() > 1200 ) {  
        $('body').addClass('large');  
    }  
    else {  
        $('body').removeClass('large');  
    }  
   }  
$(window).resize(checkWindowSize);  
});  

19. Clone a object

Clone a div or an other element.

$(document).ready(function() {  
   var cloned = $('#id').clone();  
// how to use  
<div id="id"></div>  
  
});  

20. Center an element on the screen

Center an element in the center of your screen.

$(document).ready(function() {  
  jQuery.fn.center = function () {  
      this.css("position","absolute");  
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");  
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");  
      return this;  
  }  
  $("#id").center();  
});  

21. Write our own selector

Write your own selectors.

$(document).ready(function() {  
   $.extend($.expr[':'], {  
       moreThen1000px: function(a) {  
           return $(a).width() > 1000;  
      }  
   });  
  $('.box:moreThen1000px').click(function() {  
      // creating a simple js alert box  
      alert('The element that you have clicked is over 1000 pixels wide');  
  });  
});  

22. Count a element

Count an element.

$(document).ready(function() {  
   $("p").size();  
});  

23. Use Your Own Bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {  
   $("ul").addClass("Replaced");  
   $("ul > li").prepend("‒ ");  
 // how to use  
 ul.Replaced { list-style : none; }  
});  

24. Let Google host jQuery for you

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1  
<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  
google.load("jquery", "1.2.6");  
google.setOnLoadCallback(function() {  
    // do something  
});  
</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>  
  
 // Example 2:(the best and fastest way)  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  

25. Disable jQuery animations

Disable all jQuery effects

$(document).ready(function() {  
    jQuery.fx.off = true;  
});  

26. No conflict-mode

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {  
   var $jq = jQuery.noConflict();  
   $jq('#id').show();  
});  