Add default option to ASP.NET Dropdown list using jQuery

Add default option to ASP.NET Dropdown list using jQuery
Sometimes It is required to add default option like "Please Select" or "Select" in Dropdown list. Below is a simple jQuery code to "add default option to ASP.NET Dropdown list using jQuery".
//Code Starts
$(document).ready(function(){
  var defaultOpt = "<option selected='selected' value='-1'>--Select--</option>"
  $('#<%=ddlCountry.ClientID %>').prepend(defaultOpt);
})
//Code Ends
And if you want to add default option to all the dropdown list on the page then use below jQuery code.
//Code Starts
$(document).ready(function(){
  var defaultOpt = "<option selected='selected' value='-1'>--Select--</option>"
  $('select').prepend(defaultOpt);
})
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.

Combine all TextBox values to a Hidden field using jQuery

Combine all TextBox values to a Hidden field using jQuery
One of my colleague asked me "He wants to add all the textbox value present on the page in a hidden field using jQuery and that hidden field value will be submitted to form using Ajax". He was knowing how to submit the values using Ajax but he was facing problem while adding all textbox values in the hidden field. So I have solved his problem using jQuery and also sharing the solution with you.

  • First declare an Array variable as this variable will be used to store the values.
//Code Starts
var txtData = [];
//Code Ends
  • Now loop through all the textboxes on the form and put their value in the array variable.
//Code Starts
$("form :input[type=text]").each(function() {
    txtData.push($(this).val());
});
//Code Ends
  • Now join all the elements of array to make a single string and assign it to hidden input element. I have used "$$$" as separator to separate the values in string.
//Code Starts
$("#hdnData").val(txtData.join("$$$"));
//Code Ends
So complete jQuery code is,
//Code Starts
$(document).ready(function() {
    $("#btnSubmit").click(function(e) {
        var txtData = [];
        $("form :input[type=text]").each(function() {
            txtData.push($(this).val());
        });
        $("#hdnData").val(txtData.join("$$$"));
        $('p').html($("#hdnData").val());
        e.preventDefault();
    });
});​
//Code Ends
See result below.



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

Best 5 jQuery Captcha plugins

Captcha is a method which provides a way to identify human or bot or any malicious software trying to access website. You have seen Captcha at the time of signup, putting comments on any site, contact forms etc. It's a smart way to keep bots away from entering in to the website. Here are Top and Best 5 jQuery Captcha plugins which are really easy to integrate and just awesome.

1. Drag and Drop Image Captcha


Ajax Fancy Captcha is a jQuery plugin that helps you protect web pages from bots and spammers. It is a intuitive way of completing "verify humanity" tasks. In order to do that you are asked to drag and drop specified item into a circle.


Visit official website HERE.

2. Motion Captcha


MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas, requiring users to sketch the shape they see in the canvas in order to submit a form. At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and doesn’t really have IE support.


Visit official website HERE and check live DEMO

3. PIX Captcha


Pix-CAPTCHA is an image-based CAPTCHA with the goal of making it easy for humans to read but harder for bots to crack. Many websites rely on the text-CAPTCHAs as a way to distinguish a legitimate visitor from a ‘bot’. However, cybercriminals are increasingly using simple OCR engines and spam tools to intercept/break the text-CAPTCHAs to spam web properties.


Visit official website HERE

4. jQuery Fancy Draggable Captcha


In order to pass the "Are you human" test, the user has to arrange the alphabets in correct order.


Visit official website HERE and check live DEMO

5. QapTcha


QapTcha is a draggable jQuery captcha system with jQuery UI. QapTcha is an easy-to-use, simple and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.


Visit official website HERE and check live DEMO

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

Alert user while typing invalid domain name using jQuery

It is very much possible that at the time of signup, user make mistake while entering the correct domain. For example, instead of "hotmail.com", user types "hotnail.com". And the wrong email address gets saved in database. And later on, when your website sends an email, the email will bounce. In this post, I will show you a jQuery plugin called "Mailcheck" which suggest possible correct domain.

Mailcheck.js is a jQuery plugin that suggests a possible right domain when your users misspell it in an email address. For example when your user types in "user@hotnail.con", Mailcheck will suggest "user@hotmail.com".


How to use it?


All one need to do is to call "mailcheck" function on blur event of the textbox and it will do the rest. Mailcheck takes in two callbacks, suggested and empty.

suggested is called when there's a suggestion. Mailcheck passes in the target element and the suggestion. The suggestion is an object with the following members:
//Code Starts
{
  address: 'test',          // the address; part before the @ sign
  domain: 'hotmail.com',    // the suggested domain
  full: 'test@hotmail.com'  // the full suggested email
}
//Code Ends
empty is called when there's no suggestion. Mailcheck just passes in the target element. You can use the callbacks to display the appropriate visual feedback to the user.
//Code Starts
$(document).ready(function() {
  $('#txtEmail').on('blur', function() {
    $(this).mailcheck({
      suggested: function(element, suggestion) {
        $('#spnSuggest').show();
        $('#spnSuggest').html("Did you mean '" + suggestion.full + "'?");
      },
      empty: function(element) {
         $('#spnSuggest').hide();
      }
     });
  });
});​
//Code Ends
See result below.



The included default domains are: yahoo.com, google.com, hotmail.com, gmail.com, me.com, aol.com, mac.com, live.com, comcast.net, googlemail.com, msn.com, hotmail.co.uk, yahoo.co.uk, facebook.com, verizon.net, sbcglobal.net, att.net, gmx.com, and mail.com.

The Mailcheck jQuery plugin uses the defaults to a list of top email domains if the domain option isn't provided. You can also provide list of domains based on the distribution of your users.

Below is the jQuery code that defines list of own domains. So now the plugin will only suggest for these 3 domains.
//Code Starts
var domains = ['hotmail.com', 'gmail.com', 'yahoo.com'];
$('#txtEmail').on('blur', function() {
    $(this).mailcheck({
      domains: domains,
      suggested: function(element, suggestion) {
        $('#spnSuggest').show();
        $('#spnSuggest').html("Did you mean '" + suggestion.full + "'?");
      },
      empty: function(element) {
         $('#spnSuggest').hide();
      }
     });
  });
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.

