jQuery By Example

Remove Item from Array using jQuery

2012-02-22T09:00:00.000+05:30

Today during my work, I came across a situation where I need to remove items from Array using jQuery. I did it using jQuery and thought of sharing with my you as well. Below code will remove the item from the array by its value (not by index).

$(document).ready(function(){
    var arr = ["jQuery","JavaScript","HTML","Ajax","Css"];
    var itemtoRemove = "HTML";
    arr.splice($.inArray(itemtoRemove, arr),1);
});

The above code is using JavaScript splice() method and jQuery.inArray() to find out index of the element. The splice() method adds and/or removes elements to/from an array, and returns the removed element(s) where jQuery.inArray() Search for a specified value within an array and return its index (or -1 if not found).

See result below.

And if you want to remove the items from Array by index only then you don't have to use jQuery.inArray to find the index. You can directly use splice() method and pass the index of the element.

$(document).ready(function(){
    var arr = ["jQuery","JavaScript","HTML","Ajax","Css"];
    var itemtoRemove = "HTML";
    arr.splice(1,1);
});

The second argument in splice() denotes number of items to be removed. If set to 0, no elements will be removed. If you use arr.splice(1,2) then it will remove 2 items from the array which are at index 1.

See result below.

You can also use splice() method to add items in array. Read more about splice() method here.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Detect Android Devices using jQuery

2012-02-21T11:00:00.000+05:30

Android and iPhone/iPad development is pretty hot and very much in demand. Below small piece of code will be useful to detect android devices using jQuery.

$(document).ready(function(){
  var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
  if(isAndroid > -1)
  {
      //It is an Android device. Redirect to Android Version.
  }      
});

You can test this code by changing the user agent in your browser and set it to Android. There are many plugins/ extension available that allows to change User agent. Below is the link for various user agent switchers available with chrome and firefox.

Also read:

Detect Apple Devices (iPad, iPhone, iPod) using jQuery

Feel free to contact me for any help related to jQuery, I will gladly help you.

Detect Apple Devices (iPad, iPhone, iPod) using jQuery

2012-02-21T09:35:00.000+05:30

iPhone/iPad development is pretty hot and very much in demand. Below small piece of code will be useful to detect apple devices like iPhone, iPad and iPod using jQuery.

$(document).ready(function(){

  var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
  var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
  var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");

  if(isiPhone > -1)
  {
      //Redirect to iPhone Version of the website.
  }
  if(isiPad > -1)
  {
      //Redirect to iPad Version of the website.
  }
  if(isiPod > -1)
  {
      //Redirect to iPod Version of the website.
  }    
});

You can test this code by changing the user agent in your browser and set it to iPhone, iPad or iPod. There are many plugins/ extension available that allows to change User agent. Below is the link for various user agent switchers available with chrome and firefox.

If you just want to detect whether the device used is one of out of these 3 then you can create a function which will return true, if the devices is one of them otherwise false.

function isAppleDevice(){
    return (
        (navigator.userAgent.toLowerCase().indexOf("ipad") > -1) ||
        (navigator.userAgent.toLowerCase().indexOf("iphone") > -1) ||
        (navigator.userAgent.toLowerCase().indexOf("ipod") > -1)
    );
}

Also read:

Detect Android Devices using jQuery

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to write IE Version specific jQuery code

2012-02-20T09:30:00.000+05:30

Well, making code browser compatible is always a challenge and presence of various browsers makes life difficult for developers. In this post, you will find the way to code for IE specific version. jQuery provides .browser property which returns the browser information. Below jQuery code checks for IE version 7 only.

$(document).ready(function(){
  if(jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == 7)
  {
      //Your Code Goes Here...
  }
});

The above code first checks if the browser is IE or not using "jQuery.browser.msie". This will return true for IE and false for other browsers. And after that it checks for the version of the browser.

See result below. (Please check in IE only)

You can also check for IE 8 or 9. All you need to change is the value in the if condition. Currently it is checking only for IE 7. So for IE 8,

$(document).ready(function(){
  if(jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == 8)
  {
      //Your Code Goes Here...
  }
});

If you want to run the code for IE 7 or higher version of IE, then just change the condition a little bit. See below.

