After spending lot’s  of time, i got result in josn format in kohana. I want to fetch all records of last 3 minutes of comment table and it will display on my site after check is record already show on browser or not.

As we know kohana is MVC framework so we need to handle controller as well as model.

//Model

In model first i write query to fetch records from database which is under a function get_last_three_minutes_comments.

public function get_last_three_minutes_comments($id){

$query = $this->db->query(“SELECT u.user_name, gs.* from comments as gs INNER JOIN users as u on gs.`user_id`=u.`user_id` WHERE DATE_SUB( now( ) , INTERVAL 3 MINUTE ) < gs.speak_date and gs.group_id=$id ORDER BY id DESC”);
return $query->result_array();
}

//Controller

I call this model file from controller by write below code.

public function get_last_three_minutes_comments($page_id){
$data =    $this->comment->get_last_three_minutes_comments($page_id); // i have already made a object in constructor for comment table.

// As we know model return data in mixture of array and object and for json we need data only in array format. so here i manipulate data and convert into array format.

$arr = array();
$id=0;
foreach($data as $id => $rec){
$arr[$id] = array(‘id’=>$rec->id,’user_name’=>$rec->user_name,’speak’=>$rec->speak,’speak_time’=>$rec->speak_date);
$id++;
}

//Now we change value in json format using json_encode function and return to JavaScript file by echo command.

echo json_encode(array(‘comment_data’=>$arr));
}

Javascript file

//In jquery we use $.ajax function to get data from server by using ajax. $.ajax gets some parameter such as dataType which may be get, post, json as our requirement. I use json because i need to handle data in json format. Second parameter is url. url tell to server which page will be called. third one is success. When all server processing is completed then it return data in success which i get in mycomment variable.

