Highlight first day of every month in jQuery UI Datepicker

Author : jquerybyexample      Blog : jQuery By Example      Date : 5/16/2013 5:10:00 AM

'With continuation of jQuery UI Datepicker series articles, here is another post which gives solution to highlight very first day of each month in jQuery UI Datepicker control. First, define a CSS class to show highlighted effect. .firstDay a{ background-color : #00FF00 !important; background-image :none !important; color: #000 !important; } And use "beforeShowDay" event provided with jQuery UI Datepicker control which gets called before building the control. This e(...)'

Read full article

jQuery library file size over the years

Author : jquerybyexample      Blog : jQuery By Example      Date : 5/13/2013 5:10:00 AM

'The first version of jQuery library was released on August 26, 2006 and after that there was no looking back. In last 6 years, jQuery has come a long way and now we have jQuery 2.0, which was released recently. Yesterday, I was going through the history of jQuery and realized how jQuery has steadily kept increasing in size. But this is natural as new functionality is added and lot of effort goes to make it better. But, it was interesting enough for me to find out how much the fil(...)'

Read full article

Remove related videos from YouTube videos using jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 5/2/2013 5:10:00 AM

'You must have notice that YouTube shows related videos link at the end of playback. This is sometimes quite annoying when you have embedded a video specific to your website and other related videos come up. So in this post, find jQuery code to remove related video shown at the end of playback. Related Post: jQuery code to fetch thumbnail of YouTube video jQuery YouTube plugins Set YouTube video as background using jQuery To remove related video, all you need to do is to (...)'

Read full article

Split an image into strips using jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/30/2013 5:10:00 AM

'In this post, find out about a jQuery plugin that gives your images a bit of WOW! Yes, this jQuery plugins allows to split the image into any number of strips. PicStrips adds a little style to your images to help them stand out from the crowd. You can split your images into any number of strips, specify the white space between each strip and also the amount of vertical white space added at the top and bottom of alternate strips. Related Post: 5 Superb jQuery Image Gallery (...)'

Read full article

Show only Month and Year in only one jQuery UI DatePicker in case of Multiple DatePicker

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/29/2013 5:50:00 AM

'In one of my previous post, I had posted about Show only Month and Year in jQuery UI DatePicker, but there was an issue with the code explained in that particular post. The issue was that it was applicable for all the datepickers present on the page and it is quite possible to have such behavior for one datepicker and rest of the datepickers control should work their default functionality. Related Post: Show only Month and Year in jQuery UI DatePicker Hide/ Disable Dates in j(...)'

Read full article

What's new in jQuery 2.0

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/19/2013 6:18:00 AM

'You asked for it, you got it: jQuery 2.0 has arrived! Oh Yes!! jQuery 2.0 is finally released and this version leaves behind the older Internet Explorer 6, 7, and 8 browsers. jQuery 2.0 is intended for the modern web. But don’t worry, the jQuery team still supports the 1.x branch which does run on IE 6/7/8. If you're upgrading from a version before 1.9, we recommend that you use the jQuery Migrate plugin. Related Post: How to migrate older jQuery code to jQuery 1.9+ All you ne(...)'

Read full article

Direct vs Delegated Events with jQuery on() method

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/18/2013 5:10:00 AM

'jQuery added a new method called  on()  in release 1.7 which provides all functionality for attaching event handlers. And it has made other event handler event like live() and delegate() dead. This method was introduced due to performance issue with live() method. Related Post: jQuery Name-spacing with on() and off() method empty() vs remove() vs detach() - jQuery jQuery - bind() vs live() vs delegate() There are 2 signaturs of  on()  method. (...)'

Read full article

Calculate difference/sum of label values using jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/17/2013 5:10:00 AM