$(document).ready(function(){
  if(jQuery.browser.msie && jQuery.browser.version.substring(0, 1) >= 7)
  {
      //Your Code Goes Here...
  }
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

Common Dropdown operation (Get, Set, Add, Remove) using jQuery

2012-02-15T10:00:00.000+05:30

DropDown list is a very basic and common control and You might be using either ASP.NET Dropdown list or normal html dropdown list in your project. In this post, I have put together the code examples for all kind of dropdown operation. For example, to get selected value from dropdown, for to set value in dropdown, for to add items to dropdown, for to remove items from dropdown and to enable/disable items in dropdown using jQuery. These little code snippets related to all kind of dropdown operation are quite useful.

I have summarized the code snippets under different sections which are given below.

Get value and text from dropdown list

Set value and selected index in dropdown list

Add Items to dropdown list

Remove Items from dropdown list

Enable/Disable items in dropdown list

Selection Change Event

Get value and text from dropdown list

Get selected option value

$('#ddlList').val()

Get selected option text

$('#ddlList option:selected').text()

Get dropdown list text

$('#ddlList').text()

Get selected index

$("#ddlList").get(0).selectedIndex;

Select first element

$("#ddlList option:first-child").attr("selected","selected");

DEMO:

Set value and selected index

Set selected index

$("#ddlList").get(0).selectedIndex = 3;

Set element by Value

$("#ddlList").val(5);

Set element by Text

$('#ddlList option:contains("HTML")').attr("selected","selected");

DEMO:

Add Items to dropdown list

Add item to list in the begining

$("#ddlList").prepend("");

Add item to list in the end

$("").appendTo("#ddlList");

DEMO:

Remove Items from dropdown list

Remove selected item

$('#ddlList option:selected').remove();

Remove Item by Value

$('#ddlList option[value="4"]').remove();
//This removes items with value 4.

Remove Item by Text

$('#ddlList option:contains("HTML")').remove();
//This removes items with Text HTML.

Remove all items excluding first item

$('#ddlList option:not(:first)').remove();

Remove all items excluding last item

$('#ddlList option:not(:last)').remove();

Clear/Empty drop down

$("#ddlList").empty();
//OR
$("#ddlList > option").remove();

DEMO:

Enable/Disable items in dropdown list

Disable item by value in dropdown list

$("#ddlList option[value='3']").attr("disabled","disabled");
//This disables item with value 3.

Disable item by text in dropdown list

$('#ddlList option:contains("HTML")').attr("disabled","disabled");
//This disables item with text "HTML".

Enable item by value in dropdown list

$("#ddlList option[value='3']").removeAttr("disabled");
//This enables item with value 3.

Enable item by text in dropdown list

$('#ddlList option:contains("HTML")').removeAttr("disabled");
//This enables item with text "HTML".

DEMO:

Selection Change Event

$("#ddlList ").change(function()
{
   /* do something here */
});

DEMO:

Hope you have find it useful.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Get Radio Button value using jQuery

2012-02-14T09:30:00.000+05:30

Here’s small piece of code to get the value of a checked or selected radio button out of a group of radio buttons.

var selValue = $('input[name=rbnNumber]:checked').val();

In above code, rbnNumber is name of the radio group.

Demo

HTML Code:

jQuery Code:

Result:

See Complete Code

You can also get the value of individual radio button using it's ID as selector.

var selValue = $('#rbnNumber:checked').val();

If you want to get ID of selected radio button out of group of radio button, then below code will work.

var selValue = $('input[name=rbnNumber]:checked').attr('id');

See Result, jQuery and HTML code below:

Feel free to contact me for any help related to jQuery, I will gladly help you.

Useful jQuery Text Editor Plugins

2012-02-13T10:30:00.000+05:30

Text editors allow users to edit and enter text within a web browser. Rich-text editors are essentially web-based WYSIWYG ("what you see is what you get") editors. In this post, I have put together a collection of some of the best, useful and free jQuery Text Editor plugins which are very user friendly and can be easily integrated with minor modifications. These plugins are developed using jQuery.

markitup
( Demo | Download )

markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

Fast and unobtrusive integration
Support for keyboard shortcuts
Ajax dynamic preview
Supported: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 and Opera 9+ as-is.
Licence: MIT/GPL
File: Packed naked engine is about 6.5Kb.

WYMEditor
( Demo | Download )

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG). WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

XHTML strict + CSS compliant
No font or text formatting, sizes or colors - WYMeditor is CSS-based
Designed to be easy to integrate into your application
No installation needed - this is 100% Javascript code - no plugin, no extension
Will remain as simple as possible
We focus on well-tested code, stability and usability before adding new features
Image, link, table support
Skins support via CSS
Internationalization
APIs, plugins support
Free and Open Source, fully adaptable to your needs.
Most of the browsers are supported.

uEditor
( Demo | Download )

uEditor is flexible and easy to use. As for widgEditor, the generated code is clean and valid (though you should verify it after form submission) and it's possible to use a custom sylesheet for rendering in WYSIWYG mode among other things.

HTMLBox
( Demo | Download )

JQuery HtmlBox is a modern, crossbrowser, interactive, opensource wysiwyg editor built on top of the excellent JQuery library. It is tested with the most widely deployed browsers Mozilla Firefox, SeaMonkey, Microsoft Internet Explorer, Opera, Apple Safari and Google Chrome. The variety of features, and the advanced configuration capabilities, combined with the easy and intuitive setup make HtmlBox as the preferred choice, when interactive user input is required such as in content management systems, forums, guest books, contact forms and others.

Easy Integration.
Multiple Browser Support.
Small Size.
XHTML Output Possible.
Ajax Support Out of the Box
Complete User Manual
Skinnable Interface
Custom Icon Sets

Lightweight RTE- jQuery
( Demo | Download )

Super lightweight 7kb uncompressed
Compatible with major browsers
Degrade gracefully
GNU General Public License

Feel free to contact me for any help related to jQuery, I will gladly help you.

Get checkbox status using jQuery

2012-02-13T09:30:00.000+05:30

Below single line of code will provide the status of checkbox using jQuery. It checks whether the checked is checked or not using jQuery and will return 1 or 0.

var isChecked = $('#chkSelect').attr('checked')?true:false;

I have noticed that on many website it is written that 'checked' attribute will return true or false, but this is not correct. If the checked box is checked then it return status as "checked", otherwise "undefined".

Check Yourself.
So if you want to have true or false, then you need to use conditional expression as I have done in the code.

Below are some other ways of checking the status of checkbox.

var isChecked = $('#chkSelect:checked').val()?true:false;

$('#chkSelect:checked').val() method returns "on" when checkbox is checked and "undefined", when checkbox is unchecked.

var isChecked = $('#chkSelect').is(':checked');

The above method uses "is" selector and it returns true and false based on checkbox status.

Check Yourself.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Prevent Default behavior using jQuery

2012-02-10T09:30:00.000+05:30

If you want to prevent default behavior of any element using jQuery then below little piece of code will help you. For example, the default behavior of the button is click but if you want to prevent it for any reason, then you can use jQuery provide "preventDefault" method.

$(document).ready(function(){
  $("#btnSubmit").click(function(e){
     e.preventDefault();
  });
});

Above code will not perform a postback on click of button. ASP.NET developers are familiar with Postback term but still if you are not familiar with Postback term then [A postback is an HTTP POST to the same page that the form is on. In other words, the contents of the form are POSTed back to the same URL as the form.]

When JavaScript was on top, then the developers used to write "return false;" to prevent postback. For example, while submitting the form, you are validating the inputs and if inputs are not valid then you don't want to post the data back to server. So in such scenario, "return false;" is used. Well, you can still use "return false;" with jQuery but a better approach is to use "event.preventDefault()".

But then you might be wondering what is the difference between "return false;" and e.preventDefault(). right? Here is your answer.

The "return false;" statement not only disables the default action but it also stops event bubbling, where e.preventDefault() doesn't stop event bubbling. Read below post for detailed answer and a cool demo.

The difference between ‘return false;’ and ‘e.preventDefault();’

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to check element visible or hidden using jQuery

2012-02-09T13:03:00.000+05:30

Below is a simple piece of jQuery code which checks the visibility of element using jQuery. jQuery provides "visible" selector which can be used to check the visibility.

var isVisible = $('#dvData').is(':visible');
alert("dvData is " + isVisible);

If you want to check if element is hidden, then you can use ":hidden" selector.

var isHidden  = $('#dvData').is(':hidden');
alert("dvData is " + isHidden);

See Demo & Code

There is a myth that ":visible" and ":hidden" selector checks for "display" css property which is used to show/hide the element. But this is not correct.

<div id="dvData" style="display:none;">
//Your content goes here...
</div>

Before jQuery 1.3.1 (and older) an element was visible if its CSS "display" was not "none", its CSS "visibility" was not "hidden", and its type (if it was an input) was not "hidden" But After jQuery 1.3.1 versions an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

However, if you have used "visibility" css property to hide the element then ":visible" and ":hidden" selector will not work. Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

See Demo & Code

So if you have seen the above demo then it must be clear to you that ":visible" and ":hidden" selector will not work with css property "visibility". So what's the solution?

If you have used "visibility" css property to hide the element then use ":hidden" jQuery selector to check the visibility.

<div id="dvData" style="visibility:hidden;">
//Your content goes here...
</div>

then use below code to find out where element is visible or not.

if ($('#dvData').css("visibility") == "hidden")
{
   // Item is hidden. Write your code.
}
else
{
   // Item is Visible. Write your code.
}

See Demo & Code

Read "What's the difference between display: none and visibility: hidden?"

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to use jQuery setTimeout function

2012-02-09T10:00:00.000+05:30

If you want to delay your jQuery code to run after some amount of time, you can use JavaScript setTimeout function to delay the execution. setTimeout is used in JavaScript to delay execution of some code and the same function can be use with jQuery without any extra effort.

The Basic syntax for setTimeout function is,

setTimeout(function() {
      // Do something after 2 seconds
}, 2000);

The setTimeout function takes the times in miliseconds. And the block can contain either your jQuery code, or you can also make a call to any function.

For example, if I want to make div element fade out then you can use below code. It will fade out the div with id "dvData" after 2 seconds.

$(document).ready(function(){ 
    setTimeout(function(){ 
        $('#dvData').fadeOut();}, 2000); 
});

The above code will fade out the div after 2 seconds automatically when page is loaded.

See Demo & Code

You can also call this on button click as well. All you need to do is to put the above code on click of button.

$(document).ready(function() { 
    $("#btnFade").bind("click",function() {
      setTimeout(function() { 
        $('#dvData').fadeOut();}, 2000); 
  });
});

See Demo & Code

You can also use below alternative that is create a function and call it on click of button.

$(document).ready(function() { 
    $('#btnFade').bind('click', function() {
      FadeOut();
  }); 
  function FadeOut()
  {
     setTimeout(function() { 
        $('#dvData').fadeOut();}, 2000); 
  } 
});

As I mentioned earlier that with setTimeout(), you can also make a call to another function. Till now, we were writing a piece of code and that is ideal if your code is one line but when lines of code is more then it is better to create a separate function and call it in setTimeout().

$(document).ready(function() { 
    $('#btnFade').bind('click', function() {
      FadeOut();
  });
    
  function FadeOut()
  {
     setTimeout(FadeDiv(), 2000); 
  }
    
  function FadeDiv()
  {
    $('#dvData').fadeOut();
  } 
});

See Demo & Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

Extract numbers from string using jQuery

2012-02-07T10:05:00.000+05:30

Today I got into a situation where I need to extract the numbers from the string variable on client side using jQuery. If a string has 1 or more occurrence of the numbers then also need to extract it and store it into an array. For example, if the string is

var str = '3jquery33By333Example3333';

And required output is:

So all I need was a regular expression which matches all the numbers in the string and return the array. Below is the jQuery code which I have used.

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQTouch Vs Sencha Touch vs jQuery Mobile

2012-02-06T10:00:00.000+05:30

In my previous post, I have put together the difference between jQTouch and jQuery Mobile. But there is another Mobile Framework named "Sencha Touch" which is developed by the same person who has created jQTouch. Before you move further to know more about Sencha Touch, please read jQTouch vs jQuery Mobile.

What is Sencha Touch?

Sencha Touch is the world's first mobile web app development framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. It make specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. It makes extensive use of CSS3 in our stylesheets to provide the most robust styling layer possible.

Sencha Touch is a cross-platform framework aimed at next generation, touch enabled, devices. It's currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices.

Altogether, the entire library is under 120kb (gzipped and minified), and it's trivial to make that number even smaller by disabling unused components or styles.

Features of Sencha Touch

Easy Setup
Sencha Touch includes a set of graphical user interface GUI-based controls or "components" for use within mobile web applications. These components are highly optimized for touch input.
Built-in transition effects
Resolution Independent
Touch event management: It supports events like Tap, Double Tap, Pinch, Swipe and Scroll.
Application data support: Sencha Touch has a data package to support web standards for data interchange with servers such as Ajax and JSONP

Official Website

Differences

jQuery Mobile supports more number of mobile platform as compare to Sencha Touch. Sencha touch only supports iOS, Android and recently Blackberry.
jQuery Mobile and Sencha touch both provides great UI features with lots of control but Sencha touch wins here. Sencha Touch offers a bit more like lots of icons, or built-in maps.
jQuery Mobile is easy to use as Sencha Touch is completely Javascript. Your application takes place in js files, dealing with js classes. On the other hand, jQueryMobile is markup-driven. Sencha Touch is an extension of the Ext JS framework. It has a more native language feel than html and does not follow open standards. For example, the entire <body> of a webpage is generated in javascript.
jQuery Mobile is easy to learn but for Sencha touch one need to put extra effort to learn it. In fact the documentation of Sencha touch is not comprehensive but jQuery Mobile documentation is quite good.
jQuery mobile is light weight compare to Sencha touch.
Sencha Touch supports a more MVC style application design, whereas jQuery mobile will simply be a load of markup and a load of jQuery script converting your HTML elements into touch friendly interface components.
jQuery Mobile Framework is easy to integrate with other technologies.
jQuery Mobile is free where Sencha Touch is available free of charge for commercial and open source application development. However, embedding Sencha Touch in a web application builder or software development kit (SDK) requires a paid commercial OEM license agreement. Read more about Sencha Touch Licensing FAQ.

In the end, no mobile framework is perfect and the choice depends on the project requirement. But my favorite is jQuery Mobile.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQTouch vs jQuery Mobile

2012-02-01T10:30:00.000+05:30

Today, mobile is a very common object and that's why Mobile frameworks are in very much demand. In this post, I will show you brief walk through of 2 most popular jQuery based mobile framework "jQTouch" and "jQuery Mobile". And I will also explain the differences between "jQTouch" and "jQuery Mobile".

What is jQTouch?

First thing I want to clear about jQTouch is that "It is not a framework". Its a myth that it is a framework. (Though I have also mentioned earlier in my post, but that's a myth) jQTouch is a jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. It supports minified code, native WebKit animations, swipe detection, auto list navigation, flexible themes, has the ability to be tweaked with custom extensions. jQTouch is built by David Kaneda and maintained by Jonathan Stark.

Features of jQTouch

Easy Setup
Native WebKit Animations
Image Preloading
Callback Events
Flexible Themes
MIT Licensed
Swipe Detection
Extensions
Improved File Size

jQTouch is focussed strictly on the iPhone, iPod Touch, and soon, Android. jQTouch progressively enhances HTML and CSS, so that less capable phones are still be able to browse content.

Official Website

What is jQuery Mobile?

jQuery Mobile is touch-Optimized Web Framework for Smartphones & Tablets. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Features of jQuery Mobile

Built on jQuery core
Compatible with all major mobile, tablet, e-reader & desktop platforms
Lightweight size and minimal image dependencies for speed
Modular architecture
HTML5 Markup-driven configuration
Progressive enhancement
Powerful Ajax-powered navigation system
Touch and mouse event support
Unified UI widgets
Powerful theming framework

jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

Official Website

Differences

As I have stated earlier that jQTouch is not a framework, it is plugin. Where jQuery Mobile is framework created for Mobile and tablet devices.
jQTouch is optimized for WebKit.Therefore jQTouch might be preferable if you plan on specifically targeting users tied to an iOS- or Android-based device. Where jQuery Mobile is compatible with all major mobile and tablet platforms.
jQTouch provides access to Geolocation (Access to device GPS Data) where jQuery Mobile doesn't provide this hardware access(to date).
jQTouch is focused on small screen devices. From their blog.
"Apps developed with jQTouch will certainly run fine on iPads and other tablet devices, but we aren’t going to automagically convert to a more tablet-friendly UI that takes advantage of the additional real estate."
In terms of performance jQTouch is better than jQuery Mobile. If you are targeting only Webkit devices then go for jQTouch.
Though jQTouch project is technically active, the original author has moved on and development seems to have slowed where jQuery Mobile Announced in August 2010, it’s quickly progressed to a very functional Alpha 2.

This guy named "Markus Falk" has created a frequently-updated chart that shows of pros and cons of all the mobile frameworks out there.

The chart displays the rendering engines supported, target platform, hardware, development languages, license and UI features for each framework. Plus, it also has a wizard feature which allows to filter the framework based on various functionality.

View Comparison Chart

Feel free to contact me for any help related to jQuery, I will gladly help you.

Set innerText using jQuery

2012-01-25T10:30:00.000+05:30

In this post, I will explain that how to set innerText using jQuery. But do you know what is innerText? innerText term means text which appears between the start tag and end tag. In JavaScript, the "inner" text of an HTML element refers to the text between any set of HTML tags and using innerText property, one can set the text in JavaScript. But to set innerText using jQuery, use text() method. jQuery text() method sets the innerText of any element. Well, we can still club the jQuery and JavaScript without any problem and it will work. A example of innerText would be below.

<span>I am innerText of span element</span>

As I mentioned earlier that one can still use JavaScript in jQuery code so that means one can still use innerText in jQuery to set innerText of any element but there is a problem with this property. This property doesn't work with Firefox. It works quite well with IE and Chrome. So the similar property for Firefox is textContent. But textContent doesn't work with other browsers like IE and Chrome.

As we know that one of the advantage of jQuery is browser independence. So the text() method works in all the browsers. So it works like the textContent property in Firefox and innerText in IE.

Using text() function, you can not only set the text but you can also get the text of element. For example, if you want to set text for any div with id "dvElement" then use following code.

$(document).ready(function()
{
    $("#dvExample").text('I am new content of the div.')
});

And to get the text of the div,

$(document).ready(function()
{
    $("#dvExample").text('I am new content of the div.')
    var dvText = $("#dvExample").text();
    alert(dvText);          
});

Output:

Feel free to contact me for any help related to jQuery, I will gladly help you.

Write and test your jQuery code online

2012-01-24T10:30:00.000+05:30

In this post, you will see 3 different website which provides web playground to write and test your jQuery code online. The advantage of using these online playground is that one can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog.

jsFiddle

The first website is "jsFiddle", which provides an online environment where anyone can test his code against many Javascript frameworks like jQuery, MooTools, Dojo, Prototype and many more.. The one very important feature of this website is as and when new version of any library is released, it is available on jsFiddle.

As you can see from the above screenshot, the website is divided into 5 parts. On the very left, you need to select your framework and its version as well. Suppose, you want to test your code against jQuery then select jQuery and its related version. You are also allowed to test jQuery UI. If you also want to add any external javascript or css, then you can also add its URL under "Add Resoruce" Tab.

Other parts of the interface are HTML editor, CSS editor, Script editor and your output. As the name suggest, Put all your HTML code in HTML editor, CSS code in CSS editor and Javascript/jQuery code in Script editor. Output section is used to see the output.

Write your code and hit run button on the top. And you will see the output in output section. You can also save your code (Save button). Once you save the code, then copy the URL and use it for future reference. It also maintains version.

Features:

Inbuilt mechanism to reference any of the javascript library
Supports of latest and previous version of libraries
Maintains different versions
Support of Tidy up which arranges your messy code
Support of jsLint, (Javascript code quality tool)
Allows to share the page with social media websites.
Support to mark the first version as base version.

I use this website to make demo for my post to share with my you guys. There are many features which you can explore. So what are waiting for? Start using jsFiddle.

Google Code PlayGround

Next is Google Code PlayGround developed by Google to write and test not only jQuery but one can also write and test against the APIs provides by various Google services like Google Maps, YouTube, Google Earth and many more...

As you can see from the screenshot, website interface is divided into 3 parts.

First part to select libraries. There are various libraries available.
Second to write your HTML, CSS and Script.
Third is Output section.

The good thing about this website is you can also debug your code step by step which is a very nice feature.

jsbin

jsBin is another cool website to fulfill your purpose. Before jsFiddle, I used this website a lot to create demos for my blog post. Like jsFiddle, this website also provides separate section for HTML, Script and Real Time Preview.

jsBin also provide 2 different views "Code" and "Render". When you click on Render view, you will see the output section in complete page which is sometimes very useful as the Real Time Preview section is small and it sometimes may not be useful to see the complete output.

One disadvantage with this website is, it does not provide an inbuilt mechanism to select any library. You need to reference it from any of the CDN. Read "Why to use Google hosted jQuery CDN".

I have create a sample demo using jsBin. Visit http://jsbin.com/aracuf/edit
Like jsFiddle, jsBin also maintains different version. See URL http://jsbin.com/aracuf/2/edit#source

Visit here to find out all the features of jsBin.

Personally, I prefer jsFiddle due to its wide range of features. So what are you waiting for. Just play with these sites and start using them regularly for your jQuery code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

End Date should not be greater than Start Date using jQuery Date Picker

2012-01-23T10:30:00.000+05:30

How many times you have seen this message on websites? OR as a programmer, you should have implemented this very common date validation which is "End Date should not be greater than Start Date". Gone those days where you write long java script functions for date validation and alert/show a error message on screen. It will be a nice feature where you don't allow end user to make mistake. Okay, enough talking now. In this post I will show you how to make "End Date should not be greater than Start Date" using jQuery and jQuery UI Datepicker.

Read my series of articles about jQuery UI Datepicker.

Required Resources:
1. jQuery
2. jQuery UI and jQuery UI CSS

Okay, so there are mainly 2 kind of validation conditions which are,

Start date should not greater than end date.
End date should not less then start date.

So let's put 2 textboxes "txtFromDate" and "txtToDate" and assign Date picker to it. With jQuery UI Date picker, there is an event "onSelect" which fires when any date is selected. So using this event, set the date range for other date pickers.

For example, when from date is selected, then using this "onSelect" event we will set the "minDate" attribute of "txtToDate" textbox to the selected date in "txtFromDate". What it does is that, dates less than the selected from date will be disabled in "txtToDate" textbox. And same way set the "MaxDate" attribute for "txtFromDate" in onSelect event of "txtToDate" textbox. Below is the complete jQuery code.

$(document).ready(function(){
    $("#txtFromDate").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({ 
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });  
});

"numberOfMonths" attribute allows to display multiple months in date picker. Read here about all the attribute of jQuery UI Datepicker.

See result below.

See Complete Code

Okay, this is interesting. But there is one more important condition which is also needed.

Start date should not be greater than today's date.

Along with, there is one more functionality which you must have seen like many websites like flight booking, railway booking where there is a limit for To Date as well. For example, in India train ticket booking is only possible for next 90 days from the current date.

Okay so let's see that how we can implement these 2 conditions as well using jQuery UI DatePicker.

jQuery UI DatePicker provides attributes "MinDate" and "MaxDate" which allows to set minimum permissible date and maximum permissible date. So when "minDate" attribute is set to 0, then past dates will become disable from current date. And set "maxDate" to "+90D" which will make all the future dates disable except 90 days from current date. See below jQuery code. In this example, I have set "maxDate" to 60 days plus only.

$(document).ready(function(){
    $("#txtFromDate").datepicker({
        minDate: 0,
        maxDate: "+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({ 
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });  
});

See result below.

See Complete Code

One advice: If you are still using Java Script, stop using it and switch to jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

5 jQuery DatePicker Plugin collection

2012-01-20T10:43:00.000+05:30

There is no doubt that website are getting more and more user friendly these days and with the growth in technologies, it is not that difficult to make such websites. For example, you will not find simple input boxes or 3 select boxes (day, month and year) for date input. With jQuery, jQuery UI and Ajax, things looks pretty awesome and catching.

In this post, I have put together a collection of some of the best jQuery DatePicker plugins which are very user friendly can be easily integrated with minor modifications. These plugins are developed using jQuery, jQuery UI, Ajax.

glDatePicker
( Demo | Download )

Ajax Booking Calendar Pro
( Demo | Download )

jQuery.calendarPicker
( Demo | Download )

Date Range Picker using jQuery UI 1.6 and jQuery UI CSS Framework
( Demo | Download )

wdCalendar – jQuery Based Google Calendar Clone
( Demo | Download )

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to use jQuery on() and off() method

2012-01-18T10:30:00.000+05:30

Using jQuery .on() and .off() – AndiSmith.com

jQuery 1.7 was released in month of November last year and with the jQuery 1.7, do you know that live() method is deprecated. And new method was introduced to replace live() called "on()". "jQuery on()" is a new way to attach events to selectors. The on() event handler is designed to replace both the .bind() and .delegate() event handlers.

I have found an article with the explanation of these new functions. Along with explanation, it also throws light on some other aspects to the changes in jQuery 1.7+ that one should keep in mind.

Also read, "bind() vs live() vs delegate() method"

Why live was deprecated()

There are a number of problems with .live(), especially with poor performance on large pages, a slower response or unexpected behaviour due to .live() events being attached to the document element. Unfortunately there are still a large number of developers using .live() in their code. If you’re one of them, please stop. See "Why .live() is a Bad Option" for more information.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Difference between sorting string array and numerical array in jQuery

2012-01-17T11:00:00.000+05:30

To sort any array, there is a predefined method called "sort" which sorts the array. sort() method sorts the string array in alphabetical order. This method sorts on the basis of the ASCII values, so it is better to have all uniform names. That is, they must begin with either uppercase or lowercase, but not mixed case. So to sort any string array use the sort method. Below jQuery code sort the string array.

$(document).ready(function() {
  var list= [ "jQuery", "Dojo", "JavaScript", "Ajax"];
  $('#alltech').html(list.join(""));
  list = list.sort();
  $('#sorted').html(list.join(""));
})

See result below.

See Complete Code

Now, declare any numerical array and try to use the sort method on this. Just try the below code to check the output.

$(document).ready(function() {
  var list= [ 45, 32, 98, 24, 16, 9, 3];
  $('#allnumber').html(list.join(""));
  list = list.sort();
  $('#sorted').html(list.join(""));
})

See result below.

Surprised!!!!!!!

Well, the numerical values are not sorted correctly with the sort() method because as mentioned earlier that it considers the ASCII value of the first numerical digit of all numerical values for sorting purposes. To sort numerical values correctly, we must define a comparison function with sort().

If we define a comparison function, then a pair of values from the array will be repeatedly sent to the function until all elements of the array are processed. In the comparison function, we thus write a statement considering the pair of values passed to it so that the function returns any of the following three values: <0, =0, or >0.

When the function returns value <0, the second value (of the pair of array values sent to the function) is larger than the first value and hence must be pushed down the sorting order.
When the function returns value >0, the first value is larger than the second value, so it must be pushed down the sorting order.
When the function returns value =0, it means there is no need to change the sort order since the two values are same.

$(document).ready(function() {
  var list= [ 45, 32, 98, 24, 16, 9, 3];
  $('#allnumber').html(list.join(""));
  list = list.sort(function(a,b){
        return a-b;
    });
  $('#sorted').html(list.join(""));
})

See result below.

See Complete Code

Hope you find this post useful.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Credit : jQuery Recipes

How to check textbox is readonly using jQuery

2012-01-09T11:00:00.000+05:30

Previously I had posted about "How to make textbox readonly using jQuery". One of way is to make textbox readonly is to set "readonly" attribute to true. So use the same attribute "readonly" to find out whether textbox is readonly or not using jQuery.

$(document).ready(function(){
    $("#txtReadonly").attr('readonly', true);
    var isReadonly = $("#txtReadonly").attr('readonly');
    alert('txtReadonly is not readonly ' + isReadonly);
    var isNotReadonly = $("#txtNotReadonly").attr('readonly');
    alert('txtNotReadonly is not readonly ' + isNotReadonly);
});

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Why to use Google hosted jQuery CDN

2012-01-05T08:00:00.000+05:30

Google is sea of free services. Do you know that Google is also hosting jQuery libraries on its CDN(Content delivery network) and allows any website to use it for free. But why to use Google hosted jQuery CDN?

Advantage:

Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again.
Reduce Load: It reduces the load on your web server as it downloads from Google server's.
Serves fast : You will be also benefitted from speed point of view. As Google has dozen's of different servers around the web and it will download the jQuery from whichever server is closer to the user. Google's CDN has a very low latency, it can serve a resource faster than your webserver can.
Parellel Downloading: As the js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

How to use it?

There are 2 ways to load from Google CDN.

Method 1:

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

Method 2

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"><!--
google.load("jquery", "1.7.1");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
// -->
</script>

What if Google CDN is down?

It is a good idea to use CDN but what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.

Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.

Few quick tips

If you want jQuery 1.7.1 you can use a url like this:

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Suppose you want to use latest version of 1.7 release,

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

If you always want to refer the latest version of jQuery,

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery validation using class ".required" problem - Question from blog reader

2012-01-03T08:00:00.000+05:30

Read How to Validate email address using jQuery

Well, 5 days back I received an mail from one of my reader, in which he had written that "I need to validation html page using Jquery by looping through Class attributes ["Class=Required"] if the label attribute contain "required" class then i should validate the alert the user "Please Enter your value" and set back the focus to null control to enter the value. Please suggest how to do this in Jquery coding".

Note: I did not write the name of the blog reader because I am not sure if he wants his name here or not.

He has a single HTML form with inputs like Name, Company, Job Title, Phone and Email. And on click of Submit, he wanted to validate the inputs which has "class=required". So I have created a demo page for his problem and send him the solution.

Below is the jQuery code, which solves his problem. On click of Submit button, it iterates through all the input type which has ".required" class. And checks the value, if it is empty then display an alert and set focus to the textbox.

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        $("input.required").each(function(){
            if($(this).val().length == 0)
            {
               alert('Please Enter your value');
               $(this).focus(); 
               return false;
            }
        });
        //else submit your form.
    });
});

