jQuery By Example

How to combine/join arrays using jQuery

noreply@blogger.com (Virendra Dugar) — Mon, 27 Feb 2012 05:00:00 +0000

In this post, we will see that "how to join or combine arrays using jQuery". Below jQuery code joins the two arrays using jQuery.

$(document).ready(function() {
  var arrFirst = [50, 10, 19, 22];
  var arrSecond = [6, 74]; 
  $('#firstPart').html(arrFirst.join());
  $('#secondPart').html(arrSecond.join());
  var arrJoin = arrFirst.concat(arrSecond);
  $('#allElements').html(arrJoin.join());
});

In this jQuery code, I have used the concat() method. contact() is the method of an array object and it is invoked on the first array and the second array is passed to it as a parameter. And it returns another array which is combination of both the arrays elements.

See result below.

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

How to split an array using jQuery

noreply@blogger.com (Virendra Dugar) — Mon, 27 Feb 2012 04:00:00 +0000

In this post, we will see that "how to split an array using jQuery". Below jQuery code splits the array using jQuery.

$(document).ready(function()
{
  var members = [50, 10, 19, 22, 6, 74];
  $('#allElements').html(members.join());
  memsecond = members.splice(0,4);
  $('#firstPart').html(memsecond.join());
  $('#secondPart').html(members.join());
});

In this jQuery code, I have used the splice() method for splitting the array. This method requires 2 parameters. The first parameter specifies the index location from where to start splitting, and the second parameter specifies the number of elements to be removed from the original array. The range of array elements defined by the two parameters will be extracted from the original array and will be returned so it can be saved in another array.

See result below.

Read more about splice() method here.

Remove Item from Array using jQuery

noreply@blogger.com (Virendra Dugar) — Wed, 22 Feb 2012 03:30:00 +0000

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/Phone using jQuery

noreply@blogger.com (Virendra Dugar) — Tue, 21 Feb 2012 05:30:00 +0000

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 (i.e. Android Phones & Android tablets) 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

noreply@blogger.com (Virendra Dugar) — Tue, 21 Feb 2012 04:05:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 20 Feb 2012 04:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Wed, 15 Feb 2012 04:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Tue, 14 Feb 2012 04:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 13 Feb 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 13 Feb 2012 04:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Fri, 10 Feb 2012 04:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Thu, 09 Feb 2012 07:33:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Thu, 09 Feb 2012 04:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Tue, 07 Feb 2012 04:35:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 06 Feb 2012 04:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Wed, 01 Feb 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Wed, 25 Jan 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Tue, 24 Jan 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 23 Jan 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Fri, 20 Jan 2012 05:13:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Wed, 18 Jan 2012 05:00:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Tue, 17 Jan 2012 05:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Mon, 09 Jan 2012 05:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Thu, 05 Jan 2012 02:30:00 +0000

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

noreply@blogger.com (Virendra Dugar) — Tue, 03 Jan 2012 02:30:00 +0000

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.