Make your file upload control stylish using jQuery

File upload control is a very common control, but the look and feel of file upload control is eye catching. Also there is no control how browser renders it. Different browsers renders in different style, which is not what you want. So in this post, I will demonstrate a jQuery plugin called "jQuery Custom File Input" which allows to make file upload control look stylish and eye catching.

How to use it?


First download the plugin and add references of required js and css files.
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/enhanced.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>
Declare a file upload control.
<label for="file">Select File</label>
<input type="file" name="file" id="flUpload" />
And use below jQuery code.
//Code Starts
$(document).ready(function(){
  $('#flUpload').customFileInput();
});
//Code Ends
See result below.



How does it work?


The plugin creates a custom-styled file control using div and span elements, and then it uses JavaScript to set the default input file upload opacity to zero and dynamically position it invisibly between the cursor and the custom control. So that the user interacts only with the input.
Feel free to contact me for any help related to jQuery, I will gladly help you.

How to search through GridView records using jQuery

I had already posted "How to filter GridView records using jQuery" but With continuing my experiments with ASP.NET Grid View and jQuery, In this post I will show you how to search through all columns of ASP.NET GridView Data and show only those data which satisfies the search text. I have implemented it using jQuery so sharing with you.

Related Post:

Problem:

First take a look at below image.


As you can see from image, that there is a GridView control populated with data and above that there is a textbox and a button. So the problem was, based on the search text entered in search text box, filter the data from GridView on any of the column . For example, "10" is entered then only those rows should be visible which have 10 in any of the column. It can be in ID, ProductName, Price or quantity column.


Another example, if "L" is entered then below should be the output.


Note: Following controls are placed on the page.
  • A GridView
  • A Label control which has "No records to display" message.
  • And separate link button for each alphabet and one link button for "All".

Solution:

Below are detailed steps to how to do it.

  • First, hide the "No records to display" label and also hide all the rows of GridView.
// Hide No records to display label.
$('#<%=lblNoRecords.ClientID%>').css('display','none'); 
//Hide all the rows.
$("#<%=gdRows.ClientID%> tr:has(td)").hide(); 
  • Now declare a counter variable, which will be used to display "No records to display" label. And also get the search textbox value.
var iCounter = 0;
//Get the search box value
var sSearchTerm = $('#<%=txtSearch.ClientID%>').val();
  • If nothing is entered in search textbox, then display all gridview rows and return from here. You can also do validation to show alert message to user to enter something. But I have used Search button as Reset button as well so when nothing is entered, display all the GridView rows.
//if nothing is entered then show all the rows.
if(sSearchTerm.length == 0) 
{
  $("#<%=gdRows.ClientID%> tr:has(td)").show(); 
  return false;
}
//
  • Now run a loop through all the td element of GridView.
//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
{
});
//
  • Now within the loop get the td value and compare if the td value matches with the search term. If Yes, then show it's parent (that is tr) and increment the counter variable.
//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
{
    var cellText = $(this).text().toLowerCase();
    //Check if data matches
    if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) 
    {    
        $(this).parent().show();
        iCounter++;
        return true;
    } 
});
//
  • Finally, check if counter variable value is equal to 0. If Yes, then display "No records to display" label.
if(iCounter == 0)
{
   $('#<%=lblNoRecords.ClientID%>').css('display','');
}
//
So putting it together the complete jQuery code is,
//Code Starts
$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');

    $('#<%=btnSubmit.ClientID%>').click(function(e)
    {
        // Hide No records to display label.
        $('#<%=lblNoRecords.ClientID%>').css('display','none'); 
        //Hide all the rows.
        $("#<%=gdRows.ClientID%> tr:has(td)").hide(); 
        
        var iCounter = 0;
        //Get the search box value
        var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); 
        
        //if nothing is entered then show all the rows.
        if(sSearchTerm.length == 0) 
        {
          $("#<%=gdRows.ClientID%> tr:has(td)").show(); 
          return false;
        }
        //Iterate through all the td.
        $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function() 
        {
            var cellText = $(this).text().toLowerCase();
            //Check if data matches
            if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) 
            {    
                $(this).parent().show();
                iCounter++;
                return true;
            } 
        });
        if(iCounter == 0)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','');
        }
        e.preventDefault();
    })
})
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.

Update another field when date selection is made using jQuery UI DatePicker

Update another field when date selection is made using jQuery UI DatePicker
In this post, I will show you when using jQuery UI Datepicker how to update another field when date selection is made in another control.

jQuery UI Datepicker provides an options "altField", which can be used to set the selected date to another control. Set the ID of another control as value for this field and that's it.
//Code Starts
$(document).ready(function() {
  $('#txtDate').datepicker({
     altField: "#txtDateOther"
  });
});
​//Code Ends
See result below.



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

jQuery UI Slider overlap issue solution

I had already posted about How to use jQuery UI Slider and other posts about jQuery UI Slider but this is really interesting. While using jQuery UI Slider for range selection, you may come across a situation where both the slider pointer are at the same value, which means that they overlap. And this is not the ideal behavior that you want for the range.


Below is a simple jQuery code to implement jQuery UI Slider with range selection. Below code specifies the range for slider from 0 to 100 and the initial value for both the silder pointer is 20 and 40 respectively.
//Code Starts
$(document).ready(function() {
    $("#dvSliderRange1").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);
        }
    });  
});​
//Code Ends
See result below.


To solve this overlap problem, jQuery UI Slider doesn't provide any direct way to handle such situation. But as you can see from the above jQuery code, that I have used "slide" event to update the value in the label whenever any of the pointer moves.
//Code Starts
 slide: function(event, ui) {
            $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);
     }
//Code Ends
So, we can write our own logic to in this event to check when both the pointers are at same point and if they are, then don't allow. Below jQuery code does the same thing. It compares both the pointers value and if they are equal then it doesn't allow them to slide.
//Code Starts
$(document).ready(function() {
 $("#dvSliderRange2").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            if (ui.values[0] == ui.values[1]) {
                return false;
            }
            $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
        }
    });
});​
//Code Ends
See result below.



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