$.ajax({
dataType: ‘json’,
url:url_main+”widgets/get_runtime_comment/”+tabid[1],
success:function(mycomment){

// In controller i make a array which name is comment_data. Now i access data of json by name of javascript variable in which holds all data then after write array name of php then after call by array index. such as call to user_name field we are below line

mycomment.comment_data[0].user_name;

mycomment is javascript variable name, comment_data is php array and user_name is index name of that array.

len = mycomment.comment_data.length; // here i get total number of records for run a loop.
i=0;
while(i<len){
cmid = mycomment.comment_data[i].id; // here i get id of current record.
comt = $(‘#tabs-’+tabid[1]).children().find(‘.commentbox’).find(‘#’+cmid).html(); // Check whether this record is exist or not in current div.

//if i get blank then it will added into that particular div else ignore it.
if(comt==null){
dt = ‘<div id=”‘+mycomment.comment_data[i].id+’>’+mycomment.comment_data[i].speak+’<br>By: – ‘+mycomment.comment_data[i].user_name+’ on ‘+mycomment.comment_data[i].speak_time+’</div>’;
$(‘#tabs-’+tabid[1]).children().find(‘.commentbox’).find(‘._group_comments’).prepend(dt);
}
i++;
}

}
});

I hope you will learn lot’s of thing from this article.

(function ($) {

$(document).ready(function () {

$(‘*’).bind(‘mousemove keydown scroll’, function () {

clearTimeout(idleTimer);

if (idleState == true) {

// Reactivated event
$(“body”).append(“

Welcome Back.

“);
}

idleState = false;

idleTimer = setTimeout(function () {

// Idle Event
$(“body”).append(“

You’ve been idle for ” + idleWait/1000 + ” seconds.

“);

idleState = true; }, idleWait);
});

$(“body”).trigger(“mousemove”);

});
}) (jQuery)

What is jquery?
A example is more worth than 100 words

how many lines of code you might need to achieve this?

Answer: Only four lines and that too without knowing any regular expressions….. Yes. Using a library called jquery and its validate plugin. Code is shown below.

Below are some good design examples of what you can achieve using jquery.
If you have came across any nice implementation of Jquery, let me know through comments. I will like to update my list.

• Example 1 :Slide tabbed box
Visit SiteDownload Code
• Example 2 : Expanding menu like Apple site
Visit SiteDownload Code
• Example 3 : Zoom image
Visit SiteDownload Code
• Example 4 : Sliding boxes and captions to image
Visit SiteDownload Code
• Example 5 : Sliding image behind menu
Visit SiteDownload Code
• Example 6 : Image tab
Visit SiteDownload Code

* This example does not work correctly in IE7

• Example 7 : Menu Fade
Visit SiteDownload Code
• Example 8 : Slider Menu


Visit SiteDownload Code
• Example 9 : Tabs
Visit SiteDownload Code
• Example 10 : Tabbed Menu
Visit SiteDownload Code

2. Superfish Menus – Suckerfish on ‘roids, This jQuery plugin allows the development of improved Suckerfish style of dropdown menus from the existing pure CSS type of dropdown menu. The features that are added as a result of these include: a timed-delay on mouseout, automatic utilization of hoverIntent plugin when present; obligatory IE6 –hover capability; animated sub-menu; accessibility through keyboard tab key; generation of arrows to indicate the submenus; use of drop shadows for browsers that are capable; and many others.

3. jQuery Context Menu – This jQuery plugin provides easy implementation, CSS styling, keyboard shortcuts and control methods.

4. Kwicks for jQuery – This highly versatile and customizable widget had started as just a port for Mootools framework.

5. jQuery iPod-style Drilldown Menu – jQuery has an iPod-style drilldown menu that helps users traverse hierarchical data with relative ease and control. This feature is very useful in organizing large data structures that don’t translate well into the traditional fly-out or dropdown menus.

6. jQuery File Tree – This jQuery plugin is a configurable AJAX file-browser plugin where you use to create a fully interactive and customized file tree as little as one of the Javascript code.

7. Recreate Mootools Home Page-Inspired Navigation Effect – Users of jQuery can recreate the same effects that you see in a Mootools.

8. CSS Sprites2 using jQuery – One can use jQuery to implement CSS Sprites2. One distinct advantage of jQuery over the other javascript libraries is that it allows users to select elements on a pages using CSS-like syntax that we are already familiar with.

9. jQuery Accordion – It is the jQuery plugin that allows the creation of the accordion menu. It can be used for nested lists, nested divs and definition lists. This plugin has options for structure specification, active element, when necessary, and animation customization.

IMAGE MANIPULATION

10. jQZoom – It is the jQuery plugin that easily allows the creation a small magnifier window near an image or group of images on the web page. You decide to build jQZoom to embed big images in your B2B. This creates the jQZoom in your eCommerce websites or any other websites.

11. jCrop – This jQuery plugin allows an easy and quick way of adding image-cropping functionality to web application. This functionality combines the use of typical plug in with a powerful cross-platform DHTML cropping engine that is compatible to common desktop graphics applications.

12. Captify 1.1.0 – It is a jQuery plugin that creates short and beautiful image captions that appear every time a user’s mouse passes over an image.

IMAGE GALLERIES AND VIEWERS

13. Simple Controls Gallery – This jQuery tools displays and rotates images by fading it into view over the previous images using navigation controls that pop up when the mouse moves over the gallery.

14. Agile Carousel – It is a jQuery plugin that provides for the easy creation of a custom carousel. This plugin makes use of PHP to call images from the folder that is specified by the user. Users can configure different options including slide timer length, controls, transition type, easing type and more.

TRANSITION EFFECTS

15. InnerFade – It is a small jQuery plugin used in the jQuery Javasrcipt Library. This plugin allows using fade effects on any element found within a container in and out. The elements may include divs, list items or images. In order to do this, you have to create your own slideshow and the produce a newsticker or an animation.

16. Easing Plugin – It is the jQuery plugin that comes from GSGD that provides advanced easing options. This plugin can support a default easing mode. This allows you to set your preferred animation once for all animations. It uses the Robert Penners easing equations for all the transitions.

17. HighlightFade – It is a jQuery plugin that allows the use of fading effects from one color to any other pre-selected colors at any transition speed and interval of color update using a color progression tactic that is customizable.

18. JQuery Cycle Plugin – It is a jQuery plugin that is classified as basic slideshow plugin. It is based on the Slideshow plugin by Matt Oakes, jqShuffle plugin by Benjamin Sterling and the InnerFade plugin by Torsten Baldes. This plugin can do auto-stop, before and after callbacks, pause-on-hover, and many other transition effects.

jQUERY CAROUSEL

19. Riding Carousels using jQuery – It is the jQuery plugin used for controlling items in a list in vertical or horizontal order. The list of items can be loaded with or without AJAX, or can be a static HTML content. It can be scrolled in either direction with or without animation effects.

COLOR PICKER

20. Farbtastic – It is a jQuery plugin that allows you to add more color picker widgets in a page using Javascript. These widgets are linked to an element and will update the value of that element when one particular color is picked.

21. jQuery Color Picker – It is a jQuery plugin that allows you to select color in a way that is almost the same as you pick colors in Adobe Photoshop. This jQuery plugin is a Flat mode element in a page and is easy to customize the look by simply changing the images. It also has powerful controls used for selecting the colors and fits easily into the viewport.

LIGHTBOX

22. jQuery ThickBox – It is a jQuery plugin that is created using the jQuery library. The function of this jQuery plugin is to resize images that are bigger than the browser window and provides versatility in inline content, images, AJAX content and iFramed content. It will remain at the center of the window even if you change the size of the browser window or you scroll the pages.

23. SimpleModal Demos – It is a jQuery plugin defined as lightweight plugin that creates a basic interface to provide a modal dialog. This jQuery plugin shall give developers a cross-browser overlay and a container that will contain data provided to SimpleModal

24. jQuery LightBox Plugin – It is a jQuery plugin that provide an option to present an image on a page in a simple and elegant manner. Under this jQuery plugin, the lightboxes can be assembled in one group and provides many options for configurations. It also provides both the manual and automatic options to create and to start lightboxes.

25. Revealing Photo Slider – This tool of jQuery allows to create a thumbnail photo gallery where clicking a button would reveal the entire photo and other information about the photo.

26. FancyBox – This jQuery tool automatically scales large images to fit in windows by adding a nice drop-shadow under the zoomed item. This tool can be used to group items that are related and add navigation between them. It is totally customizable through CSS and settings.

27. Facebox Image and Content Viewer – It is a lightweight plugin that displays images, divs and remote pages, through AJAX, inline on a page and on demand.

28. jQuery.popeye – It is a jQuery plugin that converts an unordered list of images into a simple image gallery. When an image is clicked, it enlarges just like with LightBox.

FORM ELEMENTS AND VALIDATION

29. jQuery Form Validation – It is a jQuery plugin that is fast, unobtrusive, scalable and easy to use validation plug in that offers a variety of methods for all types of validation needs. It comes from the very basic to the more complex schemes of validation.

30. Ajax Form Validation – This refers to the client aspect of validation using Javascript. The username will perform the validation by checking with the server whether a chosen username is available and valid.

31. jQuery AlphaNumeric – It is a jQuery plugin that uses javascript to allow you to control what characters a user can use and enter on text areas and text boxes.

32. jQuery.combobox – It is a jQuery plugin that provides a simple way of producing an HTML type of combobox from the existing HTML Select tags. This plug in was created to provide the solution on the limitation in styling of standard Select tag.

33. jQuery Checkbox – It is a jQuery plugin that creates a replacement for the standard checkbox. This plugin allows you to modify the look of the elements of the checkbox in the page.

34. File Style Plugin – It is a jQuery plugin that solves your problem with browsers that does let you style file inputs. This jQuery plugin also allows you to style filename field to normal textfield by using css.

35. Radio Button and Check Box Replacement – This tool of jQuery replaces the check boxes and radio buttons with a more attractive display.

36. Submit a Form Without Page Refresh – By using jQuery, you not only can add form validation to wordpress comments without any page reload but also submit your form without a page refresh.

37. jQuery AJAX Contact Form – Users of jQuery can make an AJAX contact form with a “honeypot” to foil email bots, load success and error messages without leaving the page and provides descriptive error messages detailing the reasons for the failed validation of the submitted value.

38. jQuery Form Validation – This form of jQuery can show form-input validators both the browser-side and server-side

STAR RATING

39. Simple Star Rating System – It is a jQuery plugin used for star rating system. This jQuery system was created with the basic framework of the star rating system of Wil Stuckey. This jQuery plugin provides the solution on the problem of the original script requiring too much coding. It also did away with the requirement for developing a star system.

40. Half Star Rating Plugin – It is a jQuery plugin that was developed in response to the clamor for an enhancement of the simple rating system of Ritesh Agrawal and allow for the use of half-star rating system.

TABLE PLUGINS

41. Table Sorter Plugin – It is a jQuery plugin that is used to turn a standard HTML table with TBODY and THEAD tags into a table which is sortable without resorting to page refreshes. This jQuery plugin can effectively sort and parse multiple data including data in a cell that are linked.

42. Autoscroll Plugin for jQuery – It is a jQuery plugin that provides for hotspot scrolling of webpages. This jQuery plugin will still work even with earlier versions of jQuery.

43. Scrollable HTML Table Plugin – It is a jQuery plugin that is used to convert HTML tables into scrollable tables. This jQuery plugin solution does not require any additional coding.

44. Table Row CheckBox Toggle – This jQuery tool adds a toggle function to any table row that you specify based on a CSS class name. This tool will toggle on by default any check boxes within that table row.

45. Tablesorter – This is a jQuery plugin that allows you to turn a standard HTML table with <td> and <th> tags to a sortable table without refreshing the page. This plugin can successfully parse and sort many kinds of data in a cell.

46. TableEditor – This tool allows flexible in-place editing of HTML tables. Users can easily drop handler functions to update.

ROUNDED CORNERS

47. jQuery Curvy Corners – It is a jQuery plugin that allows for the creation of nice looking rounded corners without the use of images. It is a jQuery plugin considered to be unobtrusive and can work well with all major browsers which include iPhone. Another nice feature about this jQuery plugin is that the corners to be rounded and its radius can be set easily.

OTHER JQUERY PLUGINS

48. HeatColor Plugin – It is a jQuery plugin that provides color to elements and determined by a value derived from that element. This derived value comes from a range of value which are either pre-designated or passed in. The element is then assigned a “heat” color which is derived from the position of the value within the range of values.

49. jQuery Date Picker – It is a jQuery plugin that is considered unobtrusive and clean. It adds date-entry functionality to web forms and pages. It was created from the basics up in order to attain flexibility and extensibility. It has varied options of use that allow you to all a calendar widgets to web pages and forms.

DYNAMIC CONTENT

50. Create a Log-in Form with jQuery – One can create a sliding panel that slides in to reveal new content and animate the height of the panel through jQuery.

51. Spoiler Revealer with jQuery – This is a technique in jQuery that can hide and reveal content with animation effect once it is clicked.

52. AJAX Upload – It is a jQuery plugin that provides for easy uploading of multiple files without having to refresh the page. This plugin also allows the use of any element to trigger the file selection window.

53. FCBKcomplete – jQuery also provides users with Facebook-like dynamic inputs along pre-added and auto-complete values.

54. Create Accessible Charts Using jQuery and Canvas – Users of jQuery can use the <canvas> element to illustrate HTML table data. This technique makes data in a table accessible and while the chart is being shown for visual improvement.

MANIPULATING CONTENT

55. jQuery Books Widget – One can use jQuery with some custom Javascript to create interesting widgets like a browsable Amazon.com books widget.

56. Text Size Slider – Users of jQuery can control the text size of an article on a page using a slider. This feature of jQuery allows the user to control exactly the size they prefer and is a very impressive feature to have on a site.

57. Pagination – Users of jQuery can group large numbers of items into pages and present navigational elements that allow users to move easily from one page to another.

58. Coda-Slider – This jQuery tool also groups items together through navigational elements that allow users to traverse the pages.

59. Slick Auto-Playing Featured-Content Slider – This jQuery plugin allows users to cycle through panels and auto-playing different kinds of custom content. It features an arrow indicator to guide users on which panel he is currently viewing.

BROWSER TWEAKS

60. Setting Equal Heights with Query – Through jQuery, users can utilize a script that can equalize the box heights within the same container to create a tidy grid.

61. jQuery IE6 PNG Transparency Fix – This is a bug fix that uses jQuery selectors to automatically fix all PNG images in a page.

62. BGI Frame – This jQuery tool helps users in dealing with IE z-index issues.

63. Fix Overflow – This jQuery bug fix solves the issue on the scroll bar covering overflowing elements when the element is only one line.

64. Lazy Load – This tool can delay the loading of images below the fold on long pages, loading the images only when the user scrolls down on that part of the page.

65. Maxlength – This jQuery plugin automatically limits the number of characters a user can input in a field and giving feedback on how many spaces are remaining.

ANIMATION EFFECTS

66. Scrollable – It is a lightweight and flexible jQuery plug-in used to create a scrollable content. It can contain any HTML, including images, forms, text, video or a combination of any of them.

67. Fading Menu-Replacing Content – This jQuery tool lets users to utilize animation and change the way to style a page on-the-fly to react to events that happen on your page.

68. Build an Animated Cartoon Robot with jQuery – jQuery is able to provide an animation effect that simulates a faux 3-D animated background just like what are seen on scrolling video games.

TOP jQUERY TIPS

69. Prevent Animation Queue Build-up – Through jQuery, this natural queuing of animations is easy to code and user can move on to other important tasks

70. Rotate Through Tabbed Content – Through this functionality of jQuery, the movement is more likely to catch the user’s eyes, thus increasing the chances they will notice the tabbed box and allow the user to see all the content of the box instead of just the first tab.

71. Stopping the Rotation – This technique allows users to stop the rotating of tabs and stop it from switching when you are interacting with them. The technique involves some editing a couple of lines from the document ready function.

72. Build a Tabbed Content with CSS and jQuery – This technique outlines the steps required to easily customize to fit the size and color scheme, use fixed or variable height, automatically rotate through the tabs and stop the rotation when the user needs to.

73. Advanced CSS Accordion Effect – This technique is improved by the use of Javascript and all browsers will handle this technique even without JS enabled.

74. Consistent Base Font Size – This is the best jQuery technique to gain control over your font sizes until IE finally support the resizing of text in pixels.

75. Maintain Consistent Margins – This jQuery technique enables users to remove the margin and padding from every element instead of CSS resets.

76. Set a Float to Clear a Float – This jQuery is one of the most important things to understand with CSS. However, it is also important to learn how to clear floats.

77. Image Replacement – This image replacement technique involves the positioning an image over the top of the HTML. One feature of this technique is that even when images are disabled, the text is still visible.

78. Faux Columns – This technique allows 2 adjacent columns with unequal amounts of content to have 1px tall background image being repeated vertically in the containing element of the 2 columns.

79. Animate a Hover with jQuery – This technique allows users to animate an image while hovering over it and allow users to see information while doing that

80. Background Image Animation Using jQuery – This technique involves producing animation effects by changing the position of the background image.

81. Animated Menu using jQuery – This technique involves the use of animated menu using CSS, XHTML and javascript.

82. Create an Animated Navigation with CSS and jQuery – This technique provides for the creation of a cool navigation enhanced with animation effect and visual feedback.

83.Load in and Animate Content with jQuery – This technique uses AJAX functionality so that the content loads into the relevant container instead of having to navigate to another page.

84. Implementing Prototype’s Array Methods in jQuery – This technique gives a particular array all the methods that Prototype adds to their Array and Enumerable objects.

85. 43,439 Reasons to Use Append() Correctly – This technique provides for the proper way of using this jQuery method. Although an extremely easy and useful method to work with, it can significantly affect the performance of the page.

86. Collapsible Content Using jQuery – This technique provides the steps in having the content collapsible through simple jQuery codes.

87. Minimize Manipulation of DOM – We can further make the code faster if we cut down on the frequency that we insert into the DOM. Insertion operations of DOM will make things slow down.

88. Give context to your selectors – When you use the selector, the entire DOM will be traversed as a result of the action. This can be a very expensive process.

jQUERY TUTORIALS

89. How jQuery Works – This is a featured tutorial on jQuery by John Resig, the creator of jQuery. This is an ideal basic tutorial for those who are starting to learn jQuery for the first time.

90. jQuery in 15 Days – This is a 15 day tutorial that turns you from a greenhorn to an expert in 15 days.

91. Bassistance – This tutorial covers the basics of jQuery up to the more advanced topic like building plugins.

92. Remy Sharp’s Blog – He has written numerous tutorials and plugins and he is also the person responsible for the very helpful jQueryForDesigners website which also provides useful tutorials in answer to request of readers.

93. CSS Tricks – This reference site is full of examples, tips, tricks, tutorials and news about cascading style sheets (CSS).

94. jQuery Cheat Sheets – It provides to aspects of cheat sheets. These are: those made for iPod and other mobile devices; and those with the A4 cheat sheet.

95. How to Build jQuery Plugins – One can try any of the following tutorials: A Plugin Development Pattern; Developing a jQuery Plugin; and Building your First jQuery Plugin.

96. jQuery Pop-up Menu Tutorial – This is a tutorial material that focuses on pop-up link menu.

97. The jSkinny on jQuery – It is a tutorial that covers jQuery javascript library.

98. How to Get Anything You Want – This is an introductory tutorial on traversal methods and jQuery selectors and their use in DOM navigation

99. It’s all about CSS – As the title suggests, this tutorial is all about CSS selectors. Once you learn from this tutorial, you can now easily query the DOM.

100. jQuery Crash Course – This tutorial is designed for web designers with advanced knowledge of codes.

1. Introduction to jQuery
   jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
2. Downloading and installing jQuery
   In this section we will download and install jQuery for developing our demo application. jQuery comes as single js file.
3. Server time Example
   In this first jQuery tutorial we will develop a simple program that retrieves the current time from server and displays on the user browser.
4. jQuery Load Content
   In this section you will learn how to load content of a text file using jQuery and show it on the use browser.
5. jQuery to Vertical Image Scroller
   In this first jQuery tutorial we will develop a  program that vertical image scroller
6. jQuery Toggle the Div
   In this JQuery tutorial we will develop a program that toggle the content of a Div
   
7. jQuery to text changes with fading effect
   In this first jQuery tutorial we will develop a  program that  text Changes with fading effect.
8. jQuery to text changes with sliding effect
   In this first jQuery tutorial we will develop a  program that  text Changes with sliding effect.
9. jQuery Drop Down Menu
   In this JQuery tutorial we will develop a program  to make Drop Down menu
   
10. jQuery chain-able  state of transition
    In this JQuery tutorial we will develop a program that changing the state of transition of box moving
    
11. jQuery To Simple tabs
    In this JQuery tutorial we will develop a program  to make simple tabs
    
12. jQuery to Simple Image Scroller
    In this first jQuery tutorial we will develop a  program that simple  image scroller
13. jQuery To Slide Effects  tabs
    In this JQuery tutorial we will develop a program  to make Custom  tabs
    
14. jQuery to Show Data Randomly
    In this first jQuery tutorial we will develop a simple program that Show Data Randomly  from server and displays on the user browser. In this example we will be calling a server side PHP script to get the Random Data.
15. jQuery to Post Data Check
    In this first jQuery tutorial we will develop a simple program that checking the data Post to server and displays on the user browser. In this example we will be calling a server side PHP script .
16. jQuery to Image Changes With Sliding Effect
    In this first jQuery tutorial we will develop a  program that  images Changes with sliding effect.
17. jQuery to Image Magnifier
    In this first jQuery tutorial we will develop a  program that  Image magnifier.
18. jQuery to Image Changes With Fading Effect
    In this first jQuery tutorial we will develop a  program that  images Changes with fading effect.
19. jQuery to “Hello World”
    In this  jQuery tutorial we will develop a simple program that print the Hello World  from server and displays on the user browser. In this example we will be calling a server side PHP script to get the “text”.
20. jQuery To Fade Effects  tabs
    In this JQuery tutorial we will develop a program  to make Fade Effect  tabs
    
21. jQuery to validate Email Address
    In this  jQuery tutorial we will develop a  program that validate the email address  from server and displays on the user browser. In this example we will be calling a server side PHP script to get the “result”.
22. jQuery To Hide the Div
    In this JQuery tutorial we will develop a program that Hide of a Div
    
23. jQuery To Custom tabs
    In this JQuery tutorial we will develop a program  to make Custom  tabs
    
24. jQuery to Select Multiple CheckBox
    In this first jQuery tutorial we will develop a simple program that retrieves the value of selected checkbox from server and displays on the user browser. In this example we will be calling a server side PHP script .
25. jQuery To callback tabs
    In this JQuery tutorial we will develop a program  to calling function on Tab
    
26. jQuery to Auto Image Scroller
    In this first jQuery tutorial we will develop a  program that auto image scroller
27. No Max-height Fixed
    In this JQuery tutorial we will develop a program that Auto generate of a Textarea with minimum fixed height but no max height fixed.
28. With Fixed Max-Height
    In this JQuery tutorial we will develop a program that Auto generate of  textarea  with fixed Max-Height.

* This post is regularly updated. *

Many of us have been using a good deal of jQuery plugins lately. Below I have provided a list of the 50 favorite plugins many developers use. Some of these you may have already seen, others might be new to you.  This is just the first series , the second version will be coming soon, stay tuned and Enjoy!

Menu

1) LavaLamp

2) jQuery Collapse -A plugin for jQuery to collapse content of div container.