See live Demo and Code

Then very next day I received another email from him saying " I need to achieve through JQuery Validation, <Label> tag has the "class.required" attributes not the <Input> tag, those lable tag(s) has the "class.required" attributes only those needs to validates during use click the comman button and this JQuery script should be used globally across the website."

So his problem was the label tag is having the class "required", not the input tag. The solution which I have provided to him assuming that input tags has the required class as he has not mentioned that the label tag has the ".required" class in his first email. In his next email, he had also sent me the HTML code. First take a look at HTML code. (I have not put the whole code.)

<div class="formField">
   <label for="txtFullName" class="required">Name</label> 
   <input id="txtFullName"  type="text" name="Full_Name" />   
</div>

He was using class ".reuqired" with label along with HTML for attribute. The for attribute specifies which form element a label is bound to. So it put me in thoughts for 2 mins but I found a solution. This time, I was iterating through all the label which has ".required" class. And also getting the value of for attribute. As the for attribute value is same as the textbox id. So based on the for attribute value, I created object using jQuery selectors. And rest is equal to previous solution.

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        var bSubmit = true;
        $("label.required").each(function(){
            var txtAttrb = $(this).attr('for');
            if(txtAttrb.length > 0)
            {
                var txtVal = $("input[id=" + txtAttrb + "]");
                if(txtVal.val().length == 0)
                {
                   alert('Please Enter your value');
                   txtVal.focus(); 
                   bSubmit = false;
                   return false;
                }
            }
        });
        
        if(bSubmit == true)
        {
            //submit the form.
        }
    });
});

See live Demo and Code

Hope this helps you as well. If you are also stuck somewhere and need any help for jQuery, Please contact us.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Most Popular jQuery article in 2011

2011-12-30T19:34:00.000+05:30

With 2011 coming to an end and 2012 approaching fast, I have prepared a list of Most Popular jQuery articles on this blog for this year. This list have articles which were visited most throught out the world.

I would like to thank every one who has visited this blog, subscribed to our Feed, followed us on Twitter and Facebook and via putting your comments.

Here is the list of Most Popular jQuery articles which were visited most. Wish you a very happy and prosperous New Year 2012.

Again I wish you a very happy and prosperous New Year 2012. Keep visiting this blog as you motivate me to write more and more.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Instant documentation for jQuey, CSS, HTML and JavaScript

2011-12-24T23:29:00.000+05:30

It is always a good feeling to find everything what you need under a single roof. How about having instant documentation stuff.

Dochub is collection of instant documentation of CSS, HTML, JavaScript and jQuery. But this documentation is not written by someone. Instead it fetches the CSS, HTML and JavaScript collection based on the user request from Mozilla developer network and jQuery documentation from jQuery API website.

Go to Instant Documentation

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery is() method explained

2011-12-21T09:30:00.000+05:30

jQuery ".is()" is a filtering method which can be used to check the current element or set of element against a selector, elements, a jquery object or a function. It return true if there is at least one match from the given argument.

Let me put this in simple term with an example.

Suppose you have an unordered list with set of li elements. For example,

<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE</li>
<li>Safari</li>
</ul>

And you have assigned a different CSS based on the popularity of the browser. For example, the font size decreases as per the popularity of the browser. So the new HTML code looks like.

<ul>
<li class="Font22">Chrome<span></li>
<li class="Font18">Firefox</li>
<li class="Font14">IE</li>
<li class="Font10">Safari</li>
</ul>

And css classes are

.Font22{
    font-size:22pt;
}
.Font18{
    font-size:18pt;
}
.Font14{
    font-size:14pt;
}
.Font10{
    font-size:10pt;
}

Now what do you want to achieve is that when any of the li is clicked, you want to change the background color of the li and based on the clicked li, you want to display a message to the user.

Well, using the .is() method, we can easily check that which li is clicked. As I told earlier, .is() method can check the current element or set of element against a selector, elements, a jquery object or a function. So in below code, we are checking against the selector (css class).

$(function(){
    $("ul").click(function(event) {
     var $target = $(event.target);
     if ($target.is(".Font22")) {
         $target.css("background-color", "green");
         alert('Chrome is the most popular browser.');
     }
     if ($target.is(".Font18")) {
         $target.css("background-color", "orange");
         alert('Need to work harder to beat Chrome.');
     }
     if ($target.is(".Font14")) {
         $target.css("background-color", "Lightblue");
         alert('Microsoft is loosing the market in browser war.');
     }
     if ($target.is(".Font10")) {
         $target.css("background-color", "red");
         alert('Safari has great fetures but not used by many.');  
     }  
  });
});

See live Demo and Code

So, I think now you have got the idea about what .is() method does. But there is an issue with .is() method. If you have clearly read first para of this post which says "It return true if there is at least one match from the given argument." So what is does is, it return true if one of the element is matched out of set of elements. To make it clear let's understand with an example.

In this example, we use the last example's HTML only but we want to set the yellow color to li element which has ".Font22" css class. So below is the jQuery code which finds all the li's and assign yellow color to li with ".Font22" css class.

$(function(){
     var target = $( "li" );
     if (target.is(".Font22")) {
         target.css("background-color", "yellow");
     }   
});

So you are hoping that only Chrome li will have the green background but your output will be:

Shocked? Well, nothing to feel weird. That's a behavior of .is() method. It return true if there is at least one match from the given argument. As one li has ".Font22" css class, so it will return true for all the "li" element. If you are working with single node then that is not a problem but with collection of nodes, you could face this issue.

See live Demo and Code

The above problem can be easily solved by $("li.Font22") statement but my intention is to explain how .is() method works and not finding out what is the correct way.

You might be wondering why the first example was working. Well, the reason is the in first example the target was a single li element. The code line "var $target = $(event.target);", selects the clicked li element only.

Okay. So now the question is what are the uses of .is()?

I am going to tell you some of the basic, daily useful uses of .is() which I also use quite often.

You can use it for checking classes, tag types etc.
It can be also used with jQuery pseudo-selectors. For example, ".is(':hidden')" or ".is(':visible')".
It can be also used to find out at least one checkbox must be checked out of checkbox list collection.

var chkboxes = $('input[type="checkbox"]')
if(chkboxes.is(":checked")){
return true;
}
else {
return false;
}

As explained earlier about the pratical uses of .is() method, In my opionion, .is() a very handy method.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Validate Date using jQuery

2011-12-20T11:00:00.000+05:30

I have already posted about "Validate Date format using jQuery" in which explains how to validate the format of date only, not the actual date. I also received one comment from my reader that it is not sufficient to validate only format. So I thought why not writing a post which validates the date as well. So how do we validate the date using jQuery?

Well, I have created a function which takes date value as input and returns true/false based on date validation logic. Below is the jQuery function which validates the date. The function does following things. Please take a look at the function first.

Checks the value is empty or not.
It then validates the date against the regular expression defined in the function.
Then the input date is split into 3 different array for day, month and year.
Then the each array is checked against validation for example, month is not greater then 12.
Based on the validation, the function returns true or false.

function isDate(txtDate)
{
  var currVal = txtDate;
  if(currVal == '')
    return false;
  
  //Declare Regex  
  var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; 
  var dtArray = currVal.match(rxDatePattern); // is format OK?

  if (dtArray == null)
     return false;
 
  //Checks for mm/dd/yyyy format.
  dtMonth = dtArray[1];
  dtDay= dtArray[3];
  dtYear = dtArray[5];

  if (dtMonth < 1 || dtMonth > 12)
      return false;
  else if (dtDay < 1 || dtDay> 31)
      return false;
  else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31)
      return false;
  else if (dtMonth == 2)
  {
     var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
     if (dtDay> 29 || (dtDay ==29 && !isleap))
          return false;
  }
  return true;
}

Note: The above method checks for mm/dd/yyyy format. If you want to validate against the dd/mm/yyyy format then you make the slight change in this function. Change below code in function to,

//Checks for mm/dd/yyyy format.
    dtMonth = dtArray[1];
    dtDay= dtArray[3];
    dtYear = dtArray[5];

this code.

//Checks for dd/mm/yyyy format.
    dtDay = dtArray[1];
    dtMonth= dtArray[3];
    dtYear = dtArray[5];

Now, all you need to do is to call this function on button click to validate the date. Below jQuery code shows exactly the same thing.

$(function() {
    $('#btnSubmit').bind('click', function(){
        var txtVal =  $('#txtDate').val();
        if(isDate(txtVal))
            alert('Valid Date');
        else
            alert('Invalid Date');
    });
});

That's it....

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery Performance Tips Cheat Sheet PDF

2011-12-20T08:00:00.000+05:30

CREDIT : Dumitru Glavan

Download PDF

ORIGINAL article

Feel free to contact me for any help related to jQuery, I will gladly help you.

What is jQuery?

2011-12-19T12:00:00.000+05:30

Today I got a question from one of my colleague who is a fresher and doesn't know what is jQuery. So he came to me and asked me what is jQuery and why should we use jQuery? So I have explain it to him and thought of writing a post as well about what is jQuery and why one should use it?

What is jQuery?

jQuery is a library written on top of the JavaScript. So it is a JavaScript library. jQuery is amazing library for the JavaScript programmers, which makes web development a piece of cake. jQuery helps the programmers to keep code simple and concise. The biggest advantage of jQuery is that jQuery library is designed to keep the things very simple and reusable. Motto is jQuery library is "Writing Javascript code should be fun."

jQuery library simplifies the interaction process or access process of traversing in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Length JavaScript code can easily replaced by few lines of code in jQuery.

Why to use jQuery

A question came that when all the things can be achieved using JavaScript then why to go for jQuery? Well the answer is that The jQuery library is has many easy to use functions and methods to make rich applications. And believe me these functions are fairly easy to learn and even it is not difficult for designers or freshers to learn. Due to it's simplicity, jQuery is pretty easy to learn and easy to write. jQuery is a client side language so it can be easily used with ASP.NET,PHP,JSP and Servlets.

Features of jQuery

Allows to access elements in the document: If one need to access the DOM tree without any JavaScript libarary, one has to write many lines of code. jQuery provides a selector mechanism to access any part of DOM.
Easily apply CSS: As it’s known that CSS is the most powerful and mostly used for good appreance of any webpage. jQuery provides CSS Selectors which allows to change the CSS classes or individual style for any portion of the document. This can be done even after the page is rendered.
Make Animation: For better user experience, animation can do the job for you. jQuery provides many methods to perform animations like show,hide, fade, wipe, start, stop etc. Doing all this with jQuery is fun as No huge lines of code, no complex logic.
Ajax Interaction: In today’s world, Ajax is one of the most popular technology used in almost every website for better user experience. jQuery provides support for ajax also which allows to access server side event without refreshing the web page.
API to change document’s content: jQuery provides API (Application Program Interface) which allows to change the content of the document. Changing Text, inserting images, ordering of list can be done with few keystrokes with jQuery API. Entire structure of HTML can be rewritten or extended.
Event handling: Any technology is a failure if it cannot responsed to the user when any event takes place. Event handling is one the decent feature of jQuery. It quickly responsed to any event such as user clicking a button.