jQuery UI Virtual Keyboard plugin

Today many banking sites are providing virtual keyboard to enter the password while using internet banking because it is safe and secure than entering password from keyboard. Today, I will show you a jQuery UI Virtual keyboard plugin which is just amazing. Virtual Keyboard is a jQuery UI plugin that comes with lots of features, compatible with theme roller, works with jQuery mobile and would ideal for touch screen.


This plugin supports many keyboard layouts like qwerty, alphabetic, numeric, Dvorak, regional layouts or any other custom layout. The entire keyboard can be easily customized with CSS.

Main Features:

  • An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
  • The user can then type and preview their input before Accepting or Canceling.
  • Add custom keyboard layouts easily.
  • Add up to four standard key sets to each layout that use the shift and alt keys (default, shift, alt and alt-shift).
  • Position the keyboard in any location around the element, or target another element on the page.
  • Easily modify the key text to any language or symbol.
  • Allow direct input or lock the preview window.
  • Set a maximum length to the inputted content.
  • Scroll through the other key sets using the mouse wheel while hovering over a key to bypass the need to use alt, shift or meta keys.
  • Enable, disable or add more diacritic functionality as desired.
  • Use callbacks and event triggers that occur when the keyboard is open or closed and when the content has been accepted or canceled.
  • ARIA support (may not be fully implemented)
  • As jQuery UI is a dependancy, this plugin's styling will automatically match the selected jQuery UI theme with the exception of the required CSS listed below.
  • Built in watermarking. Emulates HTML5 placeholder if the browser doesn't support it.
  • Typing extension allows you to simulate typing into the keyboard for demo purposes or to assist user input.
  • Autocomplete extension will integrate this keyboard plugin with jQuery UI's autocomplete widget.
  • Multiple region specific keyboard layouts included in a separate directory. This is a work in progress and slowly growing.

How to use it:

The very basic demo would be,
//Code Starts
$(document).ready(function(){
    $('#txtKeyboard').keyboard();
});​
//Code Ends
As mentioned earlier, that it supports numeric, alphabets and qwerty layout etc.. So to implement only numeric keyboard or only show numpad then use below jQuery code.
//Code Starts
$(document).ready(function(){
    $('#txtNum') .keyboard({
     layout : 'num',
     restrictInput : true, 
     preventPaste : true,  
     autoAccept : true
    }).addTyping();
});​
//Code Ends
See result below.



This plugins comes with lots of features and options and it can be customized with ease.
Feel free to contact me for any help related to jQuery, I will gladly help you.

Set Alternate color for GridView columns using jQuery

In this post, we will see how easily we can assign background color to ASP.NET Grid Views columns using jQuery. In this example, we will assign "Tan" color to all the even columns of GridViews and "PaleGoldenrod" to even columns. When I say Odd, that means columns which are having odd numbers like column1, column3 etc.

$(document).ready(function() {
  $("#<%=gdRows.ClientID%> td:nth-child(odd)").css("background-color", "Tan");
  $("#<%=gdRows.ClientID%> td:nth-child(even)").css("background-color", "PaleGoldenrod");
});
Feel free to contact me for any help related to jQuery, I will gladly help you.

How to disable all controls on the page using jQuery

How to disable all controls on the page using jQuery
Today, I got into a situation where for some reason I need to disable all the controls on the page on client side. So I have implemented it using jQuery and sharing the solution of the problem "how to disable all controls of the page using jQuery".

Below jQuery code will get called on click of button called "btnDisable" and set "disabled" attribute to all the controls on the page, which will in turn disable all the control including the button "btnDisable".
//Code Starts
$(document).ready(function() {
    $("#btnDisable").click(function(e) {
        $("*").attr("disabled", "disabled");
        e.preventDefault();
    });
});​
//Code Ends
But there is one problem with the code, that now there is no way or event to handle to enable the controls. To handle this, either 2 separate buttons can be used or the same button can be handle to enable and disable controls. To use same button for both operations, instead of click event use toggle event. "toggle" binds two or more handlers to the matched elements, to be executed on alternate clicks.

So with toggle, one need to specify 2 different event handlers. You can specify more than 2 event handlers as well. If more than two handlers are provided, .toggle() will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.

So in the first event handler,
  • First set disabled attribute to all the controls.
  • After remove the disabled attribute from the button.
  • And set text of button to "Enable".

And 2nd event handler,
  • First remove disabled attribute from all the controls.
  • And set text of button to "Disable".
//Code Starts
$(document).ready(function() {
    $("#btnDisable").toggle(function(){
        $("*").attr("disabled", "disabled");
        $(this).removeAttr("disabled");
        $(this).val("Enable");
    }, function(){
        $("*").removeAttr("disabled");
        $(this).val("Disable");
    });
});​
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.

Read and Process XML using jQuery Ajax

While working on my current project, for one of my requirement I need to read and process the XML file using jQuery and Ajax. The actual XML file was very huge and I can't share. So in this post, I will show you how to process XML file with jQuery and Ajax.

Related Post:
Below is the sample XML file that we will be using for the demo.The XML file is having list of books with Title and Publisher as 2 XML node with every book.
//Code Starts
<?xml version="1.0" encoding="utf-8" ?>
<BookList>
  <Book>
     <Title>jQuery: Novice to Ninja</Title>
     <Publisher>Site point</Publisher>
  </Book>
  <Book>
     <Title>Learning jQuery</Title>
     <Publisher>PACKT</Publisher>
  </Book>
  <Book>
     <Title>Head First jQuery</Title>
     <Publisher>O'Reilly</Publisher>
  </Book>
  <Book>
     <Title>jQuery UI 1.8</Title>
     <Publisher>PACKT</Publisher>
  </Book>