3) A Navigation Menu- Unordered List with anchors and nested lists, also demonstrates how to add a second level list.

4) SuckerFish Style

Tabs

5) jQuery UI Tabs / Tabs 3 – Simple jQuery based tab-navigation

6) TabContainer Theme – JQuery style fade animation that runs as the user navigates between selected tabs.

Accordion

7 ) jQuery Accordion

Demo

Simple JQuery Accordion menu

SlideShows

9) jQZoom- allows you to realize a small magnifier window close to the image or images on your web page easily.

10) Image/Photo Gallery Viewer- allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.

Transition Effects

11) InnerFade – It’s designed to fade you any element inside a container in and out.

12) Easing Plugin- A jQuery plugin from GSGD to give advanced easing options. Uses Robert Penners easing equations for the transitions

13) Highlight Fade

14) jQuery Cycle Plugin- have very intersting transition effects like image cross-fading and cycling.

jQuery Carousel

15) Riding carousels with jQuery – is a jQuery plugin for controlling a list of items in horizontal or vertical order.

Demo :

Color Picker

16) Farbtastic – is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript.

Demo :

17) jQuery Color Picker

LightBox

18) jQuery ThickBox – is a webpage user interface dialog widget written in JavaScript.

Demo :

19) SimpleModal Demos – its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :

20) jQuery lightBox Plugin – simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

Demo :

iframe

21) JQuery iFrame Plugin – If javascript is turned off, it will just show a link to the content. Here is the code in action…

Form Validation

22) Validation – A fairly comprehensive set of form validation rules. The plugin also dynamically creates IDs and ties them to labels when they are missing.

Demo :

23) Ajax Form Validation – Client side validation in a form using jQuery. The username will check with the server whether the chosen name is a) valid and b) available.

Demo :

24) jQuery AlphaNumeric – Allows you to prevent your users from entering certain characters inside the form fields.

Form Elements

25) jquery.Combobox – is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

26) jQuery Checkbox – Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

27) File Style Plugin for jQuery -File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

Star Rating

28) Simple Star Rating System

29)Half-Star Rating Plugin

ToolTips

30) Tooltip Plugin Examples – A fancy tooltip with some custom positioning, a tooltip with an extra class for nice shadows, and some extra content. You can find a demo here.

31) The jQuery Tooltip

Tables Plugins

32) Zebra Tables Demo -using jQuery to do zebra striping and row hovering, very NICE!!

Demo :

33) Table Sorter Plugin - for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. It can successfully parse and sort many types of data including linked data in a cell.

34) AutoScroll for jQuery -allows for hotspot scrolling of web pages