Where to download jQuery from

jQuery file can be downloaded from jQuery Official website http://www.jquery.com/

jQuery Versions

jQuery library comes in 2 forms:

The uncompressed .js file is easy to read and modify, but it's around 190kb in size (at the time of writing).
The minified .js file has all comments, whitespace, and other unnecessary characters removed from the file, squeezing the whole library into a mere 23kb. Although you can't easily read the code, this is the version you'll want to place on your site, as it's much quicker for visitors to download.

When this post is written, the latest version of jQuery is released is 1.7.1

So what are you waiting for..start learning jQuery and have fun... Some of my previous series of articles will help you to learn jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Top and Best jQuery tips and tricks

2011-12-19T08:00:00.000+05:30

jQuery has already become very popular and it is a must for every web developer. But with it's popularity, it is pretty important for any developer to use it efficiently and intelligently. It is important to know some tips and tricks as they save most important part of any software, that is human effort. In this post, I will be discussing some of the jQuery tips and tricks out of my own collection.

Following is my collection of jQuery tips and trick.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery Novice to Ninja ebook

2011-12-13T08:00:00.000+05:30

Book Description

jQuery: Novice to Ninja is a compilation of best-practice jQuery solutions to meet the most challenging JavaScript problems. In this question-and-answer book on jQuery, you’ll find a cookbook of ready-to-go solutions to help breathe life into your web page.

Topics covered include:

Scrolling, Resizing and Animating Webpage elements
Backgrounds, Slideshows, and Crossfaders
Menus, Tabs, and Panels
Buttons, Fields, and Controls
Lists, Trees, and Tables
Frames, Windows, and Dialogs
Adding interactivity with Ajax
Using the jQuery User Interface Themeroller
Writing your own jQuery plug-ins

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

Set Youtube video as background using jQuery

2011-12-12T10:30:00.000+05:30

The title sounds interesting? Isn't it? Have a Youtube video as your page background using jQuery? Well having a Youtube video as background may be disturbing as if speed is not good then the user experience will not be good. But let's not discuss the pros and cons of having Youtube video as background. That is left to you. You decide?

Okay. So now lets go to the point on how to set the Youtube video as background. Well, that is possible using a jQuery plugin called "jQuery tubular". jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.

Usage is pretty simple and easy. And requires JavaScript and the Flash player to be installed and functional on the client's browser. tubular is dependent on jQuery and swfobject. You will need to know the YouTube ID of the video you want to use as well as the container DIV of your web page.

Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Load the jQuery

<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Load the SWF object

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

Load the jQuery tubular plugin

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

Call tubular on your BODY tag with the YouTube ID and your content container DIV as parameters. This must be performed within your $(document).ready() function.

$().ready(function() {
  $('body').tubular('someYTVideoId','dvVideoID'); 
//someYTVideoId is the YouTube ID and dvVideoID is your containing DIV.
 });

That's it! tubular does the rest.

Please note that tubular will change the structure of your CSS. Your wrapper DIV will become position: relative and z-index: 99. The z-index value will be configurable in future versions. Two DIVS, yt-container and video-cover will be created at z-index: 1 and 2 respectively with position: fixed for the video and an empty DIV above it to prevent accidental clickthroughs to YouTube.

See Demo and Download Plugin

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery timepicker plugin demo

2011-12-12T08:00:00.000+05:30

I was thinking about creating a jQuery timepicker plugin but someone has already put lots of hard work to create a timepicker plugin. I suggest you to see the below demo for timepicker plugin.

Download
You can download this project in either zip or tar formats.
Get the source code on GitHub: jonthornton/jquery.timepicker

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery 1.7 Visual Cheat pdf

2011-12-07T10:42:00.001+05:30

Few days back jQuery 1.7 was released and ready for the consumption. Read my articles to find out, What's new in jQuery 1.7.

Also read how to use jQuery.isNumeric introduced with jQuery 1.7.

Here is a download link to download the cheat sheet for jQuery 1.7.

Download PDF

Credit
woorkup

Feel free to contact me for any help related to jQuery, I will gladly help you.

Auto save the form using jQuery and HTML 5

2011-12-07T08:00:00.000+05:30

Just imagine that you're filling a long form on any site And when you're almost done with that browser is crashed, or you closed browser accidently, or electricity is turned off, or something else break your efforts. How would you feel? Horrible? You would be getting angry as all your inputs are gone. You would be thinking if there was a way to recover your data which you just filled.

There is another scneario which I think you all have noticed if you are using gmail. When you typing your email, your email gets saved automatically in drafts folder without pressing any button. Well, having a system like Gmail will not be as easy but there is a way to recover your data which you have filled in the form.

The solution is Sisyphus.js

This small js file stores the data to the local storage of the browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form. It is using the HTML 5 features called localStorage.

What is localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache. Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Integrating sisyphus with your website is pretty simple.

If you want to protect specific form

$('#form1, #form2').sisyphus();

If you want to protect all the forms in your page

$('form').sisyphus();

Following options are available and also customizable.

{
  customKeyPrefix: '',
  timeout: 0,
  onSave: function() {},
  onRestore: function() {},
  onRelease: function() {},
  excludeFields: null
 }

customKeyPrefix is an addition to key in Local Storage to store form fields values

timeout is an interval in seconds to perform saving data. If 0 - save every time field is updated.

onSave is function fired each time data are saved to Local Storage

onRestore is function fired if form's data are restored from Local Storage. Unlike onSaveCallback it's common for whole form, not for each field

onRelease is function fired when Local Storage is freed of previously stored form data

excludeFields is selector to exclude specified fields from observing, ex: $( "textarea, :text" )

For example, following code will force Sisyphus to save each text field value every 5 seconds:

$('form').sisyphus({timeout: 5});

Requirements: Sisyphus.js requires jQuery version 1.2 or higher.

Browser support

Chrome 4+
Firefox 3.5+
Opera 10.5+
Safari 4+
IE 8+

Note: That it doesn't share the information across the browser as it stores in local storage of the particular browser. For example, you were visiting the site in Chrome and after filling some information the browser gets crashed. Now if you open the same site in chrome then you will find your data but if you open it in IE or mozilla then you will not find your data.

Demo and Download the plugin

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download Applied jQuery: Develop and Design ebook

2011-12-06T08:00:00.000+05:30

Book Description

Applied jQuery teaches readers how to quickly start writing application interfaces. The beautifully designed book offers practical techniques and provides lots of real-world advice and guidance. The Author, Jay Blanchard, has practical experience working in the field and wastes no time getting to the instruction, taking the reader from a beginner to a proficient interface programmer by the end of the book.

Today’s Web developers are are expected to be well versed in many different technologies. While it is good to have a shelf full of books that focus on single technologies, having a book that shows developers how to combine these technologies is key. This book takes the reader beyond the fundamental mechanics of individual technologies to illustrate the value and power of combining jQuery and PHP with templates and layouts handled by HTML and CSS. Beginning to intermediate web developers designing and developing web application interfaces and web sites will learn how to blend these ingredient technologies, as well as how to secure jQuery.

Table of Contents
Chapter 1. Introducing jQuery
Chapter 2. Working with Events
Chapter 3. Making Forms Pop
Chapter 4. Being Effective with AJAX
Chapter 5. Applying jQuery Widgets
Chapter 6. Creating Application Interfaces

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery plugin for Uppercase, lowercase, title case and pascal case

2011-12-05T08:00:00.000+05:30

In one of my post, I have explained how to convert text to UpperCase using jQuery. But today, I have created my first plugin called "Setcase". The beauty of this plugin is that this plugin can be used to convert text to uppercase, lowercase, title case and pascal case. It starts converting text to case as soon as user starts typing. This plugin is very simple plugin and it makes use of some of the jQuery/javascript methods to convert the text.

First check out the demo.

&lt;p&gt;&amp;lt;br /&amp;gt; &lt;/p&gt;

To use this plugin, first you need to reference jQuery.js file and also add reference of Setcase.js plugin.

<script type="text/javascript"
src="https://sites.google.com/site/jquerybyexample/SetCase.js">
</script>

This plugin can be used for textbox and you need to set the case which you want to implement on textbox. All you need to do is to set "caseValue" property value to one of the following value.

upper
lower
title
pascal

Note: All the values are in lower case.

Upper case:

$(function() {
    $("#txtUpper").Setcase({caseValue : 'upper'});
});

Lower case:

$(function() {
    $("#txtLower").Setcase({caseValue : 'lower'});
});

Title case: First letter of entered text is capital and rest are in lower case.

$(function() {
    $("#txtTitle").Setcase({caseValue : 'title'});
});

Pascal case: Every first letter of the word is set to capital.

$(function() {
    $("#txtPascal").Setcase({caseValue : 'pascal'});
});

Below is the code for plugin. This plugin takes advantage of keypress and blur method on the textbox.

(function($) {
  //Create plugin named Setcase
 $.fn.Setcase = function(settings) {
        // Defaults
  var config = {
   caseValue: 'Upper'
  };
  
  //Merge settings
  if(settings) $.extend(config, settings);
  
 this.each(function() {
        //keypress event
     $(this).keypress(function(){
      if(config.caseValue == "upper")
   {
    var currVal = $(this).val();
    $(this).val(currVal.toUpperCase());
   }
   else if(config.caseValue == "lower")
   {
    var currVal = $(this).val();
    $(this).val(currVal.toLowerCase());
   }
   else if(config.caseValue == "title")
   {
       var currVal = $(this).val();
    $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());
   }
   else if(config.caseValue == "pascal")
   {
       var currVal = $(this).val();
    currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
     return txtVal.toUpperCase();
    });
    $(this).val(currVal);
   }
        });
        //blur event  
     $(this).blur(function(){
       if(config.caseValue == "upper")
   {
    var currVal = $(this).val();
    $(this).val(currVal.toUpperCase());
   }
   else if(config.caseValue == "lower")
   {
    var currVal = $(this).val();
    $(this).val(currVal.toLowerCase());
   }
   else if(config.caseValue == "title")
   {
       var currVal = $(this).val();
    $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());
   }
   else if(config.caseValue == "pascal")
   {
       var currVal = $(this).val();
    currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
     return txtVal.toUpperCase();
    });
    $(this).val(currVal);
   }
     });
 });
 };
})(jQuery);

See live Demo and Code.

You can also download the plugin from below link.

Download Plugin

This is the first plugin which I have created. I hope you liked it and find it pretty useful.

Feel free to contact me for any help related to jQuery, I will gladly help you.

A Quick Guide to jQuery

2011-12-02T10:30:00.000+05:30

I was thinking to write a quick guide for jQuery for all my readers and I have also started working on that. But today while googling I came accross a link which already have this jQuery quick guide. And I must admit he has done a great job while preparing this neat and easy guide. All the things which are required for quick guide is placed at one location. Like,

jQuery selectors
jQuery - DOM Attributes
jQuery - DOM Traversing
jQuery - CSS Methods
jQuery - DOM Manipulation Methods
jQuery - Events Handling
jQuery - AJAX
jQuery - Effects
UI Library Based Effects

Click here to visit this fabulous jQuery quick guide.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download Learning jQuery 3rd edition ebook pdf

2011-12-02T07:47:00.000+05:30

Book Description
To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library’s design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency.

Learning jQuery Third Edition is revised and updated for version 1.6 of jQuery. You will learn the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.

Starting with an introduction to jQuery, you will first be shown how to write a functioning jQuery program in just three lines of code. Learn how to add impact to your actions through a set of simple visual effects and to create, copy, reassemble, and embellish content using jQuery’s DOM modification methods. The book will step you through many detailed, real-world examples, and even equip you to extend the jQuery library itself with your own plug-ins.

What you will learn from this book :

Create interactive elements for your web designs
Learn how to create the best user interface for your web applications
Use selectors in a variety of ways to get anything you want from a page
Make things happen on your webpages with events
Add flair to your actions with a variety of animation effects
Discover the new features available in jQuery 1.6 in this third update of this popular jQuery book

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Mobile Cheat Sheet

2011-12-01T12:00:00.000+05:30

I found a link for jQuery mobile cheat sheet but unfortunately available cheat sheet available for jQuery mobile is not downloadable. As there is no pdf version available for the same. But however you can the website to go through this nice and cool jQuery mobile cheat sheet.

Source : brooky's blog

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery Pocket Reference ebook pdf

2011-12-01T09:00:00.000+05:30

Book Description

“As someone who uses jQuery on a regular basis, it was surprising to discover how much of the library I’m not using. This book is indispensable for anyone who is serious about using jQuery for non-trivial applications.” — Raffaele Cecco, longtime developer of video games, including Cybernoid, Exolon, and Stormlord

jQuery is the “write less, do more” JavaScript library. Its powerful features and ease of use have made it the most popular client-side JavaScript framework for the Web. This book is jQuery’s trusty companion: the definitive “read less, learn more” guide to the library.

jQuery Pocket Reference explains everything you need to know about jQuery, completely and comprehensively. You’ll learn how to:

Select and manipulate document elements
Alter document structure
Handle and trigger events
Create visual effects and animations
Script HTTP with Ajax utilities
Use jQuery’s selectors and selection methods, utilities, plugins and more

The 25-page quick reference summarizes the library, listing all jQuery methods and functions, with signatures and descriptions.

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery mobile ebook pdf

2011-11-30T10:00:00.000+05:30

Book Description

Native apps have distinct advantages, but the future belongs to mobile web apps that function on a broad range of smartphones and tablets. Get started with jQuery Mobile, the touch-optimized framework for creating apps that look and behave consistently across many devices. This concise book provides HTML5, CSS3, and JavaScript code examples, screen shots, and step-by-step guidance to help you build a complete working app with jQuery Mobile.

If you’re already familiar with the jQuery JavaScript library, you can use your existing skills to build cross-platform mobile web apps right now. This book shows you how.

Get a high-level overview of jQuery Mobile: how it works and how to use it
Learn about paging and navigation, including dialogs, Ajax content, and history
Employ jQuery Mobile’s extensive event system to create rich interactions
Work with toolbars, buttons, lists, forms, and other UI elements
Create a variety of visual designs with jQuery Mobile’s sophisticated theming system
Use the jQuery Mobile API for finer control over elements and interactions
Put everything together and build a mobile app from start to finish

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

Avoid jQuery.Post(), use jQuery.ajax()

2011-11-30T09:30:00.001+05:30

Well, as you are aware that there are many ways to make an ajax call. If you don't know then do read "How to Make jQuery AJAX calls". Okay, hope you have gone through the article. So 2 very common ways are jQuery.Post() and jQuery.get().jQuery post() is for to make a post request and jQuery get() is to make a get request. That's the only difference between jQuery Post() and jQuery get().