</BookList>
//Code Ends
Now, to process the XML using jQuery, below is the idea to how to do it..
  • Declare a div which will be used to show the XML content.
  • As the display will be in the list so append the UL to the div element.
  • Call the ajax method to process the xml file.
  • Set HTTP request type to "GET" and also provide the name of XML file in url.
  • Set the datatype to "xml".
  • We also need to define a callback functions, which gets called when request is successful or if some error occurred.
  • So when success callback is called then loop through the xml content.
  • Get the node value for "Title" and "Publisher" and append it to the div.
  • Define error callback to handle the error.
So here is the complete jQuery code.
//Code Starts
$(document).ready(function(){
  $("#dvContent").append("<ul></ul>");
  $.ajax({
    type: "GET",
    url: "BookList.xml",
    dataType: "xml",
    success: function(xml){
    $(xml).find('Book').each(function(){
      var sTitle = $(this).find('Title').text();
      var sPublisher = $(this).find('Publisher').text();
      $("<li></li>").html(sTitle + ", " + sPublisher).appendTo("#dvContent ul");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  }
  });
});
//Code Ends
And below is the output:
Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery Grid Plugins for ASP.NET

Grid or Data Grid or Grid View is a very common control and it is best way to represent data in a list form. ASP.NET also comes with controls like Repeater, DataList, DataGrid, GridView and ListView to display data in form of list. With jQuery becoming so popular, there are many jQuery Grid plugins available with many features. Below are some jQuery Grid Plugins which can be easily integrated with ASP.NET and are really good.

SlickGrid


Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!
  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit


jQGrid


jqGrid is a grid component for ASP.NET & PHP based on the world's most popular and flexible jQuery grid plugin.
  • Simple
  • No ViewState
  • Client-side javascript based on jQuery
  • Theming based on jQuery UI (Themeroller)
  • Support for all major databases (MS SQL, MySql, Postgre)
  • Greatest support ever.
  • Fast responses and fixes, fixed builds delivered to customers asap


DataTables


DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid - backed by a suite of 2800 unit tests
  • Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
  • It's free!


jQWidget -> jqxGrid


The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.


If you have also come across any other good jQuery Grid plugin, then please share with us.

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

Show Hide jQuery UI DatePicker Programmatically

Show Hide jQuery UI DatePicker Programmatically
I just love "jQuery UI DatePicker" as its awesome and so easy to customize. Today for my requirement, I need to show the jQuery UI DatePicker control when textbox gets focus and hide the jQuery UI DatePicker automatically after 2 seconds if date is not selected by the end user, as if the date is selected by the user then DatePicker hides automatically.

jQuery UI DatePicker provides option "show" and "hide" to show/hide the DatePicker. So the idea was to show the DatePicker when textbox gets focus (using focus event) and call setTimeout to hide the datepicker after 2 seconds.

Read How to use jQuery setTimeout function
//Code Starts
$(document).ready(function() {
   $('#txtDate').datepicker();
   $('#txtDate').focus(function() {
     $(this).datepicker("show");
     setTimeout(function() {
       $('#txtDate').datepicker("hide");
       $('#txtDate').blur();
     }, 2000)
   })    
});
​​//Code Ends
See result below.



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

How to create thumbnail from images using jQuery

jQuery NailThumb is jQuery plugin allows to create thumbnail from any image with full control using jQuery. You can create thumbnails easily from high-resolution images, without any distortion, with one line of jQuery code. You can even decide thumbnail dimensions directly from CSS. Integrates prefectly with any media gallery, even more usefull in dynamic web application when you can face any shape or size.


If you want to add avatars to your application it's easier to use this plugin to let them fit any size you need then to develop a functionality that help your user to upload avatars of the right size/sizes.

This plugin provides various methods to create thumbnails. Whatever method you choose and whatever proportions limit you fix NailThumb will always create a thumbnail without any distortion and will keep your image as big as possible.

A very basic use of this plugin is,
//Code Starts
<div class="nailthumb-container">
   <img src="path/to/image.png" />
</div>

$(document).ready(function() {
    $('.nailthumb-container').nailthumb({width:100,height:100});
});
//Code Ends
You can also define the thumbnail size using a CSS and the advantage is so whenever you'll want to restyle you won't have to touch your javascript to let the thumbnails fit.
//Code Starts
<style type="text/css" media="screen">
 .square-thumb 
 {
    width: 150px;
    height: 150px;
 }
</style>

<div class="nailthumb-container square-thumb">
   <img src="path/to/image.png" />
</div>

$(document).ready(function() {
    $('.nailthumb-container').nailthumb();
});
//Code Ends
This will create thumbnail of 150 x 150. This plugin provides many options to create thumbnails like Crop to Fit, with Animation, Show image title with thumbnail and many more...
Feel free to contact me for any help related to jQuery, I will gladly help you.

Provide date format hint using jQuery UI DatePicker

Provide date format hint using jQuery UI DatePicker
jQuery UI Datepicker seems to be rocking because of the functionality and options for customization it comes with. If you are using DatePicker and the input textbox is not read only then user can enter the date via keyboard without selecting from the jQuery DatePicker And that's a good option. So in this post, I will show you that how to tell users that what date format you are expecting.

The jQuery UI DatePicker provides an option called "appendText", which just append the text of the control to which it is bind. So you can use this property to set the date format and which will appear next to the textbox.
//Code Starts
$(document).ready(function() {
  $('#txtDate').datepicker({
    appendText: '(mm/dd/yyyy)'
  });
});
//Code Ends
See result below.



If you are using HTML5, then you can use power of HTML5 to set the hint. The beauty of this will be that it will be displayed as watermark in the textbox. And this has nothing to do with jQuery UI Datepicker, its power of HTML5.
//Code Starts
$(document).ready(function() {
    $('#txtDate').attr("placeholder", "mm/dd/yyyy").datepicker();
});
//Code Ends
See result below.



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

Don't use jQuery.size() to count number of elements

Don't use jQuery.size() to count number of elements
Here is a small quick tip for you that "Don't use jQuery.size() to count number of elements". Well jQuery provides .size() method, which returns number of element in the object. That means that you can count the number of elements within an object. For example, if you want to count total number of div elements on the page then you can use below jQuery code, which uses size() method.
//Code Starts
$(document).ready(function(){ 
 var divCount = $("div").size();
 alert(divCount);
}​);​
//Code Ends
But it is not preferred to use the size() method as jQuery provide .length property and which does the same thing. But the .length property is preferred because it does not have the overhead of a function call. So the best way is,
//Code Starts
$(document).ready(function(){ 
 var divCount = $("div").length;
 alert(divCount);
}​);​
//Code Ends
Also read "jQuery Performance tips & tricks"

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

Create book flip effect with jQuery

Book Flip effect like turning pages of the books is quite popular and people used to do using Flash. But now, you can have book flip effect using jQuery. You can implement this book flip effect using a plugin called "Booklet". "Booklet.js" is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.


Also read "How to create page flip effect using jQuery"

You can place any sort of html elements inside of your booklet pages. There is no limit to the possibilities you can create. Even using simple options, you can have elaborate displays.

Features:

  • Manual Page Turning
  • Keyboard Navigation (use your arrows)
  • Page Numbers
  • Shadows (during animation)

First a DEMO:


Just take the mouse on the page number and drag it like you turning the page. You can also use keyboard arrow keys to turn the page.



How to use it:

First load jQuery and jQuery UI Library.
//Code Starts
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"
type="text/javascript"></script>
//Code Ends
After that add reference of jQuery easing plugin. It is not completely necessary, if not included your animations will not look as nice.
//Code Starts
<script src="http://builtbywill.com/code/booklet/src/jquery.easing.1.3.js"
type="text/javascript"></script>
//Code Ends
After that download the booklet plugin and add it's reference of js and CSS both.
//Code Starts
<script src="booklet/jquery.booklet.latest.min.js"
type="text/javascript"></script>

<link href="booklet/jquery.booklet.latest.css" type="text/css" 
rel="stylesheet" media="screen, projection, tv"></link>
//Code Ends
To create a booklet you must first place the content for the book onto your page.
  • Make an outside container and give it an identifier like an ID or Class.
  • Add a with class "b-load" inside the container. Inside of "b-load", add your pages. 
  • The booklet will recognize each direct child of "b-load" as a slide, which could contain content or be a single item.
The following shows a simple four page book.
//Code Starts
<div id='magazine'>
  <div class='b-load'> 
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
  </div>
</div>
//Code Ends
And finally call the booklet function to initialize booklet.
//Code Starts
$(document).ready(function(){
  $('#magazine').booklet();
});​
//Code Ends
There are many options/events available with this plugin which you can use to customize it. Click here to find out all the available options with this plugin.
Official website : Booklet

Also read "How to create page flip effect using jQuery"

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

Common utility methods of jQuery

Common utility methods of jQuery
jQuery provides several inbuilt utility methods. These utility methods uses $.namespace and they are very useful and handy for your routine programming tasks. I have put together some common jQuery Utility methods to make your programming routine easy and can save your valuable time.

  • $.isArray(Object): Returns true if the object is an array.
    //Code Starts
    var arrFirst = [50, 22, 10, 19, 22, 10];
    var isArray = $.isArray(arrFirst);
    //Code Ends
    
  • $.isEmptyObject(Object): Returns true if the object doesn’t define any methods or properties.
    //Code Starts
    var arrFirst = [50, 22, 10, 19, 22, 10];
    var isObject = $.isEmptyObject(arrFirst);
    //In this case, isObject will be false.
    //Code Ends
    
  • $.isFunction(Object): Returns true if the object is a function.
    //Code Starts
    function myFunc() {
      //function code
    }
    var isFunction = $.isFunction(myFunc);
    //Code Ends
    
  • $.isNumeric(Object): Returns true if the object is a number.
    //Code Starts
    var num = 1;
    var isNumeric = $.isNumeric(num);
    //Code Ends
    
    Read "jQuery.isNumeric in jQuery 1.7"

  • $.isWindow(Object): Returns true if the object is a Window. This method accepts an argument and determines whether the argument is a window. This is used in a number of places in jQuery to determine if we're operating against a browser window (such as the current window or an iframe).This returns true is object is window, otherwise false.
    //Code Starts
    $(document).ready(function(){
       alert($.isWindow(window));
       var isFrame = $("#objFrm");
       alert($.isWindow(isFrame));
    });
    //Code Ends
    
    Here objFrm is defined as an iframe.
  • $.isXMLDoc(Object): Returns true if the object is an XML document. Check to see if a DOM node is within an XML document (or is an XML document).
    //Code Starts
    $(document).ready(function(){
      $.isXMLDoc(document) // false
      $.isXMLDoc(document.body) // false
    });
    //Code Ends
    
  • $.type(Object): Returns the built-in JavaScript type for the object.
    //Code Starts
    $(document).ready(function(){
       var iVal = 12;
       $.type(iVal); //number
       iVal = 'jQuery';
       $.type(iVal); //string
    });
    //Code Ends
    
    Below is the list of types which can be returned by this method based on the value.
    • boolean
    • number
    • string
    • function
    • array
    • date
    • regexp
    • null
    • undefined
    • object
  • $.trim(Object): This method removes white spaces from beginning and end of the string.
    //Code Starts
    $(document).ready(function(){
     var str = '     jquery by example       ';
        str = $.trim(str);
    });
    //Code Ends
    
Please bookmark this article and make a practice to use these method as they can save your time.

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

Correct way to find out table row count with jQuery

Yesterday, I got into an interesting problem. There was an HTML table on my page and it was having 20 rows. When I was trying to get the count of no. of rows using .children() method but it was always giving me count as 1. For a while, I was wondering what is happening but after sometime got the reason.

First let me show you what is happening. Let's say there is a HTML table with 3 rows. See the below HTML code.
//Code Starts
<table id='tblData' border='1'>
  <tr>
    <td> Cell 1 </td>
  </tr>
  <tr>
    <td> Cell 2 </td>
  </tr>
  <tr>
    <td> Cell 3 </td>
  </tr>
</table>
//Code Ends
When you use below jQuery code to find out children of table, then it will alert as 1. And don't worry there is nothing wrong with the code.
//Code Starts
$(document).ready(function(){
  alert($('#tblData').children().length);
});
//Code Ends
See result below.



I was wondering that what could be the reason. Why it is giving me count as 1, instead of 3. But I finally find out the reason. If you use the below jQuery code, then you will get the tr(table row) count as 3.
//Code Starts
$(document).ready(function(){
  alert($('#tblData').children().children.length);
});
//Code Ends
Well, the reason is that the way DOM parse the elements. If it doesn't find the <tbody> tag for table, then it adds <tbody> tag to the table and that's why count is returned was 1. But when you use $('#tblData').children().children.length), then you are actually telling jQuery to use path (table > tbody > tr).

See below screenshot of DOM. It's adds tbody tag.


See result below.



The above code works, but it is not efficient. The better way is.
//Code Starts
  var child = $('#tblData tbody').children().length;
//Code Ends
OR
//Code Starts
  var child = $('#tblData tr').length;
//Code Ends
Because in both the codes, we are defining selector efficiently and telling jQuery explicitly to look into specified part of the page, which is much faster.

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

Updated ASP.NET GridView Tips and Tricks with jQuery

Updated ASP.NET GridView Tips and Tricks with jQuery

How to access particular cell in gridview using jQuery

How to access particular cell in gridview using jQuery
You might be knowing that GridView is rendered as table > th > tr > td format. Below jQuery code allows to select first cell or td of every row (tr) in GridView. I have used "eq()" selector to select particular cell.

Also read GridView Tips and Tricks using jQuery
//Code Starts
$(document).ready(function() {
   $("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
      var cell = $(this).find("td:eq(0)");
      alert(cell.html());
   });
});
//Code Ends
With ":eq()" selector you can pass the index of element to select. The ":eq()" selector selects an element with a specific index number. The index numbers start at 0, so the first element will have the index number 0 (not 1). So if you want to select 2nd column then use :eq(1) as the selector.

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