35) Scrollable HTML table plugin- used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary.

Demo :

Draggable Droppables And Selectables

36) Sortables - You won’t believe how easy this code to make it easy to sort several lists, mix and match the lists, and send the information to a database.

37) Draggables and droppables- A good example of using jQuery plugin iDrop to drag and drop tree view nodes.

Style Switcher

38) Switch stylesheets with jQuery- allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet. A Demo is here.

Rounded Corners

39) jQuery Corner Demo

40) JQuery Curvy Corners- A plugin for rounded corners with smooth, anti-aliased corners.

Must See jQuery Examples

41) jQuery Air – A passenger management interface for charter flights. A great Tutorial that you will enjoy.

Demo :

42) HeatColor -allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, it can find the min and max values of the desired elements, or you can pass them in manually.

Demo :

43) Simple jQuery Examples -This page contains a growing set of Query powered script examples in “pagemod” format. The code that is displayed when clicking “Source” is exactly the same Javascript code that powers each example. Feel free to save a copy of this page and use the example.

44) Date Picker -A flexible unobtrusive calendar component for jQuery.

Demo :

45) ScrollTo -A plugin for jQuery to scroll to a certain object in the page

46) 3-Column Splitter Layout -this is a 3-column layout using nested splitters. The left and right columns are a semi-fixed width; the center column grows or shrinks. Page scroll bars have been removed since all the content is inside the splitter, and the splitter is anchored to the bottom of the window using an onresize event handler.