These methods are very popular for ajax call because they are simple to write and easy to remember the syntax as well. But you are making a mistake over here. By using jQuery post()/ jQuery get(), you always trust the response from the server and you believe it is going to be successful all the time. Well, it is certainly not a good idea to trust the response. As there can be n number of reason which may lead to failure of response. Okay, why do I say this? Let's take a look at the signature of jQuery post().

$.post({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

The parameters are,
url (String): The URL of the page to load.
data (Map): Key/value pairs that will be sent to the server.
success (Function): A callback function that is executed if the request succeeds.
dataType: The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

Looking at above parameters, there only a single callback function that will be executed when the request is complete (and only if the response has a successful response code). What if your request fails? There is no error handling. oh... So what should be done?

Well, jQuery provides another method to perform an ajax call which is jQuery.ajax(). This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).

jQuery.ajax(url [, settings] )

There are various settings options available for this method. For complete list visit http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

This method provides callback for success, error and complete. So which means that we can handle error, success and also perform any operation when the ajax request is complete.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  error : error,
  complete : complete,
  dataType: dataType
});

I strongly recommned that it is always better to use jQuery.ajax() over $.post() and $.get(). Having said that, does not mean that $.post() and $.get() are outdatted. If you are using jQuery 1.5 or above, you can still handle the error with $.post() and $.get().

From jQuery official documentation

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.post(), to chain multiple .success(), .complete(), and .error() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

// Assign handlers immediately after making the request,
    // and remember the jqxhr object for this request
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

    // perform other work here ...

    // Set another completion function for the request above
    jqxhr.complete(function(){ alert("second complete"); });

So that means that we can still handle the errors using $.post() as well.

But I still recommened $.ajax() method as it gives these options straight away where on the other side, using $.post() one is handling using deferred object.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery UI 1.8 ebook pdf

2011-11-29T12:30:00.000+05:30

Book Description

jQuery UI, the official suite of plugins for the jQuery JavaScript library, gives you a solid platform on which to build rich and engaging interfaces with maximum compatibility, stability, and a minimum of time and effort.
jQuery UI has a series of ready-made user interface widgets and a comprehensive set of core interaction helpers to reduce the amount of code that you need to write to take a project from conception to completion.

jQuery UI 1.8: The User Interface Library for jQuery has been specially revised for version 1.8 of jQuery UI. It is written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps.

Throughout the book, you’ll learn how each component can be initialized in a basic default implementation and then customize and configure each component to tailor it to your application. You’ll look at the configuration options and the methods exposed by each component’s API to see how these can be used to bring out the best of the library. Each chapter will also show you the custom events fired by the component covered and how these events can be intercepted and acted upon.

Get a high-level overview of jQuery Mobile: how it works and how to use it
Learn about paging and navigation, including dialogs, Ajax content, and history
Employ jQuery Mobile’s extensive event system to create rich interactions
Work with toolbars, buttons, lists, forms, and other UI elements
Create a variety of visual designs with jQuery Mobile’s sophisticated theming system
Use the jQuery Mobile API for finer control over elements and interactions
Put everything together and build a mobile app from start to finish

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

List of Supported date format by jQuery UI Datepicker

2011-11-29T09:30:00.000+05:30

In this post, we will see the supported date format by jQuery UI datepicker. I have already posted many articles on jQuery UI datepicker implementation and some other cool features which you can achieve using jQuery UI datepicker.

Read my series of articles about jQuery UI datepicker here.

Below is the list of jQuery UI datepicker format.

Option value	Date format
$.datepicker.ATOM	"yy-mm-dd"
$.datepicker.COOKIE	"D, dd M y"
$.datepicker.ISO_8601	"yy-mm-dd"
$.datepicker.RFC_822	"D, d M y"
$.datepicker.RFC_850	"DD, dd-M-y"
$.datepicker.RFC_1036	"D, d M y"
$.datepicker.RFC_1123	"D, d M yy"
$.datepicker.RFC_2822	"D, d M yy"
$.datepicker.RSS	"D, d M y"
$.datepicker.TIMESTAMP	@ (UNIX timestamp)
$.datepicker.W3C	"yy-mm-dd"

Below is the jQuery code to change the date format.

$(document).ready(function(){
var pickerOpts = {dateFormat: $.datepicker.ATOM};
  $("#txtDate").datepicker(
  { 
    $("#txtDate").datepicker(pickerOpts);
  });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download Head First jQuery ebook pdf

2011-11-28T11:00:00.000+05:30

Book Description

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code. With Head First jQuery, you’ll quickly get up to speed on this amazing JavaScript library by learning how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you’ve completed the book, you’ll be incorporating Ajax apps, working seamlessly with HTML and CSS, and handling data with PHP, MySQL and JSON.

If you want to learn—and understand—how to create interactive web pages, unobtrusive script, and cool animations that don’t kill your browser, this book is for you.

Use jQuery with DOM to overcome the limitations of HTML and CSS
Learn how jQuery selectors and actions work together
Write functions and wire them to interface elements
Use jQuery effects to create actions on the page
Make your pages come alive with animation
Build interactive web pages with jQuery and Ajax
Build forms in web applications

Click here to download the book

Credit : Wow!ebook.com

Feel free to contact me for any help related to jQuery, I will gladly help you.

Tips to use jQuery selectors effieciently

2011-11-28T10:00:00.000+05:30

It is pretty important to understand how to write efficient element selection statement. One has to be very careful while jquery selector statement. Below are some tips on how to use your jQuery selectors efficiently.

1. Always try to use ID as selector

You can use ID as selector in jQuery. See below jQuery code.

$("#elmID");

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element.

When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

2. Use class selector with tags

You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.

$(".myCSSClass");

As said earlier, when classes are used DOM traversal happens. But there could be a situation where you need to use classes as selector. For better performance, you can use tag name with the class name. See below

$("div.myCSSClass");

Above jQuery code, restricts the search element specific to DIV elements only.

3. Keep your selector simple, don't make it complex

Avoid complex selectors. You should use make your selectors simple, unless required.

$("body .main p#myID em");

Instead of using such a complex selector, we can simplify it. See below.

$("p#myID em");

4. Don't use your selector repeatedly.

See below jQuery code. The selectors are used thrice for 3 different operation.

$("#myID").css("color", "red");
$("#myID").css("font", "Arial");
$("#myID").text("Error occurred!");

The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.

$("p").css({ "color": "red", "font": "Arial"}).text("Error occurred!");

5. Know how your selectors are executed

Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

$("p#elmID .myCssClass");

Feel free to contact me for any help related to jQuery, I will gladly help you.

Now it is easy to contact us

2011-11-23T21:43:00.001+05:30

Well, now it's pretty easy to stay connected with us. You can write your queries, suggestions and ideas to us so that we can improve this blog and make it more useful for all my readers. You can also contact us, if you want to promote your jQuery plugins or websites. We can provide space on our blog to promote your site.

Click here to go to Contact us page. This link is also available on right side of our blog.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Disable "Enter" key on page using jQuery

2011-11-23T20:30:00.001+05:30

Today, I got a strange requirement from my client that whenever the "Enter" key is pressed on the page, the page should not be submitted. It should only be submitted when user clicks the submit button using mouse. Well, this was pretty simple and easy with jQuery. I have implemented it in 2 mins and thought of sharing with all my readers. See below jQuery code.

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Mobile 1.0 released...

2011-11-20T20:13:00.001+05:30

After so many minor releases and Beta release, after one year or so jQuery team has finally released a stable 1.0 release for jQuery mobile. According to jQuery team it is rock solid release for jQuery mobile. jQuery Mobile 1.0 Final Requires jQuery core 1.6.4.

Below are some useful link for your reference.

Demos & Documentation
Quick Start Guide
Download 1.0 Zip

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0.min.js (24KB, ready to deploy)

CDN-Hosted CSS:
Uncompressed with Default theme: jquery.mobile-1.0.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile.structure-1.0.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile.structure-1.0.min.css (6KB, ready to deploy)

Also read my articles

How to start with jQuery mobile

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Microsoft CDN hosted jQuery Mobile files:

http://www.asp.net/ajaxLibrary/CDNjQueryMobile10.ashx

Download jQuery mobile get started pdf

Feel free to contact me for any help related to jQuery, I will gladly help you.

Zoom an image on hover using Zoom jQuery plugin

2011-11-16T20:17:00.001+05:30

Well one of the popular post of my blog is "How to Zoom image on mouseover using jQuery", which shows how to zoom an image using jQuery. But today, I found a image zoom jQuery plugin which does the same thing but in a different way. You can download this plugin from here.

Things to note here is that this the plugin "Zoom" appends html inside the element it is assigned to, so that element has to be able to accept html like a, span, li, div, etc. That means your image tag must be placed inside any of these tags like a, span, li, div to make this plugin work. After that is done, just call the zoom() function on the parent element, not on the image element. For example, I have placed the image tag inside the span tag.

<span class='zoom' id='ex'>
<img src='flowers.jpg' width='500' height='300' />
</span>

Now, the zoom() function should be associated with span element, not with image. See below.

$(document).ready(function(){
   $('#ex').zoom();
});

See live Demo and Code.

This plugin by default supports the zoom on mouse over but there is another option available with this plugin. You can also zoom the image by pressing the mouse and holding it. This option is called "Grab" in this plugin. See below code.

$(document).ready(function(){
  $('#ex2').zoom({ grab: true });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

This plugin is developed by "Jack Moore". You can visit his website here. Visit official website for this plugin.

jQuery addressPicker Plugin explained

2011-11-12T11:05:00.001+05:30

Today, I am going to explain you a jQuery plugin called "addressPicker". The beauty of this plugin is that it has auto-complete feature which comes from google map geocoder suggestion. It is like you are searching something on Google map and the desired address comes in the auto-complete. See below Image.

Exciting..Isn't it? So how do we do this? Well, first of all, you need to reference 2 js libraries in your code.

http://maps.google.com/maps/api/js?sensor=false
http://xilinus.com/jquery-addresspicker/src/jquery.ui.addresspicker.js

The first one supports the Google Map geocoder integration and second one is for addressPicker plugin. Or you can also download these from this URL.

All you need to do is to place a textbox on your page and use below jQuery to have address picker on your page.

$("#addresspicker").addresspicker();

Cool and Simple!!But wait, that is not enough.. This plugin also provides you to facility to show the selected address on Google map, display the country, locality, latitude and longitude. See below image.

To achieve this, just declare 4 text box for country, locality, latitude and longitude. And we also need a div element to show the map. And use below jQuery code to achieve the same.

var addresspickerMap = $("#addresspicker_map" ).addresspicker({
 elements: {
    map:      "#map",
    lat:      "#lat",
    lng:      "#lng",
    locality: '#locality',
    country:  '#country'
 }
});
var gmarker = addresspickerMap.addresspicker( "marker");
gmarker.setVisible(true);
addresspickerMap.addresspicker( "updatePosition");

The last 3 lines of above jQuery code, set the marker on Google Map.

Don't forget to add this css class to div map element.

#map {
  border: 1px solid #DDD; 
  width:300px;
  height: 300px;
  float:left;  
  margin: 0px 0 0 10px;
  -webkit-box-shadow: #AAA 0px 0px 15px;
}

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Click here to go to original Website and plugin developer.

Animate image on mouseover using jQuery

2011-11-10T19:12:00.001+05:30

You have seen on many blogs for social media sharing icon where you take mouse over on the icon, the icon jumps up. See below picture for more details.

In this post, I will show you how you can achieve the same thing using jQuery. For the demo, I have placed all the social media icon within a div and I have also set the opacity of the image to 0.5 on document.ready. What we need to do is that on mouseover, adjust the top position of the image and on mouseout reset the top position.

$(document).ready(function(){
    $("#divSocial a img").css({ opacity: 0.5 });
     $("#divSocial a img").hover(
       function () {
            $(this).animate({ top: "-15" });
            $(this).css({ opacity: 1 });
       }, 
       function () {
            $(this).animate({ top: "0" });
            $(this).css({ opacity: 0.5 });
       }
   );
});

Don't forget to set the relative position of the div, otherwise changing the top attribute value will not work.

#divSocial a img
{
    position: relative;
}

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery.isNumeric in jQuery 1.7

2011-11-07T09:33:00.001+05:30

As mentioned in my previous post that jQuery 1.7 is released and ready to use. With jQuery 1.7, a new function is introduced which is called "isNumeric()". This is a very handy and small utility introduced in 1.7.As the name of the function clearly suggest that it checks whether the passed value is numeric or not. If it is numeric then it returns true, otherwise false.

This function is really useful as it also returns true for negative numbers, decimal numbers, octal integer, Hex numbers and exponential strings. It saves lots of line of your codes and you don't have to worry about the regular expression as well to validate the number.

$.isNumeric("-10");  // true

$.isNumeric(16);     // true

$.isNumeric(0xFF);   // true

$.isNumeric("0xFF"); // true

$.isNumeric("8e5");  // true (exponential notation string)

$.isNumeric(3.1415); // true

$.isNumeric(+10);    // true

$.isNumeric(0144);   // true (octal integer literal)

$.isNumeric("");     // false

$.isNumeric({});     // false (empty object)

$.isNumeric(NaN);    // false

$.isNumeric(null);   // false

$.isNumeric(true);   // false

$.isNumeric(undefined); // false

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

WHAT’S NEW IN JQUERY 1.7

2011-11-07T09:13:00.000+05:30

jQuery 1.7 is ready for download! You can get the code from the jQuery CDN:

http://code.jquery.com/jquery-1.7.js
http://code.jquery.com/jquery-1.7.min.js

This new release should also be available on the Google and Microsoft CDNs within a day or two.

WHAT’S NEW IN JQUERY 1.7

The Version 1.7 tag at the API site is a great way to get up to speed with the new things in this release. Here’s a rundown of the big items in 1.7 and some things not yet mentioned in the API docs.

New Event APIs: .on() and .off()
Improved Performance on Delegated Events
Better Support for HTML5 in IE6/7/8
jQuery.isNumeric()
jQuery.Deferred

Removed Features

jQuery.isNaN()
jQuery.event.proxy()

Feel free to contact me for any help related to jQuery, I will gladly help you.

Validate Date format using jQuery

2011-10-24T16:07:00.000+05:30

In this post, we will see how can you validate the user's entered input date's format using jQuery. For demo, I have used "mm/dd/yyyy" or "mm-dd-yyyy" format to be considered as valid format. The date format checking is done using regular expression. So first, let's create a function which validate any input value against the regular expression.

function ValidateDate(dtValue)
{
var dtRegex = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return dtRegex.test(dtValue);
}

Below is the HTML code. There is a span tag next to the textbox with cssclass="error" which is displayed if the entered date is not valid. By default, it will be hidden.

<span>Enter Date: </span><input type="text" id="txtDate" />
<span class="error"> Invalid Date.(mm/dd/yyyy or mm-dd-yyyy)
</span>
<input id="btnSubmit" type="submit" value="Submit">

CSS class for error message

.error
{
    color: red;
    font-family : Verdana;
    font-size : 8pt;
}

Above ValidateDate() function will check the argument value against this regular expression. If the entered value is in mm/dd/yyyy or mm-dd-yyyy format then this function will return true, otherwise false.

Also read, Validate Date using jQuery

Below jQuery code gets called on click of submit button, which reads the value from the text box and calls the ValidateDate() function. If it is true, then form is submitted and error message is not displayed to the user. Otherwise, error message will appear next to the textbox and user has to correct the value before submitting the form again.

$(document).ready(function() {
$('.error').hide();
$('#btnSubmit').click(function(event){
   var dtVal=$('#txtDate').val();
   if(ValidateDate(dtVal))
   {
      $('.error').hide();
   }
   else
   {
     $('.error').show();
     event.preventDefault();
   }
   });
});

See live Demo and Code.

Also read, Validate Date using jQuery

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to add trailing image to mouse cursor using jQuery

2011-10-18T22:18:00.000+05:30

You must have seen on many sites when an image moves near the mouse as per the mouse movement. I was wondering how to implement this so I went ahead and find the solution using jQuery. In this post, I will show you how you can add trailing image to mouse cursor movement using jQuery on your site as well. Let me give brief idea about the solution.

First place an image anywhere in your page.

<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"
width="75px" height="75px" id="imgFollow"/>

Fetch the current position (X and Y) of mouse. Read my other post "How to get mouse cursor position"
Set the top and left position of the image according to the mouse cursor X and Y value. To set the position of the image, use offset() method of jQuery. The offset() method set or returns the offset (position) for the selected elements, relative to the document.

Remember to put jQuery code into mousemove event of the document so that on every mouse move, the image also move accordingly.

That's it. See below jQuery code. I have set top value 20 pixel more in this code intentionally so that image doesn't overlap the mouse cursor.

$(document).ready(function(){
  $(document).mousemove(function(e){
      $('#imgFollow').offset({left:e.pageX,top:e.pageY+20});    
  });
});

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Don't forget to read:

Mostly used and essential jQuery code snippets.
Mostly asked jQuery interview questions list.

How to create your portfolio using jQuery

2011-10-15T17:14:00.000+05:30

Well, in this post I am not going to show you how to create portfolio using jQuery rather I will share something good and amazing with you which I came across today. Which is how to create sliding portfolio using jQuery with ease and great speed. First take a look at below picture.

This is a single page portfolio created using jQuery with 9 tabs. And on tab transition, very light weight and cool animation is provided. You must see the demo first. Take a look at demo on below link.

See Demo

I must say this is absolutely fantastic and brilliant. It is so light weight and have good animation which makes it more attractive. So what are you waiting for? Take a look at the code and create your own portfolio.

See Code

Reference: speckyboy

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to call jQuery code only before the ASP.NET postback

2011-10-07T00:00:00.000+05:30

My colleague has got into a tricky situation where the requirement was to call the specific lines of jQuery code only before the postback. "PostBack is the name given to the process of submitting an ASP.NET page to the server for processing .". Once there is a postback (on click of button) that particular code should never ever get called again. Well, the situation is tricky but no so difficult. All he needs to do is to find out the postback occurrence using jQuery.

So the solution is that using isPostBack on the server side, register a hidden field in the page. And in the jQuery code, create object of the hidden field and check whether it is null or not. It will be null initially because it is not created yet. After the postback happens the hidden field gets created so next time the object will not be null. To register hidden field from ASP.NET code behind, you can use ClientScript.RegisterHiddenField.This method registers a hidden field in the page.

protected void Page_Load(object sender, EventArgs e)
{
   if (IsPostBack)
   {
        ClientScript.RegisterHiddenField("hdnPostBack", "1");
   }
 }

Below jQuery code, first creates a object named "isPostBackOccured" of "hdnPostBack" hidden field. So when the page is running for the first time, it doesn't find the hidden field as it is not registered yet. So it will be null and you will see alert ("Page is called first Time"). But when the postback happens (using button click, or drop down change), the above asp.net code registers hidden field. So after the postback, the "isPostBackOccured" object will no longer be null and you will see an alert box with the message "Page is called after Postback".

$(document).ready(function () {
    var isPostBackOccured = document.getElementById('hdnPostBack');
    if (isPostBackOccured== null) alert('Page is called first Time');
    else alert('Page is called after Postback');
});

Note: Just for the demo, I have kept these alerts but you should put your actual jQuery code.

Sweet and Simple.....

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Performance tips & tricks from jQuery By Example

2011-10-06T11:30:00.000+05:30

Always use the latest version of jQuery as your website will be benefited from performance improvement done by the jQuery team in latest release. Learn "How to always reference latest version of jQuery"
Be smart while using selectors. As there are many ways to select element using selectors but that doesn't mean that all are equal. Always try to use ID and Element as selector as they are very fast. Even the class selectors are slower than ID selector. Read more about jQuery selector.
Use IDs instead of Classes as selector. Read here why?
Always Minimize or Minify your JavaScript Code
Always use the compressed version of jQuery. Read "Why to use compressed version of jQuery".
Use CACHING to store selection so that it can be used later on. This will improve the performance.
Just for the sake of completing the task, don't repeat your code as it increases the lines of code and reduces performance.
Don't use jQuery unless it is not necessary.

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to handle broken image using jQuery

2011-10-05T20:20:00.000+05:30

It is quite possible that sometimes the images on web page don't load properly. There can be many reasons for this problem like path of the image is changed or it is removed or renamed. So in such situation, the browser will display broken image sign. (Vary from browser to browser). To overcome this problem, we can use jQuery to handle such images. When the image is not loaded properly, one can use error method on images to handle such images. There are 3 possible solutions for this problem.

1. Hide the broken image.

$('img').error(function() {
  $(this).hide();
});

2. Remove the broken image

$('img').error(function() {
  $(this).remove();
});

3. Replace it with other image.

$('img').error(function() {
  $(this).src = "/images/noimage.gif";
  $(this).onerror = "";
}

Feel free to contact me for any help related to jQuery, I will gladly help you.

Run JavaScript only after page is completely loaded

2011-09-26T17:48:00.000+05:30

Before we got into the actual problem it is important to know and understand the fundamental difference between DOM loading and Page Loading. When we say DOM loading that means all the DOM elements are completely loaded but it is quite possible that some of the elements like images are not loaded completely. When we say "Page loading" which means that along with all the DOM elements, other elements like images are also loaded completely.

jQuery document.ready() gets called immediately after DOM elements are loaded but window.onload() which is Javascript event gets called when page is completely loaded. Read "Is window.onload is different from document.ready()"

So sometimes you may encounter a situation where you need to run the Javascript code once your page is loaded completely. So how do you achieve that? Well, the solutions is combination of jQuery and JavaScript. The solution is to bind the window.onload event in document.ready().

$(window).bind("load", function() {
   // code here
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

Change cursor to hand on mouseover in GridView using jQuery

2011-09-13T14:48:00.000+05:30

With continuation with my Grid View series posts,

Formatting ASP.NET GridView using jQuery
Highlight row on mouseover in GridView using jQuery
How to remove rows from GridView using jQuery

In this post, I will show you how to change the cursor to Hand style cursor when user takes mouse on the rows of GridView. It is fairly simple. See below jQuery code.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%>  tr:has(td)").hover(function() {
    $(this).css("cursor", "hand");
  });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to remove rows from GridView using jQuery

2011-09-12T09:38:00.000+05:30

With continuation with my Grid View series posts,

Formatting ASP.NET GridView using jQuery
Highlight row on mouseover in GridView using jQuery

In this post, I will show you how to remove any row in grid view using jQuery. The task is pretty simple. One need to bind the click event with every tr which has only td not th and on click of event remove the clicked row. See below jQuery code.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%> tr:has(td)").click(function() {
     $(this).remove();
  });
});