How to filter GridView records using jQuery

Yesterday, I got into a situation where I need to filter the rows/records of the ASP.NET GridView on client side. When I say filter, that means depending on some condition just show only those records which satisfies the condition. And I implemented the same using jQuery so thought of sharing with you.

Problem:

First take a look at below image.


As you can see from image, that there is a GridView control populated with data and above that there are link buttons for each alphabet along with "All" button. So the problem was, based on the clicked button filter the data from GridView on "ProductName" column. For example, if "H" is clicked, only those products should be visible whose name starts with "H".


And if there are no records that satisfies the condition, then display no records message.


Note: Following controls are placed on the page.
  • A GridView
  • A Label control which has "No records to display" message.
  • And separate link button for each alphabet and one link button for "All".

Solution:

To implement this feature the solution is,
  • When DOM is ready then hide the Label control.
  • Attach click event for Link buttons. I have assigned a class "links" to all link button. So using class selector, we can attach the click event.
  • Get the text of the clicked button.
  • Now loop through all the gridviews rows and find td with Product Name.
  • Check if the text of td starts with cliked button's text.
  • If yes, then don't hide the row. Otherwise, hide the row.

But we also need to handle the "All" button code and when there are no records then show the label control. The code is very much self explanatory.
//Code Starts
$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');

    $('.links').click(function(e)
    {
        $('#<%=lblNoRecords.ClientID%>').css('display','none'); 

        var lnkText = $(this).text().toLowerCase();
        var iCounter = 0;

        $("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
            var cell = $(this).find("td:eq(1)").text().toLowerCase();
            if(lnkText != 'all')
            {
                if(cell.indexOf(lnkText) != 0)
                {
                    $(this).css('display','none');
                }
                else
                {
                    $(this).css('display','');
                    iCounter++;
                }    
            }
            else
            {
                $(this).css('display','');
                iCounter++;
            }
        });

        if(iCounter == 0)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','');
        }
        e.preventDefault();
    });
});
//Code Ends
Also read GridView Tips and Tricks using jQuery

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