'In this post, find jQuery code to calculate difference in label/span values. To fetch the label/span value don't use .val() or .text() method, Instead use .html() method. Related Post: Highlight label associated with text box using jQuery Difference between jQuery text() and html() functions Set innerText using jQuery $(document).ready(function () { var nCost = $('#spnCost').html(); var nSellingPrice = $('#spnSellingPrice').html(); var nProfit = parseFloat(nSel(...)'

Read full article

Fetch Picasa or Google Plus photos using jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/16/2013 5:10:00 AM

'In this post, I am going to share a jQuery plugin called "Pimax" which allows you to fetch photos from Google+ or Picasa account. Pimax displays a photo gallery from your Picasa/G+ albums. The Public albums are pulled from your account and displayed on your website. You can add a public album or add some images to your G+ account; it will be reflected on your website with this plugin! Related Post: Fetch photos from Picasa using jQuery Fetch photos from Flickr using jQuery T(...)'

Read full article

7 jQuery WebSite Tour Plugins

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/15/2013 5:35:00 AM

'In this post, find a complied list of 7 Awesome, stylish, easy and eye catching jQuery plugins to create Website Tour, interactive help, guide or providing instructions. These plugins can be used to guide users about website or demo of any product. These plugins are easy to use, stylish and customizable and by incorporating them you can provide awesome experience to your users. Related Post: 5 Free jQuery Full Screen Calendar Plugins 6 Best jQuery layout plugin 5 jQuery 360 D(...)'

Read full article

jQuery to display/load images received from JSON file

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/12/2013 5:10:00 AM

'Today, I needed to display images received from a JSON file. The JSON file has only the path of the images. So in this post, find jQuery code to display or load images received from JSON file. Related Post: How to Read and Parse JSON using jQuery jQuery- Parse JSON, XML and HTML Read and Process XML using jQuery Ajax Consider, below is the JSON file content. It has products list with name and its image path. { "products": [ { "name": "Levis Blue Denim(...)'

Read full article

Restrict Date Range in jQuery UI DatePicker for two dates

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/10/2013 5:10:00 AM

'In this post, you will learn how to implement validation to "Restrict Date Range in jQuery UI DatePicker" or "End Date should be greater than Start Date by few days using jQuery Date Picker". When I say few days, which means end date must be at least StartDate + 4 or StartDate + 2.. The number can be anything depending on your requirement. Related Post: End Date should not be less than Start Date using jQuery Date Picker Few Interesting things with jQuery UI DatePicker setDat(...)'

Read full article

Disable odd checkbox of Checkbox list using jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/9/2013 5:10:00 AM

'In this post, find jQuery code to disable all the odd checkboxes in Checkbox list. When I say "odd" means checkebox placed at odd index. This can be done easily via ":odd " selector. But there is an interesting thing here. Take a look at below image. Now as per this image the odd checkboxes are those which are placed at odd location (1, 3 and 5) like "jQuery, Prototype and MooTools". But in case of checkbox list, the index is 0 based. So first checkbox has index 0 and second ha(...)'

Read full article

Delay jQuery animation by few seconds

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/8/2013 6:10:00 AM

'I got into a situation where I needed to start the animation after 2 seconds once the mouse is on the image. In other words, need to delay the animation for 2 seconds on mouseover event. So in this post I am sharing the jQuery solution to delay the animation by few seconds. Related Post: jQuery.fx.interval Property How to disable jQuery animation 8 jQuery Loading Animation and Progress Bar Plugin To delay execution of animation, use .delay() method which allows to delay(...)'

Read full article

jQuery to limit number of checkboxes checked by User

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/5/2013 5:10:00 AM

'Many time we need to limit the selection of checkboxes users can select or in other words users are not allowed to select more than a number of checkbox to give their choice. For example, out of all client side script language, user can select maximum three where he is best. Related Post: Check if Checkbox is checked using jQuery Validate HTML CheckboxList using jQuery Check/Uncheck All Checkboxes with JQuery As for example, take a look at below HTML checkboxlist. <inpu(...)'

Read full article

Difference between $('div') and $('

') in jQuery

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/4/2013 5:10:00 AM

'One of my colleague who is learning jQuery asked me what is the difference between $('div') and $('<div/>') , if used as selector. To explain more, take a look at below code. $('<div/>').addClass('test'); $('div').addClass('test'); It is indeed quite confusing for someone who just started learning jQuery. So I went ahead and explained him about how they are different. Related Post: Learn how to use jQuery? Common jQuery Mistakes jQuery: Difference between eq(...)'

Read full article

jQuery to highlight when empty or no data

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/3/2013 5:10:00 AM

'Yesterday for one of my requirement, I need to highlight all the <td> element of the table, if they are empty or contains no data. To implement this, define a CSS class called "highlight". .highlight { background-color:PaleGoldenrod; } Based on your choice, modify the CSS class. And using jQuery, loop through every <td> and check if it is empty. If yes, then add "highlight" class to it. $(document).ready(function () { $("table td").each(function () { (...)'

Read full article

jQuery: Difference between eq() and get()

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/2/2013 5:15:00 AM

'In this post, find out what is the difference between jQuery  eq() and  get() method. Both the methods are used to find and select single element from set of elements and they both return single "element". And they both accept single int type parameter, which denotes index. Related Post: Difference between $(this) and 'this' in jQuery empty() vs remove() vs detach() - jQuery jQuery - bind() vs live() vs delegate() For example, take a look at below HTML. There is(...)'

Read full article

jQuery: Get row and column index of a GridView Cell

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/1/2013 7:10:00 AM

'In this post, Find jQuery code to get Row Index and Column Index of ASP.NET GridView Cell on click or on mouseover event. Related Post: How to access particular cell in gridview using jQuery Get ASP.NET GridView Cell Value on Click using jQuery How to loop through all grid view rows using jQuery To get the row and column index, attach mouseenter event to all tr and td of ASP.NET GridView. And using jQuery closest() find count of all the previous respective element. $(docum(...)'

Read full article

Cool jQuery Plugins of March 2013

Author : jquerybyexample      Blog : jQuery By Example      Date : 4/1/2013 5:00:00 AM

'Today we bring a list of latest jQuery plugins released in March 2013. These jQuery plugins are really interesting and have functionality like lightbox, flexible layout, making dropdown pretty, creating side menus, 360 degree view of elements and many more.. Enjoy.. Spoiler Alert Don't spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. Swipebox Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Photoset Grid A simple (...)'

Read full article