Aha..How simple it is..Isn't it? But it would be nice if we show the remove row effect using some animation for better user experience. Well, not to worry when there is jQuery. See below jQuery code.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%> tr:has(td)").click(function() {
     $(this).fadeOut(1000, function() {
        $(this).remove();
     });
  });
});

[Note: This jQuery code handles only Client Side Updates, not server side. You still need to server side code to delete the row permanently.]

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Performance Tips And Tricks

2011-09-02T18:36:00.000+05:30

Well, performance is the key element for any web application and understanding the factor which can impact performance of your web application, is another pretty important thing. As we are using jQuery in our web application so it is very important to know jQuery performance tips and tricks which we can make a practice.

I found a great presentation which is must for every jQuery developer to read. Not only read, but make it a practice to use in your day to day code. Special thanks to "Addy Osmani" for making this presentation and putting it in a manner, which is quite easy to understand. This presentation discusses about 10 jQuery tips and tricks that can definitely help to write better jQuery code

Go to Presentation

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery How to Select element cheat sheet

2011-08-31T09:34:00.000+05:30

I found another cheat sheet which have all the syntax that tells how can you select elements in jQuery. You can download the cheat sheet from below link.

Download PDF

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery CSS Cheat Sheet

2011-08-30T16:02:00.000+05:30

Today while searching, I found a jQuery CSS cheat sheet and it's worth. I have downloaded my copy. Download your copy as well.

Download PDF

Feel free to contact me for any help related to jQuery, I will gladly help you.

Different ways to refresh or reload page using jQuery

2011-08-30T10:55:00.000+05:30

In this post, I will show you the different ways using which you can reload or refresh the webpage using jQuery. The first method is nothing to do with jQuery. It is a HTML tag which you need to put in the head section of your page and your page will get refreshed automatically after specified interval.

<meta http-equiv="refresh" content="10">

The meta tag with "http-equiv" is used to refresh the page. This attribute tells the browser that this meta tag is sending an HTTP command rather than a standard meta tag. Refresh is an actual HTTP header used by the web server.The content attribute in the tag is having value in seconds. As per the above code, it is set to 10, which means after 10 seconds your page will get refreshed or reloaded.

You can also use jQuery to refresh/reload the page automatically. See below jQuery code.

function ReloadPage() { 
   location.reload();
};

$(document).ready(function() {
  setTimeout("ReloadPage()", 10000); .
});

location.reload() will reload the page again. The advantage of location.reload() is that it works with all the major browsers.

If you want to reload the page on click of button, then you can call location.reload() on button click event. See below jQuery code.

$(document).ready(function() {
     $('#btnReload').click(function() {
             location.reload();
       });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

addClass, removeClass, hasClass and toggleClass in jQuery

2011-08-26T12:22:00.000+05:30

In this post, I will explain about some of the basic but useful jQuery css selectors. These CSS selectors are used to add or remove CSS class, to check whether element has specific css class associated with it or not. Believe me these are basic, but pretty useful.

Add cssClass to specific element

$('#element').addClass('myclass');

Remove cssClass from specific element

$('#element').removeClass('myclass');

Check whether element has the cssClass associated with it

$('#element').hasClass('myclass');

Add or remove cssClass using single css Selector

$('#element').toggleClass('myclass');

.toggleClass() is combination of .addClass() and .removeClass(). It first checks, whether specified cssClass is associated with element or not. if not then it adds it, otherwise it removes it. This is very useful when on button click you want to add and remove css class for any element.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Mostly used and essential jQuery code examples

2011-08-23T10:23:00.002+05:30

The advantage of having ready made code examples is that they will save your valuable time.I have prepared a list of common and mostly used jQuery code snippets/example which can be used in any project. These examples are small but yet powerful and essential. I suggest you to bookmark this page and support us by clicking the Google +1 button (Just below the article title).

Don't forget to read Mostly asked jQuery interview questions list.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Mostly asked jQuery interview questions list

2011-08-02T12:56:00.001+05:30

jQuery is rocking and it has become so popular that it is used almost by every developer. As it has already become more popular, interviewers tend to ask jQuery questions in interview. Below is the list of questions which are asked in almost every jQuery interview. Before you go further, please read my previous article published already about jQuery interview question.

jQuery Interview Question

Okay, so I assume that you have read the above article. Let's see some more jQuery interview questions.

Is jQuery a library for client scripting or server scripting?
Ans: Client scripting
Is jQuery a W3C standard?
Ans: No
What are jQuery Selectors?
Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.
Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.
What does $("div") will select?
Ans: It will select all the div element in the page.
What does $("div.parent") will select?
Ans: All the div element with parent class.
What is the name of jQuery method used for an asynchronous HTTP request?
Ans: jQuery.ajax()
What is CDN and what are the advantage of loading jQuery framework from CDN?
How to load jQuery locally when CDN fails?
What is jQuery.noConflict()
Difference between $(this) and 'this' in jQuery
jQuery empty() vs remove()
Is window.onload is different from document.ready()
How to check if element is empty
width() vs css('width') and height() vs css('height')
How to Check element exists or not in jQuery
Difference between bind() vs live() vs delegate() function
How to use jQuery Selectors with Examples
How to Disable-Enable all controls of page using jQuery
What are the possible problems can occur when jQuery and Ajax used in ASP.NET?
Why to use Google hosted jQuery CDN?

Don't forget to read Mostly used and essential jQuery code snippets.

Feel free to contact me for any help related to jQuery, I will gladly help you.

An Intensive Exploration Of jQuery

2011-07-21T16:02:00.000+05:30

Today, while searching internet I came across a detailed video created by Ben Nadel. In this video, he covers overview of jQuery framework, basic hide/show methods, animation techniques, selectors and AJAX capabilities. Please “DON’T MISS” this video. I highly recommend it.

Below is the list of topics which are covered in this Video.

Introduction
What Is jQuery
UI Effects - Pain Free Animation
Why I Didn't Like jQuery At First
jQuery For Developers
Anonymous Methods
$() Factory Method
Wrapping DOM Elements
jQuery Selectors
jQuery Selector Moment of Bliss
Working With The $() Collection
Attributes And Values
Moving Elements Around
Traversing The DOM
Filtering The jQuery Collection
Iterating Over The Stack
jQuery Closures - Awesome Voodoo Magic!
Eventing Binding And Triggering
Custom Event Types
jQuery AJAX
Monitoring AJAX Requests
jQuery Data() Method
Extending jQuery - Plugins And Selectors
jQuery Is Mad Awesome
jQuery Resources

Watch Video.

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to zoom element text on Mouseover using jQuery

2011-07-12T17:19:00.001+05:30

For one of my requirement, I need to zoom in the text of div element on mouseover and zoom out on mouseout. This was fairly simple with jQuery so I thought to share with you. For example, you want to zoom in the text placed in a div with ID "Content". The default style applied to "Content" div element is below.

#content
{
font-size:10pt;
font-family:Arial,sans-serif;
}

On jQuery side, you need to do following things.

Fetch the existing size of the element and store it in any variable.
Double the existing size and store in another variable.
Set the font size to doubled size on mouseover event of element.
Set the font size to original size on mouseover event of element.

That's it. See jQuery code below.

$(document).ready(function() {
  var oldSize = parseFloat($("#content").css('font-size'));
  var newSize = oldSize  * 2;
  $("#content").hover(
    function() {
     $("#content").animate({ fontSize: newSize}, 200);
    },
    function() {
    $("#content").animate({ fontSize: oldSize}, 200);
   }
 );
});

Rather than using mouseover and mouseout method seperately, jQuery provides another method named "hover()" which serves purpose of both the methods. Please read more here about hover().

See live Demo and Code.

Walk through of jQuery inbuilt functions to create animation

2011-07-04T16:02:00.000+05:30

jQuery offers inbuilt functions to achieve animation effects, thus enable programmers to build animated pages for a better UI for the web users. Below are some useful inbuilt functions in jQuery to achieve animation effects.

fadeIn ( [ duration ], [ callback ] ):
This method animates the opacity of the matched elements from 0 to 1 i.e. transparent to opaque.
Accepted Parameter:

duration: This is the duration of the animation
callback: This is the callback function on completion of the animation.

fadeOut( [ duration ], [ callback ] ):
This method animates the opacity of the matched elements from 1 to 0 i.e. opaque to transparent.
Accepted Parameter:

duration: This is the duration of the animation
callback: This is the callback function on completion of the animation

slideUp( [ duration ], [ callback ] ):
This method animates the height of the matched elements with an upward sliding motion. When the height of the element reaches 0, the css property display of the element is updated to none so that the element is hidden on the page. Accepted Parameter:

duration: This is the duration of the animation
callback: This is the callback function on completion of the animation

slideDown( [ duration ], [ callback ] ):
This method animates the height of the matched elements from 0 to the specified maximum height. Thus, it gives slide down effect to the element.
Accepted Parameter:

duration: This is the duration of the animation
callback: This is the callback function on completion of the animation

Read "How to use jQuery slideToggle function".

slideToggle( [ duration ], [ callback ] ):
This method is combination of slideUp and slideDown method. This method animates the height of the matched elements. If the element is initially hidden, it will slide down and makes it visible. If the element is initially visible, it will slide up and make hidden on the page.
Accepted Parameter:

duration: This is the duration of the animation
callback: This is the callback function on completion of the animation

stop ( [ clearQueue ], [ jumpToEnd ] ):
This method stops the currently running animations on the page.
Accepted Parameter:

clearQueue: This indicates whether any queued up animations are required to be cleared. The default value is false.
jumpToEnd: This indicates if the current animation is to be cleared immediately. The default value is false.

animate ( properties, [ duration ], [ easing ], [ complete ] ):
This method allows us to create custom animation effects on any numeric css property.
Accepted Parameter:

properties: This is the map of css properties to animate, for e.g. width, height, fontSize, borderWidth, opacity, etc.
duration: Duration of the animation in milliseconds. The constants "slow" and "fast" can be used to specify the durations, and they represent 600 ms and 200 ms respectively.
easing: Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions. Various plugins can be interfaced if other easing functions are required.
complete: This indicates the callback function on completion of the animation.

jQuery.fx.off:
Let's assume that you had written lots of jQuery code and you want to turn off all the jQuery animation because your client doesn't like it due to slow response on some hardware device. What will you do? Either you can find all required code and remove it but that's time consuming or you can use jQuery.fx.off property to make your life easy. See Demo

Feel free to contact me for any help related to jQuery, I will gladly help you.

Highlight row on mouseover in GridView using jQuery

2011-06-29T12:54:00.001+05:30

In my previous post, I have posted about "Formatting ASP.NET GridView using jQuery". In this post, I will show you that how to highlight a gridview row on mouseover. See below image. (the image is not showing the mouse cursor, but the cursor is on 3rd row.)

All we need to do is that on mouseover on gridview rows assign any CSS and on mouseout, remove that CSS. Rather than using mouseover and mouseout method seperately, jQuery provides another method named "hover()" which serves purpose of both the methods. Please read more here about hover().

Below jQuery code, will find all the rows of gridview and using hover method it will assign "LightGrey" color on mouseover and then assign "White" color on mouseout.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%> tr").hover(function() {
    $(this).css("background-color", "Lightgrey");
   }, function() {
   $(this).css("background-color", "#ffffff");
  });
});