How to crop image using jQuery

You must have seen on various social media sites, where after uploading the images they allow to crop image. It is a must feature these days on social media sites. Believe me, Image management like uploading, re-sizing and Image cropping is really a tough task. But there is a jQuery plugin which allows to crop images using jQuery without any trouble.

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.


It's been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility (or the weeks of coding, testing and debugging). Jcrop also features clean, well-organized code that works well across most modern web browsers.

Feature Overview

  • Attaches unobtrusively to any image
  • Supports aspect ratio locking
  • Supports minSize/maxSize setting
  • Callbacks for selection done, or while moving
  • Keyboard support for nudging selection
  • API features to create interactivity, including animation
  • Support for CSS styling
  • New: Experimental touch support (iOS, Android, etc)

Cross-platform Compatibility

  • Firefox 2+
  • Safari 3+
  • Opera 9.5+
  • Google Chrome 0.2+
  • Internet Explorer 6+

How to use it

First download the plugin and include the reference of the required libraries.
//Code Starts
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
//Code Ends
Place an image on the page.
//Code Starts
<img src="pool.jpg" id="target" />
//Code Ends
Call below jQuery code for cropping the image for basic functionalities.
//Code Starts
<script language="Javascript">
    jQuery(function($) {
        $('#target').Jcrop();
    });
</script>
//Code Ends
This plugin also provide various events to handle and various options that can be used to alter appearance and behavior.

Event Handlers

Jcrop's two primary event handlers are onChange and onSelect.

onSelect : It is callback function called when selection is completed.
onChange : It is callback function called when the selection is moving

Jcrop has a sense of state, whether there is an active selection or not. To detect when the interface is released, there is also a handler for these events:

onRelease: It is callback function called when the selection is released.
Feel free to contact me for any help related to jQuery, I will gladly help you.

Show/Hide li tag elements using jQuery

<ol>,<ul> and <li> html tags are very commonly used tags. But have you faced a situation, where depending on any condition, show some li elements and hide rest or vice versa? In this post, I will show you how to show/hide li tag element based on any criteria or condition using jQuery.


Problem:

