This tutorial teach you how to make Numeric updown control using jquery. This control is very usefull when we working with forms. so learn and use it into your website.

CSS CODE

#numericcontrol a
{
 cursor:pointer;
 background:#1dac2e;
 height:25px;
 display:inline-block;
 margin:0px;
 padding:0px 10px;
 float:left;
 line-height:25px;
 font-size:16px;
 color:#fff;
 text-decoration:none;
}
#numericcontrol input[type="text"]
{
 border:solid 1px #1dac2e;
 height:21px;
 float:left;
 width:50px;
 padding:1px 5px;
}

JQUERY CODE

HTML CODE

-+

Download File Used in this example View Live Demo

Total Downloads:

Learn How to change text on hover jquery by this simple jquery tutorial.This example shows a diffrent text on hover and shows the original text on hover out.

Jquery Code

HTML CODE

Hover Me

Download File Used in this example View Live Demo

Total Downloads:

Change Fontsize of your website on runtime and you may give an option to visitor for chaging fontsize according to their visiblity. Read this tutorial How to change font size using jquery and use it.

CSS CODE

body
{
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
}

JQUERY CODE

HTML CODE

  


    
Enter Font Size
    

    

  

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Download File Used in this example View Live Demo

Total Downloads:

Validate your forms empty fields by this simple code of jquery with css. you can customize error class according to your style.So use this Simple Jquery validation Tutorial

CSS CODE

#quoteForm label
{
 display:block;
}
.error
{
 border:solid 1px #ff0000!important;
}

JQUERY CODE

HTML CODE

      


        
Name
        
        
      

        
Email
        
        
      

        
Mobile No
        
        
      

        
Query
        
        
      

        

      
        
      

Download File Used in this example View Live Demo

Total Downloads:

Tooltips is always a essential part in website to show addtional text.so here is the simple tutorial of making tooltips with jquery
Simple Jquery Tooltip

CSS CODE

#pop-text
{
 position:absolute;
 padding:5px;
 background:#33CCFF;
 visibility:hidden;
 opacity:0;
 color:#fff;
 font-family:Arial, Helvetica, sans-serif;
}

Jquery CODE

HTML Code

Mouse Over to see Tool Tip

Download File Used in this example View Live Demo

Total Downloads:

Jquery Tutorial for chaning button text after clicked. Use this simple code and change your button text.

Jquery

HTML

Download File Used in this example View Live Demo

Total Downloads:

Getting image src is sometimes very important for doing some task. So this is a simple tutorial of get image src in jquery

Jquery

HTML

 

Click here to know the src of above image

Download File Used in this example View Live Demo

Total Downloads:

This is a tutorial of getting element class using jquery

Jquery

HTML

Click Me To Know My Class Name

Download File Used in this example View Live Demo

Total Downloads:

Many time we require the textbox value for calculations or other need. Get textbox value in jquery is very simple just read the following example.

Jquery

HTML

Download File Used in this example View Live Demo

Total Downloads:

Counting elements is sometimes very important task so here is the simple tutorial of counting number of elements in jquery. You can count any elements but the elements must be within the parent container.

Jquery

Count Number of List Items in following List

 
one
    
two
    
three
    
four

Download File Used in this example View Live Demo

Total Downloads:

Dropdowns are always doing a great job in web development, So there selected values are very important for doing task. you can get selected text of dropdown in jquery by this simple code.

Jquery

HTML

    Option 1
    Option 2
    Option 3
    Option 4

Download File Used in this example View Live Demo

Total Downloads:

Many times in web development we need to change div text using jquery, so this is a simple tutorial for this.

CSS

#content
{
padding:10px;
background:#eee;
width:300px;
}

Jquery

HTML

Click here to change text of div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Download File Used in this example View Live Demo

Total Downloads:

Hide and show a div using jquery is sometimes very usefull. So this is simple tutorial with jquery enjot it.

CSS

#content-div
{
width:300px;height:300px;background:#009999;
}

Jquery

HTML

Hide Div
  
Show Div

Download File Used in this example View Live Demo

Track window size with jquery is simple.You can use this method to achive many things in your website.

Jquery

$(document).ready(function(e) {
 $win_w=$(window).width();
 $win_h=$(window).height();
 $('#window-width').html("Window Width : "+$win_w);
 $('#window-height').html("Window Height : "+$win_h);   
});
$(window).resize(function(){
 $win_w=$(window).width();
 $win_h=$(window).height();
 $('#window-width').html("Window Width : "+$win_w);
 $('#window-height').html("Window Height : "+$win_h); 
 });

HTML

Resize window to check realtime window size

Download File Used in this example View Live Demo

change background color with jquery is easy you just need to change body css on an event. You can change the background color of any content just replace the body with your content name.

Jquery

$(document).ready(function(){
  $('#red').click(function(){
   $('body').css("background-color","#ff0000");
  });
  $('#green').click(function(){
   $('body').css("background-color","#009900");
  });
  $('#blue').click(function(){
   $('body').css("background-color","#0066FF");
  });
 });

HTML

Red
Green
Blue

Download File Used in this example View Live Demo

You can change css value with jquery an example of this is below, you can change any css value with jquery so chnage it according to your need.

CSS

.content{background:#ccc;}

Jquery

$(document).ready(function(){
  $('#change').click(function(){
   $('.content').css("background-color","#FF0000");
   $('.content').css("color","#FFF");
  });
 });

HTML

This is a sample content.
Click to change above div css

Download File Used in this example View Live Demo