If your default backgroud color for row is other than white then put that color code instead of white. Simple and cool... Isn't it?

But there is a problem with this code. That is it will assign the mouseover and mouseout effect on header row as well. Try it yourself with above code. So how to resolve it? Well, we need to change above code little bit so that it finds only those rows which are having "td", not "th". To do this, we can use "has" selector of jQuery to find out all the rows which have td. See below jQuery code.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%> tr:has(td)").hover(function() {
    $(this).css("background-color", "Lightgrey");
   }, function() {
   $(this).css("background-color", "#ffffff");
  });
});

Hope you find this post useful.

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to put link on image using jQuery

2011-06-28T12:18:00.001+05:30

To put link of the image, we normally use <a> tag that contains image tag to show the image. But assume there are 100 images and you need same link for every single image. Putting 100 <a> tag with each image is time consuming and cumbersome. It would be nice if single <a> tag can be used for all the images and put the <a> tag dynamically. Well, no worry when there is jQuery.

jQuery provides a method named "wrap()", which can be used to insert any HTML structure in set of matched elements. In simple words, if you want put wrapper around your div element then you can use wrap() method. For example, you have a div with ID "Child".

<div id="Child"></div>

And want to wrap this div with any parent then you can use "wrap()" method to insert HTML.

$('#Child').wrap('');

Output:

<div id="parent">
  <div id="child"></div>
</div>

Same way, we will use the wrap() method to insert hyperlink to image tag so that the image becomes clickable. See below.

$(document).ready(function() {
    $("#imgLogo").wrap('');
});

In this example, I have used ID as selector but you can use class selector to find all the images with same class and then wrap them with <a> tag. You can also assign target="_blank" in the above <a> tag to open the link in new window.

See live Demo and Code.

Also read, "How to Zoom image on mouseover using jQuery".

Feel free to contact me for any help related to jQuery, I will gladly help you.

Formatting ASP.NET GridView using jQuery

2011-06-27T09:52:00.001+05:30

In this post, we will see how easily we can assign alternate background color of ASP.NET Grid Views rows using jQuery. In this example, we will assign grey color to all the odd rows of GridViews. When I say Odd, that means Rows which are having odd numbers like Row1, Row3, Row5 etc.

Let's take a ASP.NET Grid View Control and placed it on ASP.NET Page with ID "gdRows". See below.

<asp:GridView ID="gdRows" runat="server">
</asp:GridView>

jQuery provides a selector ":odd" which selects only odd elements. So we need to filter out all the odd rows and assign the color. To filter the rows, we will use filter() method of jQuery, which takes selector as argument and returns the elements which matches the selector. See below jQuery Code.

$(document).ready(function() {
 $("#<%=gdRows.ClientID%> tr").filter(":odd").css("background-color", "grey");
});

You can also use ":even" selector to assign other than default color to grid view rows.