Let's consider that there are 2 list, First is an ordered list and second is an unordered list. The ordered list has alphabets and unordered list has name of countries. And on click of particular alphabet (from ordered list), show/hide the country names from the unordered list. To understand the problem, see the html below.
<ol id="alphabet">
  <li><a class="letter" href="#">A</a></li>
  <li><a class="letter" href="#">B</a></li>
  <li><a class="letter" href="#">C</a></li>
  <li><a class="letter" href="#">D</a></li>
</ol>
<br/>
<ul id="names">
  <li>Australia</li>
  <li>Bulgaria</li>
  <li>Denmark</li>
</ul>​
So when "A" is clicked, only "Australia" should be visible and when "B" is clicked then only "Bulgaria" should be visible. Got the idea?

Solution:


Okay, to implement this feature below is the solution.
  • First hide the "names" list (List of countries).
  • After that write a click event on "a letter" tag, which gets called when any alphabet is clicked.
  • Inside the click event, first fetch the text of clicked alphabet.
  • After that loop through all the li element of "names" list.
  • Inside the loop, check if the first letter of li element text starts with the clicked alphabet. This can be done using indexOf method. If the index is 0 then that is the element which we want to show, otherwise hide.
So putting it all together, below is the complete jQuery code.
//Code Starts
$(document).ready(function(){
   $("#names li").hide();
   $("a.letter").click(function(){
     var letter = $(this).html();
     $("#names li").each(function(){
     var liText = $(this).text();
     if(liText.indexOf(letter) == 0)   
         $(this).show();
     else
        $(this).hide();           
    });      
 });
});​
//Code Ends
See result below.



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

Use jQuery.getScript to load external js files

Use jQuery.getScript to load external js files
jQuery provides a function called "getScript", which allows to load external Javascript or js file on the fly. The advantage of using $.getScript is that it loads the content on run time, which is far better than including <script> tag in your head section. jQuery getScript load a JavaScript file from the server using a GET HTTP request, then execute it. The syntax of $.getScript is,
//Code Starts
$.getScript('url', callback function(){
 //call the function here....
});
//Code Ends
  • url : A string containing the URL to which the request is sent. It will be URL of your js file.
  • callback function : A callback function that is executed if the request succeeds.
For example,
//Code Starts
$.getScript('js/jsPlugin.js',function(){
   Demo(); //This function is placed in jsPlugin.js
});
//Code Ends
This is a shorthand Ajax function, which is equivalent to
//Code Starts
$.ajax({
  url: url,
  dataType: "script",
  success: success
});
//Code Ends
But do you know what happens internally? When loading external js file using .getScript method, what it does it that it appends a timestamp with every request. So the request may look like,
<script src="/js/jsPlugin.js?_=ts2499874935">
instead of,
<script src="/js/jsPlugin.js">
So what it does by appending timestamp is, it tells the browser to get a fresh copy of js file every time. In other words, it disables the cache or it doesn't allow browser to cache the js file. Which can be great sometimes but not always.

What if you want to cache the script, so that it doesn't download every time from the server.

Well, there are 2 ways. First is, before making call to $.getScript method, you can set the cache true for ajax request and set it to false once script is loaded.
//Code Starts

//Set Cache to true.
$.ajaxSetup({ cache: true });
$.getScript(urlhere, function(){
  //call the function here....
  //Set cache to false.
  $.ajaxSetup({ cache: false });
});
//Code Ends

Second solution is to modify the default implementation of $.getScript to allow cache. The default implementation of $.getScript is,
//Code Starts
$.getScript = function(url, callback){
  $.ajax({
    type: "GET",
    url: url,
    success: callback,
    dataType: "script"
  });
};
//Code Ends
All you need to do is to add a boolean parameter, which will set the cache attribute to true or false. That's the beauty of jQuery that you can redefine things the way you need.
//Code Starts
$.getScript = function(url, callback, cache){
  $.ajax({
    type: "GET",
    url: url,
    success: callback,
    dataType: "script",
    cache: cache
  });
};
//Code Ends
So,now you call the $.getScript like, (notice the 3rd argument)
//Code Starts
$.getScript('js/jsPlugin.js',function(){
   Demo(); //This function is placed in jsPlugin.js
}, true);
//Code Ends
Don't worry, it will not break your existing code as if jQuery doesn't find the 3rd parameter then it will assign undefined or no to this attribute.

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

Show tooltip on images using jQuery

Tooltip is a very nice feature and it is used for input controls but it would be a nice feature to show tooltip on images/photos to describe the picture and it would make picture more interactive. For example, there is a photo of hotel and you want to show tooltip on various parts of hotel to describe the hotel like rooms, swimming pool, gym etc.

iPicture is a jQuery plugin which allows you to place tooltips on picture. iPicture is a jQuery Plugin to create interactive pictures with extra descriptions. This plugin is easy to configure, easy to customize and easy to integrate.


iPicture needs few configuration to make your pictures interactive. First step consists in writing html code containing the pictures. iPicture supports both lists and divs to display the images. This choice makes iPicture compatible with most of the slideshow plugin.
//Code Starts
<div id="iPicture">
  <div id="picture1" style="background: url('images/image1.jpg')"></div>
  <div id="picture2" style="background: url('images/image2.jpg')"></div>
  <div id="picture3" style="background: url('images/image3.jpg')"></div>
  <div id="picture4" style="background: url('images/image4.jpg')"></div>
