Monday, April 30, 2012

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.
Read more...

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.
Read more...

Thursday, April 26, 2012

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.
Read more...

Wednesday, April 25, 2012

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.
Read more...

Tuesday, April 24, 2012

Make your image looks like Lake using jQuery

Well, you must be wondering what the post title "Make your images look like lakes using jQuery" says and what does it mean. I was also finding it difficult to how does I put this in words. But you will understand the meaning of the title, once you take a look at below images.
I am sure that now you have got the idea, what I am trying to say. And these are not gif images. The First image looks like this.

So how to provide such effect to the images? Lake.js is a jQuery plugin which allows you to provide such effects.

How to use it?


Put an image on your page.
//Code Starts
<img id="lake-img" src="lake.png" style="display: none;"/>
​//Code Ends
Download the plugin and add reference of jQuery library and lake.js library. And call .lake() function on the image.
//Code Starts
$(document).ready(function() {
    $('#lake-img').lake();
});
​//Code Ends
Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. The new canvas element will be the same width as the original image and double the height.

This plugin also provides some option to customize the waves.
  • Speed : makes the waves move faster or slower.
  • Scale : makes the waves higher or shallower.
  • Waves : creates more or less waves.
//Code Starts
$(document).ready(function() {
    $('#lake-img').lake({
    'speed': 1,
    'scale': 0.5,
    'waves': 10
  });
});
​//Code Ends
Frames are precomputed, lake.js will slow down page loads but will perform well on lots of devices.
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

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.
Read more...

Monday, April 23, 2012

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.
Read more...

Thursday, April 19, 2012

How to add fixed footer to your page using jQuery

Footer is a very important part of the page and it can be used to put important information about the website or the page. So in this post, I will explain you how to add fixed footer to your page using jQuery. To add fixed footer, there is a jQuery plugin called "jQuery Constant Footer" which adds fixed footer to the page.

The jQuery Constant Footer is a plugin that glues a footer to the bottom of the browser window. It also has an option to display articles from an RSS feed located on the same website (or loaded via a proxy on the same website).


Below is the code to use this plugin without any options,
//Code Starts
$("#footer").constantfooter();
//Code Ends

Options

  • classmodifier : Used to apply class names to the elements created by the plugin. You only need to specify a class modifier if you have a name-clash.
  • feed : The full web address of an RSS feed, which must be on the same domain (otherwise you'll hit cross-site-scripting issues).
  • feedlink : The text to be displayed on the feed links, for example "Read More"
  • opacity : Set this to a value less than "1" to make the footer semi-transparent, for example "0.8".
  • showclose : Set to "true" to show a button that closes the footer.
  • closebutton : Any HTML string to show on the close button, for example "close", "[x]" or '<img alt="Close" src="close.png" />'.

So the jQuery code with all options,
//Code Starts
$("#footer").constantfooter({
    "classmodifier": "constantfooter",
    "feedlink": "Read more »",
    "opacity": "0.8",
    "closebutton": "[x]",
    "feed": "http://feeds.feedburner.com/JqueryByExample",
    "showclose": "true"
});
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Wednesday, April 18, 2012

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.
Read more...

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.
Read more...

Tuesday, April 17, 2012

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.
Read more...

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.
Read more...

Monday, April 16, 2012

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 more...

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.
Read more...

Friday, April 13, 2012

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.
Read more...

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.
Read more...

Thursday, April 12, 2012

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.
Read more...

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.
Read more...

Wednesday, April 11, 2012

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.
Read more...

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.
Read more...

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.
Read more...

Tuesday, April 10, 2012

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.
Read more...

Updated ASP.NET GridView Tips and Tricks with jQuery

Read more...

Monday, April 9, 2012

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.
Read more...

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.
Read more...

Thursday, April 5, 2012

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.
Read more...

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.
Read more...

Wednesday, April 4, 2012

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.
Read more...

Tuesday, April 3, 2012

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.
Read more...

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.
Read more...

Monday, April 2, 2012

How to set Stylish Image Hover Effects using jQuery

How about having a feature on the images, which shows cool effects when someone takes mouse on the image? Well, you can set stylish effect on the image on mouse-over. Adipoli is a simple jQuery plugin used to bring stylish image hover effects. This plugin supports various types of effects and there are many options available, which you can use.


Available Options:
  • startEffect : Default style of image
  • hoverEffect : Image style on mouse over
  • imageOpacity : opacity of image considered when start effect is transparent or overlay
  • animSpeed : Animation speed for the effect
  • fillColor : Overlay color
  • textColor : Text Color
  • overlayText : Default HTML to be displayed on overlay
  • slices : Number of slices for slice animations
  • boxCols : Number of boxes in a row for box animations
  • boxRows : Number of rows for box animations
  • popOutMargin : Margin of Image popout
  • popOutShadow : Shadow length of popout image. Shadow works for those browsers which support text-shadow css.

Start Effects:
  • transparent
  • normal
  • overlay
  • grayscale

Hover Effects:
  • normal
  • popout
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpRandom
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • foldLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

How to use it:

Download the plugin and include the reference in your page and just call the function.
//Code Starts
 $('#image1').adipoli();
//Code Ends
If you want to play with various options then use below code,
//Code Starts
$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...