47) Pager jQuery -Neat little jQuery plugin for a a paginated effect.

48) Select box manipulation

49) Cookie Plugin for jQuery

50) JQuery BlockUI Plugin -lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

This entry was posted on Thursday, December 20th, 2007 at 6:55 am and is filed under jQuery.You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.^[2] jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.

Microsoft and Nokia have announced plans to bundle jQuery on their platforms,^[3] Microsoft adopting it initially within Visual Studio^[4] for use within Microsoft’s ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform.

The Seaside framework provides full integration of JQuery allowing to write web applications entirely in Smalltalk.

Features

jQuery contains the following features:

• DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project^[5]
• DOM traversal and modification (including support for CSS 1-3)
• Events
• CSS manipulation
• Effects and animations
• Ajax
• Extensibility through plugins
• Utilities – such as browser version and the each function.

[edit] Use

jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within a web page using the following mark-up:

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

jQuery can also be accessed, loaded, and run just as JavaScript has always been^[6]:

jQuery can also be loaded using the Google AJAX Libraries API with the following mark-up^[7]:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>

Microsoft hosted jQuery on its AJAX CDN (Content delivery network) making it easy to add the support for jQuery library. CDN serves JavaScript libraries from one of thousands of geo-located edge-cache servers around the world hosted by Microsoft.

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

jQuery has two styles of interaction:

• via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable; they each return the jQuery object
• via $.-prefixed functions. These are utility functions which do not work on the jQuery object per se.

A typical workflow for manipulation of multiple DOM nodes begins with the $ function being called with a CSS selector string, which results in the jQuery object referencing zero or more elements in the HTML page. This node set can be manipulated by applying instance methods to the jQuery object, or the nodes themselves can be manipulated. For example:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

…finds the union of all div tags with class attribute test and all p tags with CSS class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.

The methods prefixed with $. are convenience methods or affect global properties and behaviour. For example, the following is an example of the map function called each in jQuery:

$.each([1,2,3], function() {
  document.write(this + 1);
});

… writes the numbers 234 to the document.

It is possible to perform browser-independent Ajax queries using $.ajax and associated methods to load and manipulate remote data.

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

… will request some.php from the server with parameters name=John and location=Boston and when the request is finished successfully, the success function will be called to alert the user.

[edit] Release history