$(document).ready(function() {
 $("#<%=gdRows.ClientID%> tr").filter(":even").css("background-color", "blue");
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to Replace Text On Page using jQuery

2011-06-24T12:55:00.000+05:30

Today, for one of my requirement, I have to replace all the (.)dots in my page with "---". The basic idea find all the (.) in HTML and replace them with "---". This can be done very easily with jQuery. First you replace the (.) with "---" and assign it to any variable then you need to assign back that value to HTML of the page. See below code.

$(document).ready(function() {
    var strNewString = $('body').html().replace(/\./g,'---');
    $('body').html(strNewString);
});

Instead of, (.) or "---", text can be anything. All you need is to make change in the replace function arguments and you are good to go.

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Mobile Beta 1 Released!

2011-06-22T15:05:00.000+05:30

The jQuery Mobile team has announced the release of Beta 1. The new jQuery Mobile is faster, extensible and more compatible. They’re planning on releasing a second Beta in about a month that will begin decoupling our code so you can include only the components you need, add greater extensibility to support dynamic JS-driven sites, and bring even broader device support.

Note that jQuery Mobile 1.0 will require jQuery core 1.6 as a baseline. Going forward, they’ll be supporting the two latest major versions of core but we’re starting with a cleaner baseline for launch. Read here the full details about the new release of jQuery Mobile.

Download Details:

CDN-Hosted JavaScript:
Uncompressed: jquery-mobile-1.0b1.js (useful for debugging)
Minified and Gzipped: jquery-mobile-1.0b1.min.js (20KB, ready to deploy)

CDN-Hosted CSS:
Uncompressed: jquery-mobile-1.0b1.css (useful for debugging)
Minified and Gzipped: jquery-mobile-1.0b1.min.css (7KB, ready to deploy)

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

If you want to host the files yourself you can download a zip of all the files:

ZIP File:

Zip File: jquery-mobile-1.0b1.zip (JavaScript, CSS, and images)

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to Disable Spacebar in text box using jQuery

2011-06-16T19:07:00.002+05:30

For one of my requirement, I need to restrict/disable end-user to enter space in the input field or textbox. This was piece of cake with jQuery. All I need to do is to check the keycode of spacebar and restrict its default action on keydown event. See below jQuery code. "txtNoSpaces" is the name of the textbox.

$(document).ready(function(){ 
  $("#txtNoSpaces").keydown(function(event) {
     if (event.keyCode == 32) {
         event.preventDefault();
     }
  });
});

See live Demo and Code.

Also read,
jQuery code to allow only numbers in textbox
jQuery code to allow numbers and arrow keys in textbox
Restrict Shift Key using jQuery

Feel free to contact me for any help related to jQuery, I will gladly help you.

Alert your website visitors when they are using an outdated browser using jQuery

2011-06-13T16:06:00.001+05:30

For the developers like us, one of the difficult thing is to support all major browsers. You did your best to achieve this and Your client's end-user complains that developed website is not working properly on IE 6 or older browser. IE 6 an outdated browser. So what do you do? Well, how about having a nice message on top of the page to let your end-users know that they are using an outdated browser when they visit your website. Cool.. Isn't it? No worry, when there is jQuery.

Well, there is a jQuery plugin which you can easily install at your website and this plugin takes care of rest of the things. If the end-user's browser is outdated, then it will display a message on the top. See below.

UpgradeBrowsers is a jQuery plugin which you can easily install on your website so every time someone visits your site from an outdated browser, an alert will be displayed with an invitation to update it to its latest version. If you want your visitors to enjoy the new features in HTML 5 and the capabilities of modern browsers, then UpgradeBrowsers interests you.

First of all, you need to download the js file and CSS file so that you can include them in your page.
Download the CSS file from here.
Download the js file here.

Now, include these files in your page and call "$.upgradebrowsers();" in document.ready() and you are done.

$(function(){
       $.upgradebrowsers();
});

To view this demo, please test it in IE 6 or Safari 3 or Firefox 2.

See live Demo and Code.

When someone visits your site, UpgradeBrowsers detects and verifies the browser version that is less than the default version or the configured version (when you change the 'versions') and if less then shows the alert to upgrade your browser.

This plugin comes in 2 version (development and minified). You can use development version if you want to change configuration settings for browser detection as per your requirement. Basically, you can control or tell which browser to consider as outdated browser.

Also read "Always Minimize or Minify your JavaScript Code".

Feel free to contact me for any help related to jQuery, I will gladly help you.

Visit official website.

How to use jQuery Selectors with Examples

2011-05-25T13:03:00.002+05:30

To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. jQuery provides many selectors out of the box. Let me explain some of the very useful selectors in “how to” ways.

To get more than 100 jQuery how to’s with video, click here
http://www.itfunda.com/jquery-how-to-ebook--demo-app--video/Show/45

How to select all elements of the page? - All Selector (“*”)
To select all elements of the page, we can use all selectors, for that we need to use *(asterisk symbol).

<script language="javascript" type="text/javascript">
$("*").css("border", "5px dashed green");
</script>

Above code will select all elements of the web page and apply border width as 5 pixel, style as dashed and color as green.

How to select a particular element having a specific class? - Class Selector (“.class”)
To select an element with a specific class, class selector can be used. We need to prefix the class name with “.” (dot).

<script language="javascript" type="text/javascript">
$(".class1").css("border", "5px solid green");
</script>

Above code will select all elements of the web page having class as “class1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select all elements of specific type? - Element Selector (“element”)
To select all elements of specific type, we can use element selector. We need to use the html tag name.

<script language="javascript" type="text/javascript">
$("p").css("border", "5px solid green");
</script>

Above code will select all p (paragraph) elements of the web page and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element having a specific id - ID Selector (“#id”)
To select an element having a specific id, id selector can be used. We need to prefix the id with “#” (hash symbol).

<script language="javascript" type="text/javascript">
$("#p1").css("border", "5px solid green");
</script>

Above code will select all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select multiple elements at a time? Multiple Selector (“selector1, selector2, selectorN”)
To select multiple elements having different attributes, multiple selector can be used. We can mix the class selector, element selector, id selector all in this selector separated by “,” (comma).

<script language="javascript" type="text/javascript">
$("p.class1, #p1").css("border", "5px solid green");
</script>

Above code will select all paragraph (p) having class attribute set as “class1” and all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element based on its attribute - Attribute Selector (element[‘attribute$=“name”]’)
To select an element based on a particular attribute value, attribute selector can be used. For example, if we have multiple textboxes on the page but we want to select all the textboxes which ends with id as “txtName”, we can use attribute selector.

<script language="javascript" type="text/javascript">
$('input[id$="txtName"]').val('My data');
</script>

Above code snippet will select the textboxes having id ending with “txtName” and set its value as “My data”.

Notice that as against all other selectors, this selector is written in the single quote (‘) instead of double quote (“) however the attribute value is written in the double quote (“).

How to select the first child of the parent element? - First child selector
To select first child of the parent element first child selector can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:first-child").css("background", "red");
</script>

Above code snippet will select the first paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select last child of the parent element? – Last child selector
To select the last child of the parent element last child selector can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:last-child").css("background", "red");
</script>

Above code snippet will select the last paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select a specific child of the parent element? nth child selector
To select the specific child of the parent element nth child select can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:nth-child(2)").css("background", "red");
</script>

Above code snippet will select the 2nd paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

To get more than 100 jQuery how to’s with video, click here
http://www.itfunda.com/jquery-how-to-ebook--demo-app--video/Show/45

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to set focus on next textbox on Enter Key using jQuery

2011-05-23T14:28:00.000+05:30

I had already posted about "How to Set focus on First textbox of page using jQuery", but there was a situation where I need to move to next textbox using Enter key. Normally, tab key is used to move to next text box and by default, when Enter key is pressed, the form gets submitted or it calls the default button click event. But it would be a nice feature for end-user to give him ability to move to next textbox using Enter key.

As I always say "Not to worry, when we have jQuery". This can be done with jQuery as well. First see the jQuery code.

$(document).ready(function() {
 $('input:text:first').focus();
    
 $('input:text').bind("keydown", function(e) {
    var n = $("input:text").length;
    if (e.which == 13) 
    { //Enter key
      e.preventDefault(); //Skip default behavior of the enter key
      var nextIndex = $('input:text').index(this) + 1;
      if(nextIndex < n)
        $('input:text')[nextIndex].focus();
      else
      {
        $('input:text')[nextIndex-1].blur();
        $('#btnSubmit').click();
      }
    }
  });

  $('#btnSubmit').click(function() {
     alert('Form Submitted');
  });
});

Explanation:
The document.ready() when gets executed then it first set the focus to the very first textbox of the page using "$('input:text:first').focus();". Read How to Set focus on First textbox of page using jQuery. There is a keydown function which is binded to all the textbox using bind metohd. Read more about bind. If you are using ajax, then don't use bind use live method. Read about live.

Now, the keydown function, first find the total number of textboxes in the page. Read Get total count of textboxes using jQuery.

var n = $("input:text").length;

Then, it check whether entry key is pressed If Yes, then prevent its default behavior. Take the index of next textbox and assign it to nextIndex variable.

var nextIndex = $('input:text').index(this) + 1;

After that it checks whether nextIndex is less than the total count of textbox. If Yes, then it sets the focus to next textbox and if not, then it removes the focus from current textbox and set for "Submit button".

if(nextIndex < n)
   $('input:text')[nextIndex].focus();
else
{
  $('input:text')[nextIndex-1].blur();
  $('#btnSubmit').click();
}

Simple and really cool functionality.

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Get total count of textboxes using jQuery

2011-05-20T18:44:00.001+05:30

Today,One of my colleague asked me that how to get total number of textbox count using jQuery. This was fairly simple. You can use the length property to get count of textbox. See below jQuery code.

$(document).ready(function() {
    alert($("input:text").length);
});

In this jQuery code, first selecting all the textbox and then taking it's length to get count of total number of textboxes.

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to Set focus on First textbox of page using jQuery

2011-05-19T13:22:00.000+05:30

In any webpage where there are lots of input controls and you want the foucs on the first text box when the page is loaded. It is a piece of cake with jQuery. See below code.

$(document).ready(function() {
    $('input:text:first').focus();
});

See live Demo and Code.

But there could be one problem with this approach, if you first textbox is disabled. Well, again piece of cake with jQuery.

$(document).ready(function() {
    $('input[type=text]:enabled:first').focus();
});

See live Demo and Code.

Cool, isn't it. Another problem, my first textbox is not visible (display:none) then what should I do?

<input type='text' id='txtFirstName' style='display:none' />

Not to worry, as we have jQuery. :)

$(document).ready(function() {
    $('input[type=text]:visible:first').focus();
});

See live Demo and Code.

The best method is to set the focus using ID of the control as you know that control is visible and it is not disabled.

$(document).ready(function() {
    $('#txtFirstName').focus();
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

Most Popular articles on jQuery By Example blog

2011-05-18T18:44:00.000+05:30

Below is a list of most popular articles on my blog and I recommend everyone to read these:

Feel free to contact me for any help related to jQuery. I will gladly help you.

Download jQuery 1.6 Visual Cheat pdf

2011-05-17T17:26:00.000+05:30

Few days back jQuery 1.6 was released and ready for the consumption. Read my articles to find out, What's new in jQuery 1.6.

Also read my series of articles for jQuery 1.6.

Here is a download link to download the cheat sheet for jQuery 1.6.

Download PDF

Credit
woorkup

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Selectors Reference List

2011-05-14T22:44:00.000+05:30

Selector are used to select elements and it is pretty difficult to remember about each and every selector. It would be nice, if all the selectors are placed together So they can referred quickly. I have prepared a list of mostly used selector.
Simple tag, class, and id selectors
*
tagname
.classname
#id

Selector combinations
A B B as a descendant of A
A > B B as a child of A
A + B B as a sibling following A
A ~ B B as a sibling of A

Attribute filters
[attr] has attribute
[attr=val] has attribute with value val
[attr!=val] does not have attribute with value val
[attr^=val] attribute begins with val
[attr$=val] attribute ends with val
[attr*=val] attribute includes val
[attr~=val] attribute includes val as a word
[attr|=val] attribute begins with val and optional hyphen

Element type filters
:button
:header
:password
:submit
:checkbox
:image
:radio
:text
:file
:input
:reset

Element state filters
:animated
:disabled
:hidden
:visible
:checked
:enabled
:selected

Selection position filters
:eq(n)
:first
:last
:nth(n)
:even
:odd
:gt(n)
:lt(n)

Document position filters
:first-child
:last-child
:only-child
:nth-child(xn+y)
:nth-child(n)
:nth-child(even)
:nth-child(odd)

Miscellaneous filters
:contains(text)
:not(selector)
:empty
:parent
:has(selector)

Feel free to contact me for any help related to jQuery, I will gladly help you.

Use Relative CSS with jQuery 1.6

2011-05-06T15:54:00.000+05:30

I had already posted about "What's new in jQuery 1.6" and "jQuery.holdReady() New in jQuery 1.6".With jQuery 1.6, you can take advantage of Relative CSS. When I say relative, that means that you can update existing CSS value using relative values. For example, the width of the div element is 500px and you want to update it to 600. Then with 1.6, you can simply say "+=100px".

 $(document).ready(function() {
   $('#dvExample').css('width','350px');
    $('#btnWidth').click(function() {
       $('#dvExample').css('width','+=100px'); 
    });
});

Initially, the width of the div is set to 350px and on click of button, its width is increased by 100px.You need to use "+=" and "-=" as prefix to update the existing value with the relative values. With every click on the button, it will increase the width by 100px.

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery.holdReady() New in jQuery 1.6

2011-05-05T14:27:00.000+05:30

With Release of jQuery 1.6, jQuery team has released a new method "jQuery.holdReady(hold)". This method allows to delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but sometimes there is a situation when you want to load additional JavaScript or some plugins which you have referenced. In such situation, You can make a call to this function to delay execution of document.ready() event.

This method must be called before document.ready() event. Calling this method after the ready event has already fired will have no effect.The best place to call is after you reference the jQuery.js in your script tag. When true is passed as argument, then it will delay the execution. When you want ready event to get executed then call "jQuery.holdReady(false)".

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

Note that multiple holds can be put on the ready event, one for each $.holdReady(true) call. The ready event will not actually fire until all holds have been released with a corresponding $.holdReady(false) and the normal document ready conditions are met.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Submit your ideas for jQuery 1.7

2011-05-04T16:54:00.000+05:30

Have you ever thought that it would have been better if this feature is supported by jQuery. Well, the wait is over. jQuery core development team is now taking proposal. You can submit your proposal and they will discuss and take the final call. If selected, then it will be included in jQuery 1.7 which is probably released in August.

Submit your proposal here.

Feel free to contact me for any help related to jQuery, I will gladly help you.

What's new in jQuery 1.6

2011-05-04T16:21:00.003+05:30

Well, jQuery 1.6 is now live and available for consumption! You can get the code from the jQuery CDN:

http://code.jquery.com/jquery-1.6.js
http://code.jquery.com/jquery-1.6.min.js

You can also get the code from other CDNs as well:
Microsoft: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js
(Google is still uploading their copy.)

Read "How to always reference latest version of jQuery".

Along with some bug fixes, some new features are introduces in this release. These are

Case-mapping of data- attributes
jQuery 1.5 introduced a feature in the .data() method to automatically import any data- attributes that were set on the element and convert them to JavaScript values using JSON semantics. In jQuery 1.6 they have updated this feature to match the W3C HTML5 spec with regards to camel-casing data attributes that have embedded dashes. So for example in jQuery 1.5.2, an attribute of data-max-value="15" would create a data object of { max-value: 15 } but as of jQuery 1.6 it sets { maxValue: 15 }.

.prop(), .removeProp(), and .attr()
In the 1.6 release they’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type="text" value="abc" />. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.

Boolean Attributes
In jQuery 1.6 Boolean attributes (such as selected, checked, etc.) can now be toggled by passing in true or false to .attr() to either add or remove them. For example:

$("#checkbox").attr("checked", true); // Checks it
$("#checkbox").attr("checked", false); // Unchecks it

jQuery.holdReady()
jQuery provides a mechanism for delaying the execution of the ready event (primarily for plugin authors). The API for this mechanism has been improved in 1.6, resulting in a single, simple, method:

jQuery.holdReady( true ); // Pause execution of ready event
// later...
jQuery.holdReady( false ); // Resume execution

:focus Selector
In jQuery 1.6, it is ensured that the :focus selector works properly across all browsers. You can use this selector to find the currently focused element on the page (such as a form input).

$("input:focus").addClass("active");

You can find the complete list of jQuery 1.6 API changes
http://api.jquery.com/category/version/1.6/

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to always reference latest version of jQuery

2011-04-30T14:28:00.000+05:30

As you are aware that already many version of jQuery is released and the latest version is 1.5.2. And jQuery 1.6 is around the corner. When you are referencing the jQuery from CDN then you need to specify the version number as well so that version gets loaded.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>

Above code will load jQuery 1.5.1 from Google CDN. But it would be nice if always latest version is referred irrespective of new version is released and you don't have to modify the jQuery referencing code.

Well,jQuery.com is also one of the CDN where jQuery is hosted. You can always refer to the latest version of jQuery.

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>

This will always load the latest version of jQuery. Currently it refers to 1.5.2 and in future if 1.6 is released then it will load 1.6. Cool...

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to load jQuery locally when CDN fails

2011-04-29T18:02:00.000+05:30

There are couple of advantage if you load your jQuery from any CDN. Read my post about "jQuery Tip : Always load your jQuery framework from CDN". It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.

Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.5.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Validate email address using jQuery

2011-04-23T16:53:00.000+05:30

This is a very basic functionality to validate the email address. In this post, I will show you how to validate the email address using jQuery. To validate the email address, I have created a separate function which based on email address, returns true or false. Email address validation is done using regular expression.

function validateEmail(txtEmail){
   var a = document.getElementById(txtEmail).value;
   var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{1,4}$/;
    if(filter.test(a)){
        return true;
    }
    else{
        return false;
    }
}

One just need to make a call to this function to validate the email address. For demo, I have used on blur event of textbox. But It can be used on click on button or any another event.

$(document).ready(function() {
  $('#txtEmail').blur(function() {
      if(validateEmail('txtEmail'))
      {
          alert('Email is valid');
      }
      else
      {
          alert('Invalid Email Address');
      }
   });
});

See live Demo and Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

Find which mouse button clicked using jQuery

2011-04-18T12:58:00.000+05:30

For one of my requirement, I need to determine which mouse button (Left, Middle or Right) was clicked. jQuery provides mousedown() event, using which we can check which mouse button is clicked. For key or button events, event attribute indicates the specific button or key that was pressed. event.which will give 1, 2 or 3 for left, middle and right mouse buttons respectively. The advantage of using event.which is that it eliminates cross browser compatibility.

$(document).ready(function() {
$('#btnClick').mousedown(function(event){
    switch (event.which) {
        case 1:
            alert('Left mouse button pressed');
            break;
        case 2:
            alert('Middle mouse button pressed');
            break;
        case 3:
            alert('Right mouse button pressed');
            break;
        default:
           break;
    }
});
});

See live Demo and Code.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Restrict Shift Key using jQuery

2011-04-17T11:01:00.001+05:30

There is a very basic requirement of restrict numbers in a textbox And we implement the code to restrict other characters than 0 to 9. But there is a loop hole that sometimes not checked, that is using Shift Key and number key combination, user can still type special characters like @,#,$ etc.Below jQuery code detects how to restrict or disable Shift Key.

$(document).ready(function(){ 
$("#txtNumbers").keydown(function(event) {
     if(event.shiftKey)
     {
        alert('You have pressed Shift Key.');
        event.preventDefault();
     }
   });
});

See live Demo and Code.

Above code uses keydown event to track shift key, if you use same method in keyPress event, then it will not work. The difference between keydown() and keypress() is that if the user repeats any key by pressing and holding a key, the keydown() event is executed only once whereas the keypress() event isexecuted for each inserted character. Also, the modifier keys Shift, Ctrl, etc. are recognized by keydown(), but keypress() is not fired by these modifier keys.

Read my other post that allows only number

jQuery code to allow only numbers in textbox

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery to Retrieve Server's current date and time with ASP.NET

2011-04-05T17:42:00.001+05:30

In this post, we will see how to retrieve server's current date and time without using ajax. It's very simple and one line of ASP.NET code can help you to retrieve the server's current date & time. For demo, I have placed a textbox and will fetch the Server's date and time and display it in Textbox.

<asp:TextBox ID="txtValue" runat="server"></asp:TextBox>

See below jQuery code.

$(document).ready(function() {
$('#txtValue').val('<%=(System.DateTime.Now).ToString()%>');
});

It is just a simple ASP.NET code, which we normally write in code behind file.Above code will provide date and time both. If you want to fetch only time, then modify the above jQuery code to below code.

$(document).ready(function() {
$('#txtValue').val('<%=System.DateTime.Now.ToShortTimeString()%>');
});

You can also fetch only the Year, month, day, hours, minutes or seconds. For example, to fetch hours,

$('#txtValue').val('<%=(System.DateTime.Now.Hour).ToString()%>');

To fetch only minutes,

$('#txtValue').val('<%=(System.DateTime.Now.Minute).ToString()%>');

Read more about DateTime.Now on MSDN and find out what more you can achieve using this property.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Split revisited

2011-03-30T12:41:00.001+05:30

I had already posted about "Split function in jQuery", which is used to split any string with specified delimiter. Please read this post before you proceed.

Split method split the string into array of substring and return a new array. The basic syntax for split method is,

string.split(separator, limit)

It takes 2 parameters,
1. separator - This is optional. It specifies the character to use for splitting the string. If omitted, the entire string will be returned.
2. limit - This is also optional. This will be an integer value that specifies the number of splits to be made.

Let's see some examples.

Example 1:

var element = 'jQuery By Example Rocks!!';
var arrayOfStrings = element.split();

In this example, I have not used any separator and not defined any element. So the whole string will be returned back to arrayOfStrings variable.

Example 2:

var element = 'jQuery By Example Rocks!!';
var arrayOfStrings = element.split(" ");

In this example, I have passed space as delimiter or separator to split the string. So arrayOfStrings variable will have 4 items.

arrayOfStrings[0] = "jQuery"
arrayOfStrings[1] = "By"
arrayOfStrings[2] = "Example"
arrayOfStrings[3] = "Rocks!"

Example 3:

var element = 'jQuery By Example Rocks!!';
var arrayOfStrings = element.split(" ",3);

In this example, I have passed space as delimiter or separator to split the string and also passed limit as 3. So arrayOfStrings variable will have only 3 items.

arrayOfStrings[0] = "jQuery"
arrayOfStrings[1] = "By"
arrayOfStrings[2] = "Example"

Hope this post provides you enough information about Split method.

Read my other helpful posts:

Disable/Enable an element using jQuery
Disable-Enable all controls of page using jQuery
Enable/Disable all text boxes using jQuery

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download jQuery 1.4 docs

2011-03-28T14:36:00.003+05:30

Well, good news. Now you don't need to go online if you want to see the jQuery docs.

Thanks to charupload.wordpress.com for compiling this into chm.

Download jQuery doc in CHM

Feel free to contact me for any help related to jQuery, I will gladly help you.