</div>
//Code Ends
And jQuery code,
//Code Starts
$(document).ready(function(){
  $( "#iPicture" ).iPicture({
    pictures: ["picture1","picture2","picture3","picture4"],
    moreInfos:{
     "picture1":[
       {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
       {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"}],
      }
     "picture2":[
       {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
       {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
     }
  });
});
//Code Ends
You can check various demo of iPicture plugin created by the author.
Official website.

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

Strip or remove all white spaces using jQuery

Strip or remove all white spaces using jQuery
jQuery provides a function "trim" which removes the starting and trailing white spaces but the space (/s) within the string are maintained. So if you want to strip or remove all white spaces using jQuery then you can't use trim function. Then what is the solution? Well, You can use regex to find out the white spaces in string and then replace the white space(s). See the code.
//Code Starts
$(document).ready(function(){
    var strVal = '    jQuery By Example     ';
    var iLength = strVal.length;
    $('#spnBefore').html('Length of string is ' + iLength + '');
    strVal = strVal.replace(/ /g,'');
    iLength = strVal.length;
    $('#spnAfter').html('Length of string is ' + iLength + '');
});​
//Code Ends
The regex is using "g" character which means to repeat the search through the entire string.

See result below.



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

jQuery Youtube plugins

In this post, I will take you through some plugins developed in jQuery which allows to integrate YouTube videos in your page. And we will also see jQuery YouTube thumbnail plugin which allows to create thumbnail of YouTube videos using jQuery. Also read my already posted articles on jQuery YouTube topic.
Okay, So let's see some of the jQuery YouTube plugins.


TubePlayer Plugin


This jQuery plugin makes use of YouTube API and provides most of the function that is required. Along with the SWFObjects, this plugin takes advantage of HTML5 where possible. A new attribute iframed can be set to true or false depending on whether the iframe player should be prioritized. SWFObject is not strictly a requirement anymore, however TubePlayer has been created such that if the browser does not support HTML5 video, the flash player will be used instead. This plugin allows following functionalities,
  • Play: the player & a specific video
  • Pause the player
  • Stop the player
  • Seek to a particular point within a video
  • Mute and Unmute the player & learn if the player is muted
  • Get and set the volume of the player
  • Get and set the video quality
  • Destroy the player
  • Friendly functions for player state changes --
    • onPlayerUnstarted
    • onPlayerEnded
    • onPlayerPlaying
    • onPlayerPaused
    • onPlayerBuffering
    • onPlayerCued

Popup Player Plugin


This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won't assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.

You can easily configure YouTube video settings from the configuration options which are an extension of YouTube Embedded Player Parameters, letting you to customize your own video size and player setting. Videos are embedded through the new iframe embed code style which supports both Flash and HTML5 players.

YouTube Chromeless Video Plugin


A jQuery plugin to hook into the YouTube Chromeless Video API. The functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look.

//Code Starts
<a href="http://www.youtube.com/watch?v=sxUjB3Q04rQ" class="video">Bolt Arms</a>

//jQuery code is
$(document).ready(function() {
  $('a.video').ytchromeless();
});

//Code Ends
It is important that the URL to your video is formatted like the example above because the plugin grabs the video ID out of the URL, and then replaces the link with a video player.

Here are all of the options with their defaults:
  • videoWidth : '640'
  • videoHeight : '360'
  • videoIdBase : 'ytplayer'
  • params : { allowScriptAccess: 'always', wmode: 'transparent' }

jYouTube - jQuery YouTube Thumbnail Plugin


This plugin takes any YouTube video URL or video ID as first parameter and thumbnail size (big or small) as the second parameter and returns that video’s screenshot URL.
//Code Starts
// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');
// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.

How to populate ASP.NET DropDownList using jQuery and Ajax

How to populate ASP.NET DropDownList using jQuery and Ajax
ASP.NET DropdownList is a common control and now days with jQuery and Ajax technologies asynchronous request makes a better user experience. In this post, you will see that how to populate ASP.NET DropDownList using jQuery and Ajax by making an asynchronous request.

First, we need to create a WebMethod in your code behind to get the data from the server. This WebMethod will be called through ajax using jQuery. This WebMethod should have your logic to get the data (It can be from database or some file as per your requirement). For demo purpose, I have used static data to fill an ArrayList with the list of languages as its list items.
//Code Starts
[WebMethod()]
public static ArrayList GetLanguageList()
{
    ArrayList lstArrLanguage = new ArrayList();
    lstArrLanguage.Add(new ListItem("C#", "C#"));
    lstArrLanguage.Add(new ListItem("Java", "Java"));
    lstArrLanguage.Add(new ListItem("PHP", "PHP"));
    lstArrLanguage.Add(new ListItem("VB.NET", "VB.NET"));
    lstArrLanguage.Add(new ListItem("JavaScript", "JavaScript"));
    lstArrLanguage.Add(new ListItem("jQuery", "jQuery"));
    return lstArrLanguage;
}
//Code Ends
Now, one need to call this function using jQuery and ajax. To make ajax call using jQuery, jQuery provides a function called "$.ajax()" which can be used to perform asynchronous HTTP request. This function takes URL to call and some settings options. You can read more about "$.ajax()" function and it's setting options here.

Okay, now let's see the jQuery code to call above defined WebMethod using $.ajax().
//Code Starts
$(document).ready(function() {
  $.ajax({
     type: "POST",
     url: "Default.aspx/GetLanguageList",
     data: '',
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
       $("#ddlLanguage").empty().append($("").val("[-]").html("Please select"));
       $.each(msg.d, function() {
          $("#ddlLanguage").append($("").val(this['Value']).html(this['Text']));
       });
     },
     error: function() {
      alert("An error has occurred during processing your request.");
     }
  });
});
//Code Ends
As you can see from above jQuery code, I have set some settings of $.ajax() function. Let's see what each setting is.
  • type: This setting defines the type of method call (Get or Post). The default is GET. You should use GET when you want to retrieve something from the server. Use Post, when you are posting something to the server or if your call involve some database manipulation then type should be Post.
  • url: A string containing the URL to which the request is sent.
  • data: This defines if your function is expecting any argument,then you can pass using this setting. Or if you want to send some data to server then you can use this option.
  • contentType: When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases. If you explicitly pass in a content-type to $.ajax() then it'll always be sent to the server (even if no data is sent). Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side.
  • dataType: The type of data that you're expecting back from the server. It can be xml, json, script, or html.
  • success: This event handler is called when ajax request gets completed successfully. In this event, you can process the data returned by the server. As you can see from the above code,  every item gets added in the dropdownlist.
  • error: This event handler is called when some error occurred while processing ajax request. You can use this to catch the error and show some message to end user.
Feel free to contact me for any help related to jQuery, I will gladly help you.