By Angel Wardriver

jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let’s take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.

Also consider our previous articles:

• 50 Useful JavaScript Tools which lists excellent tools to help you achieve various tasks involved in authoring JavaScript code.
• Data Visualization and Infographics Resources which lists more than 25 useful resources for infographics and data visualization.
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials which explains CSS sprites technique with jQuery.

jQuery Galleries and Slideshows

GalleryView jQuery Plugin
GalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. It comes with lots of many options for customization. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.

Jquery Plugin MopSlider 2.4
MopSlider is the slider box can contain any item that is set height and width. From 2.2, MopSlider can be put 2 in the page. A CSS file isn’t necessary.

jQuery Image Scroller
Making use of jQuery’s excellent animation features, this image scroller will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser compatible and perform as expected in the latest versions of all of the most common browsers. The tutorial helps build in some interaction by adding controls that allow the visitor to change the direction of the animation.

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my CSS) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Create Beautiful jQuery sliders tutorial
With this tutorial, you can develop a beautiful jQuery slider that has an added image description and name. The final result is a smooth and visually pleasing slideshow which could be easily integrated into any site.

Full Screen Image Gallery Using jQuery and Flickr
By using jQuery, this full screen image gallery automatically scales the image while using Flickr as the search engine. It comes with thumbnail preview, preloader, captions, and more. The results are extremely impressive.

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Galleriffic offers fantastic performance in delivering a high volume of photos. This is a useful jQuery plugin that will render fast photo galleries, while both impressing and improving your user’s experience.

jQuery plugin: Wilq32.RotateImage
This is the final product of a Wilq32.PhotoEffect Snippet. You can use this simple and tiny script to get an effect of rotated images directly from client side, such as user generated content, and then animate them using functions.

jQZoom Evolution
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

jQuery plugin: Tooltip
This jQuery plugin tooltip can help you use bodyHandler to display footnotes, an image with a tooltip, or block tooltip. Also is helps links to have no delay with tracking and fading, or with extra content with extra classes. It’s useful for different tooltip styles on a single page like an image map with tooltips and testing repositioning at viewport borders.

Charts and Graphs with jQuery

jqPlot Charts and Graphs for jQuery
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. It’s strongest feature is its pluggability. Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. The plot elements are customizable. The core jqPlot code allows custom event handlers, new plot types, and more.

JS Charts – Free JavaScript charts
JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.

moBlur.org – Google Charts GUI with jQuery
This jQuery is a basic frontend GUI to be used with Google’s charts API.

jQuery Text Effect Plugins

Airport – Information board text effect jQuery plugin
Airport is a rather simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometime find on airports and train stations.

Editable (jQuery Editable Plugin)
This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and …) to text input, password, textarea, or drop-down list. You can easily extend it by adding your own input type using its editableFactory object.

jQuery Plugins
Some of these plugins have been merged into jQuery core in one form or another. These include the ability to batch results into an array, a resolution for IE z-index issues, auto-expand text areas, dynamically create configurable gradient to the background without using images, implement the over label technique, live query and many more helpful plugins.

Jquery Elastic 1.2 Demo
This page contains a couple of demos of the Jquery plugin Elastic. Elastic makes your textarea change its height dynamically.

Stephane Caron – No Margin For Errors ¬ Pretty comments
Here’s a small jQuery plugin that allow textareas to stretch as content is put in. If the content goes over the defined height of the textarea, the textarea will grow as needed.

ToggleVal
ToggleVal gives you the option to populate the default text of form fields in a few different ways. It will then toggle the default value when the field receives and loses keyboard focus.

jQuery sIFR Plugin
The jQuery sIFR plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR) using the internal jQuery API.

jQuery Spoilers Plugin
Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site. The pages using this plugin to show “Spoilers!” text, but when you mouse over that text, "Spoilers” disappear and the underlying text is revealed. The intention is to keep the casual reader from inadvertently reading details which he might not want to know. By mousing over them, he can reveal the details.

jTruncate – Text Truncation for jQuery
jTruncate allows you to customize nearly every aspect of the truncation operation. It provides simple yet customizable truncation for text entities in your web page.

Further jQuery Resources

List of Useful jQuery Plugins: jQuery, JavaScript
This is a huge masterlist from the jQuery plugins in the jQuery plugins repository. These are some of the best and most practical. The truly exceptional plugins are marked with “EXCELLENT.”

Lazy – The on-demand jQuery plugin loader
This jQuery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all jQuery-plugins, that you might or might not need, Lazy downloads the plugins when you actually use them. The major difference between Lazy and it’s competitors is it’s size.

jQuery Callout Plugin
This jQuery Callout Plugin is based entirely on CSS, so no images are required like in the static text below. The rounded corners come courtesy of the excellent jQuery Rounded Corners plugin.

Guapo – jQuery copy plugin
We all know that in IE we can easily copy text to clipboard. It is, however, not such an easy in FX. This plugin uses a SWF file to achieve this; the SWF file’s default location is the same to the plugin. If you move it to another location, it changes in the plugin source code.

Moousture
Moosture is a mouse gesture library written solely in javascript with power and flexibility. Implemented on Mootools following the Object Oriented standards, the library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

Gritter for jQuery (Growl) (Demo)
A jQuery Growl look-a-like plugin, a notification bubble/popup that appears in the top right of your layout. Think of it as calling the alert() function in JavaScript, only it’s subtle and looks nice.

jGrowl – Unobtrusive Notification System for jQuery
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to see them easily. An even better idea is using the favicon.ico of the external site, if it is available of course.

Oursignal.com used jQuery plugins
OurSignal is a awesome visualization that displays the popular stories from Digg, Delicious, Reddit, Yahoo! Buzz and Hacker News in single page. Developed by Stateless Systems, it is nicely implemented with jQuery Plugins.

UI.Layout Plug-in
This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

  

By Paul Andrew

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands. The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article we’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable. For most of these items, we’ve listed a “demo” link, except when the demo is on the same page as the tutorial or article itself.

Horizontal Menu Navigation Plugins and Tutorials

Mega Drop Down Menu w/ CSS & jQuery | Demo
According to usability expert Jakob Nielsen, mega drop down menus tested to be more efficient for large-scale websites. In this tutorial, the author demonstrates his technique for creating a menu system that would be ideal for large or e-commerce web sites.

A Perfect Multi-Level Navigation Bar | Demo
In this tutorial, the author illustrates his method for implementing a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub-sections.

Use Sprites to Create a Navigation Menu | Demo
CSS sprites can dramatically increase a website’s performance, and with jQuery, we can easily implement awesome transition effects.

Tab Navigation with Smooth Horizontal Sliding
In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back.

droppy – Nested drop down menus
This is not the most flexible of plugins, but if you’re looking for a basic menu, it’s perfect.

jQuery Listmenu | Demo
This jQuery plugin allows you to easily convert a long, hard-to-navigate list into a compact, easy-to-skim first-letter-based menu system, allowing quick and out-of the-way access to hundreds of items.

Kwicks for jQuery | Demo
Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

Creating a Navigation Menu with CSS & jQuery
In this tutorial you’ll learn how to build a CSS navigation menu with a smooth scroll effect using jQuery and the scrollTo plugin.

Apple Style Menu | Demo
In this in-depth tutorial you’ll create an Apple-flavored Leopard-text-indented menu from scratch. First you’ll build the menu in Photoshop, then you’ll create the needed HTML and CSS, and finally improve it with jQuery.

Sexy Drop Down Menu w/ jQuery & CSS | Demo
Most drop-down menus may look aesthetically pleasing, but developing them to degrade gracefully is also essential. In this tutorial, the author shows you how to create a sexy drop-down menu that degrades gracefully.

Mega Drop-Down Menu with jQuery | Demo
The recommended hover time for a mega drop-down menu is 0.5 seconds, with a further 0.5 seconds delay when the user moves the mouse away. With these guidelines, the author demonstrates how to build a mega drop-down menu with usable time delays.

JQuery Pager | Demo
jQuery Pager is a simple JQuery plugin to provide paging functionality for data-driven web applications.

Simple jQuery Dropdowns | Demo
jQuery menus don’t have to be complicated; sometimes you may want to try something slightly different by making them as simple as possible. This menu plugin has stripped down code with minimal styling, yet still has all the functionality typically needed.

Smooth Animated Menu with jQuery | Demo
In this tutorial you’ll learn how to build a jQuery menu and animate it with some lovely and smooth effects, using the jQuery Easing plugin.

Stylish Navigation Menu With jQuery | Demo
In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.

Easy to Style jQuery Drop Down Menu | Demo
This tutorial will show you how to create a simple and easily-styled menu with hover mouse event and the most basic jQuery animation using slideUp and slideDown.

A Different Top Navigation | Demo
If you’re trying to make your website stand out, you might consider thinking outside the “norm” when it comes to navigation. In this tutorial, you’ll be doing precisely that, by creating a different multi-layered horizontal navigation system that’s still intuitive enough for anyone to use for the first time.

Vimeo-Like Top Navigation | Demo
If you’ve ever visited the Vimeo home page you may have noticed the menu that drops down when you hover over the search box, offering you different search options to narrow your search. You’ll learn how to recreate this effect in this tutorial.

jQuery'd Bread Crumb – jBreadCrumb
This collapsible breadcrumb jQuery plugin has been developed to deal with deeply-nested, verbosely-named pages. Rather than limit the amount of elements shown on the sever side, the developers opted to go with a client side solution for usability and SEO. It also turned out to be nice to look at and fun to play with.

idTabs
The marvelously-versatile idTabs plugin makes adding tabs to a website very simple and opens the door to endless navigation possibilities. The homepage of this plugin shows you not only how easy idTabs is to use and style, but also demonstrates many of the navigation options you’ll have at your disposal.

Keypress Navigation | Demo
With jQuery, your website’s navigation doesn’t have to be limited to mouse-based activation. In this highly-original experimental tutorial you’re shown how to let the user navigate your site using their keyboard.

Sliding jQuery Menu | Demo
In this tutorial you’ll learn how to create a sliding menu button, similar to the effect you can see in action over on the PSDtuts+ homepage. When the button is clicked it rolls out a box full of links, when the button is clicked again the box rolls back in.

Dropdown, iPod Drilldown, and Flyout Styles
This iPod-style menu plugin provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, by default a “Back” link appears below the menu to allow navigation to previous (parent) menus.

Flickr Menu Design | Demo
This is a simple step-by-step tutorial that shows you how to implement a Flickr-style menu with cool sliding effects using jQuery and CSS.

Fixed Fade Out Menu | Demo
The aim of this tutorial is to build a fixed navigation that follows the user when they scroll up or down, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. The navigation includes some links, a search box, and top and bottom buttons that let the user navigate to the top or bottom of the page.

mb.menu | Demo
mb.menu is a powerful jQuery component that helps you build an intuitive multi-level tree menu or contextual (right click) menu. You can add as many submenus as you want; if your sub-menu or menu is not declared in the page, the component will get it via Ajax, calling the template page with the id of the menu you need (the value of the “menu” attribute).

mcDropdown
The mcDropdown plugin is a UI control that lets users select from a complex hierarchical tree of options that allows for both mouse and keyboard entry. The overall effect of this plugin is somewhat similar to the Microsoft Windows “Start > All Programs” menu.

Vertical or Sidebar Plugins and Tutorials

Simple JQuery Accordion Menu | Demo
This is a very simple accordion menu plugin built with jQuery. The links with sub-items under them will expand the sub-menu when clicked and items that don’t have sub-items are normal links. The menu will initialize with the first expanded sub-menu.

Tabbed Structure Menu | Demo
This tutorial will show you how to build your own space-saving, tabbed interface using jQuery with slideDown/slideUp effect.

Fresh Content Accordion | Demo
In this tutorial you’ll earn how to build a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plugin for fancy effect.

Horizontal Scroll Menu | Demo
This tutorial teaches you how to create a horizontal scrolling menu that scrolls automatically according to your mouse axis-Y movement and uses the jQuery.color plugin to animate the background-color changes.

Create a Slick Tabbed Content Area using CSS & jQuery | Demo
In this tut you’ll learn how to build a simple little tabbed information box in HTML, then make it function using pure JavaScript, and finally you’ll learn a way to achieve the same effect using jQuery.

Slide Out and Drawer Effect | Demo
The Apple web site is a great demonstration of this effect in action where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool is that the drawers maintain a fixed height and slide between a restricted area.

“Outside the Box” Navigation with jQuery | Demo
This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

Sproing! – Thumbnail Menu | Demo
Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

Cool Animated Navigation | Demo
In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

jQuery File Tree | Demo
jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Creating a Floating HTML Menu Using jQuery and CSS | Demo
For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

BDC DrillDown Menu, an iPod-style menu | Demo
A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

jQuery Context Menu Plugin | Demo
The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

A ‘Mootools Homepage’ Inspired Navigation | Demo
This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.

jQuery UI Selectmenu
The jQuery UI Selectmenu plugin has been designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind and allows all native mouse and keyboard controls.

Beautiful Slide Out Navigation | Demo
In this tutorial you are shown how to create an amazing slide-out menu or navigation. The navigation will be almost hidden — the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website.

Optional Horizontal or Vertical Navigation

Smooth Navigational Menu
This menu’s contents can either be reached from either direct markup on the page, or an external file and fetched via Ajax. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Superfish – Suckerfish on 'roids | Demo
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following enhancements: Timed delay on mouseout, animation of sub-menu reveal, keyboard accessibility, drop shadows for capable browsers and much, much more.

(ll)

  

Networking has certainly become important to our daily life. Whether light-hearted interaction with friends or communicating with business clients the world over, socializing is integral to our personal and professional relationships. Facebook has gotten most of the buzz in the past few years, allowing members to easily stay connected with friends, family members and business associates.

Adding friends, sending messages, chatting, joining causes and networks for your institution or workplace, you can do it all here. Here, we’ll introduce you to 20 scripts that are typical for the Facebook user experience. Web designers and developers who want to integrate Facebook-like features into their websites and applications are in for a treat.

1. Post-To-Wall Application Using jQuery and PHP

A lot of information is made available on Facebook’s wall message board, including message content, users, senders, comments, dates, times and other relevant details. Though this may seem like complicated work, this tutorial by Antonio of woork.blogspot.com makes it easy for you to implement a similar post-to-wall feature on your own website. Use the few lines of Javascript and PHP code from the tutorial and watch your website flourish like never before. To make it easy for beginners, the tutorial deals with only one piece of information on the wall: the message content.

2. Lightbox

A lot of lightboxes are out there, but why not make the perfect one, like the one on Facebook? This great lightbox script was created by famspam. Writing code for even routine tasks can be cumbersome. But with the simplicity of JQuery, you can have a lightweight Facebook-style lightbox for your website. Capable of displaying DIVs, images and even entire remote pages, the lightbox creates pop-ups that are visually appealing and easy to use. You can get started here.

3. Auto-Suggest Search With jQuery

Automatically suggesting potential search results based on just a few letters entered by the user, this Facebook-style auto-suggest search engine is a true time- and effort-saver for users and enhances their experience of the website. For example, typing the letters “Fra” could bring up “France” or the user’s friend “Frank” as suggestions. This stylish search engine makes use of BSN Autosuggest libs and employs jQuery for the AJAX framework. Some of the features of this Facebook-style search are:

• AJAX and auto-suggest support;
• Renders support for search plug-ins;
• Provides support across different browsers (Firefox, IE 5.5 and above, Opera, Safari);
• Supports cache.

Download this Facebook-inspired auto-suggest search feature here.

4. Modal Box Using MooTools

Stylish, lightweight and subtle, Facebook’s modal box is the best and most coveted of all current modal boxes. This JavaScript creates modal dialogues and wizards — i.e. dialogue sequences — without resorting to conventional page reloads and pop-ups. These are also sometimes used to display large versions of small images. The tutorial here takes the CSS and imagery from Facebook and combines it with the amazing functionality of MooTools in order to create the Facebook effect.

5. Elastic Plug-In

A major hit on Facebook, this jQuery plug-in is now counted among the most functional UI effects on the Internet. This elastic plug-in automatically shrinks or expands text areas according to the amount of text inputted by the user. The weight of this plug-in is what gives it its edge over competitors. Now, you can recreate this impressive Facebook-style effect of an elastic text area by simply following this tutorial.

6.Tipsy Plug-In

Wondering how to make a relevant tooltip pop up as users move their cursor over the title attribute of an anchored tag? Facebook provides inspiration for this jQuery plug-in, and you can implement this cool tipsy plug-in on your own website now. Aside from being a neat trick, the plug-in is easy to configure and lightweight. Read the tutorial to learn how to incorporate the Tipsy plug-in on your website.

7. Activity Stream

This innovative plug-in for Movable Type 4.1 allows you to share, control and aggregate all of your activities around the Internet, along with several of your profiles from different services. The plug-in emulates the Facebook streams that adorn your wall. So, if you have a Movable Type blog and wish to exercise complete control of your activities on the ‘net, including showing or hiding certain activities, this tutorial on Facebook-like activity streams is sure to be a great help. To keep you from being locks in to any particular service, this plug-in can also publish your stream with the hAtom microformat and Atom.

8. Icons

Chatting with friends online is fun, but words are sometimes not enough to convey our feelings. Icons come in handy because they’re a cute, simple way to express emotion. Of course, saying “I love you” has a powerful effect, but an icon of a little heart pumping is so much more stylish. Facebook icons are a hit among users, and you can download 28 of them here, for free. They are available in SVG and high-resolution PNG format.

9. Sliders Using CSS And MooTools

Website developers are constantly looking out for great ideas with which to enhance their websites. The slider controls on Facebook have caught the eye of many professionals. To implement similar-looking sliders for your project, read the tutorial here. It explains how to create them and how to control the height, width and opacity of images. The credit for this easy three-slider tutorial goes to David Walsh, a successful Web developer in his own right. Hats off!

10. JBolo

Having to switch between two websites every few seconds — or even few minutes — can be annoying: for example, to chat with a friend on Gmail and browse photos on Facebook. With that in mind, Facebook took social networking to the next level when it integrated chat functionality. And now you can integrate a similar feature on your Joomla website using this tutorial. The distinctive name of this application is taken from the Hindi word “bolo,” which means to talk. So, get to work and let your visitors start talking!

11. Boxy

Styled like the dialogue box on Facebook, this flexible box supports size tweening and dragging. What distinguishes Boxy from several other overlays is the availability of an object interface to control dialogues after creating them. To make usage even simpler, it also provides you with a jQuery plugin that allows you to include forms and links automatically, along with the “Ask helper” to present the user with an array of choices. Read the tutorial to implement the Boxy dialogue box on your website.

12. Gmail- And Facebook-Style jQuery Chat

Everyone loves Facebook’s chat module. And this jQuery module lets you seamlessly integrate Gmail- and Facebook-style chat into your website. This chat script has many features, such as keeping chat boxes open and preserving a box’s state (and data) even when the page has been refreshed, just like on Facebook. Also, this chat is extremely simple to integrate. Learn more about this Facebook-style jQuery chat.

13. Alert Confirmation Box Using CSS And jQuery

It happens often enough that while performing a particular action, we lose focus and mess up the task. Alert confirmation boxes can be a great help here. In asking for your confirmation of an action, the box makes you think through your request before finalizing it. For instance, to remove a friend from your friend’s list on Facebook, you need to click on the “X” button, which brings up an alert confirmation box asking you, “Are you sure you want to delete so-and-so from your list?” You are given the option of “Yes” or “No,” which finalizes the action. Alert boxes can help visitors to your website complete important actions, such as deleting items from a shopping cart. This tutorial shows you how to make an alert confirmation box like the one seen on Facebook.

14. AJAX Pagination Using jQuery

Designing Facebook-style pagination to break up a long list of search results into several pages is no longer a difficult task. Though page numbers are not displayed at the top of Facebook, you are given the option at the end of the page to see more results. To create a similarly subtle yet helpful feature on your website, go through the tutorial here.

15. Cometchat

This is the best script for inline chat similar to the kind seen on Facebook. Get the script to give your visitors a chat environment to interact in while they browse your website. They can also update their status, like “Available,” “Busy,” etc. Facebook-style AJAXification ensures the feature does not reload every time a visitor clicks to another page. Hash URLs and notifications in the footer are some of the other features integrated in Cometchat.

16. Image Cropping

The crop tool hides unseemly parts of a photograph and brings focus to the subject. Facebook introduced such a tool that members can easily use before uploading and sharing their pictures. To achieve this nifty combination of Javascript and PHP, check out this amazing tutorial.

17. Input Box

Integrated with the auto-complete function, the input box on Facebook allows you to search for and send messages to your friends. To include a flexible Facebook-inspired input box for your website, just grab this MooTools 1.2-compatible script and get started.

18. Chat Room And Instant Messenger

Does the instant messenger and chat room on Facebook make you green with envy? Give your website the same with this Joomla module. Visitors can sign in to the messenger with their Facebook ID and password and use their friends list from Facebook. It really is as simple as that.

19. vBStatus (Status Display)

Isn’t it great that you can share what’s on your mind with all your friends in an instant, and vice versa. These status updates are one of the main features of Facebook. And below them is room for your friends’ comments and a option to “Like” your status. This feature is referred to as “vBStatus,” and you can include the same on your website by downloading it here. Users will have the flexibility to quickly change their status whenever they want using AJAX.

20. Facebox

Facebox is lightbox script that gives you the look of Facebook pop-up message windows. It can contain images, Flash movies, HTML and more. Facebox is a MooTools alternative to the original Facebox jQuery script. Read more about Facebox here.

(al)

  

Do you ever think "Ugh" when it is time to update or redesign your site? jQuery has a fantastic library of plugins and tutorials that can speed the benefits of developing your site while demanding less time and improving workflow constraints.

To present a better user experience, we often need to take good care of the little details like the functionality and interactivity of tables, forms, images or other media resources; excellent navigation and security is also a must. So here are 35 more useful jQuery resources covering those topics as well as many more. Hopefully, you’ll find them helpful for your next web project.

You may also want to consider our previous posts:

35 Fresh and Useful jQuery Plugins is our previous list of useful jQuery plugins featuring navigation, gallery and calendars jQuery plugins.

45+ New jQuery Techniques For Good User Experience which lists over 45 impressive jQuery plug-ins and techniques.

jQuery Resources for Tables

Expand table rows with jQuery – jExpand plugin
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

jQuery Highlight Demo
Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

jQuery plugin: Tablesorter 2.0
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data in a cell.

DataTables (table plug-in for jQuery)
DataTables is a plugin 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.

Forms jQuery Plugins

Password Strength – Estimates brute force time (jQuery plugin)
Brute force, if your site it attacked, this hacking method can be the very devil. This plugin shows the strength of your passwords by telling you how long it would take to brute force them.

Masked Input Plugin
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.

Ajax Fancy Captcha – jQuery plugin – WebDesignBeach.com
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop a specified item into a circle. Captcha’s security level is only medium, with the emphasis on nice looking and user-friendly qualities that still offer reasonable protection from unwanted “guests”. The basic design and elements are easy to change and customize; take a look at the file structure for more information.

jQuery plugin: Validation
This robust, flexible jQuery plugin can validate a form like you’ve never been validating before. It is designed for an unobtrusive user experience, annoying the user as little as possible with unnecessary error messages. It helps a site react to more then just a submit event, like keyup and blur, without complex setup.

Pixelmatrix Design – Announcing Uniform
Any UI designer deals with form controls quite a bit. Often the checkboxes, selects, and radio buttons do not look consistent in all the browsers. Uniform, a plugin for jQuery lets you style select, radio, and checkboxes however you desire.

jQuery Nice Form
jQuery Nice allows you to create custom looking form elements, that function like normal form elements. It is a simple form, but you can make it appear as complex or customized as you need.

JavaScript image combobox v1.5
Are you tired with your old fashion dropdown? Try this new one, an image combo box. You can add an icon with each option. It works with your existing “select” element.

Opensource – AJAX – Jqtransform – jQuery form plugin
This plugin is a jQuery styling plugin which allows you to skin form elements with your own options for whatever browser you use.

Password Strength Meter (a jquery plugin)
Password Strength Meter is a jQuery plug-in to provide you a smart algorithm that can detect the strength of a password.

meioMask – a jQuery mask form input plugin
This jQuery mask form input plugin has many new features, compatibility, usage, options, fixed characters, and rules. Masks can be setup and tweaked to fit your needs, such as fixed or reversed mask types, has function to mask strings, while still allowing hotkey usage. It works with the iPhone, supports metadata plugin, and much more. Metadata will always overwrite the ‘attr’ value.

jQuery AlphaNumeric
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Release: Validation Plugin 1.5.2
An update for the jQuery validation plugin is available. There is a small code fix, a new supported locale (slovak) and most notably, a new demo featuring integration with jQuery UI tabs and grouping selects. Support is available via jQuery discussion list and bug tracker.

jquery-keyfilter
This plugin filters keyboard input by specified regular expression. The source code inspired by Ext.JS, but was modified to provide more accurate logic.

boxy – Facebook-like dialog/overlay, with frills
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays by providing an object interface to control dialogs after they’ve been created. It is simple to use and provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

jQuery Image/Media Resources

jQuery Virtual Tour
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated. Navigation uses the standard html tags <map> and <area> in accordance with W3C.

Fullsize : A New IMG Tag Attribute
Fullsize is an attempt to get a new attribute called fullsize into the next version of HTML. This is an attempt to bring something truly useful to all web developers. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon and hopefully get the attention of the W3C.

Simple JQuery Image Slide Show with Semi-Transparent Caption
With this tutorial, you will learn how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display an image, headlines, or news your websites homepage.

Easiest Tooltip and Image Preview Using jQuery
This script adds an element to the body when you roll over a certain object. That element’s appearance is predefined with CSS (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When the cursor is moved over the object, the element moves with it; when the cursor rolls out, the element is deleted. The script takes a title attribute of an A tag and place it inside the popup element. When a thumbnail is rolled over, this script will load an image that we have linked in HREF attribute of an A tag, even if JavaScript is disabled. Also it can link to a URL screenshot preview.

Jquery Plugin MopTip 2.2
MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one child, then the slider navigation is shown automatically and is resizaable.

A jQuery Plugin for Zoomable, Interactive Maps – New Media Campaigns
Using this jQuery plugin, an interactive map can be created so that clicking important bullet locations can bring up more information on that location. Zooming into select sub-regions is also possible.

Navigation jQuery Plugins

Using jQuery Visited Plug-In.
Visited links hide with jQuery, but when clicking on "show all" button it displays the already visited links list in a slide effect.

jQuery Ribbon
This is a ribbon control built on jQuery. It supports grouping, forms, access keys, fixed position, dropdown menus, nested lists, theming and minimize.

Further Useful jQuery Resources

js-hotkeys
jQuery.hotkeys is a plugin that allows you to easily add and to remove handlers for keyboard events anywhere in your code, supporting almost any key combination.

jQuery Plugins by Dylan Verheul
To add a Google Map to your site, this plugin makes it easy to put on your page. After getting a valid Google Maps API key, you can add markers for your map and even text if desired.

iPhone-like password fields using jQuery
We do not completely go for the idea of typing passwords in plain text; by default as there will be a loss of security! Not a technical one, but a user-driven one.

Ready for use: CSS3 Template Layout
A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module.”

JSS
JSS stands for Javascript Style Sheets, it is a jQuery plugin that allows you to take advantage of the full range of jQuery selectors accross all browsers from within your standard CSS files.

jQuery Stuff
jQuery Stuff has several plugins and demos such as the Ajax Events Demo. Global Ajax Events Demo demonstrates how jQuery’s global ajax events work. Click the generate successful or generate unsuccessful buttons to generate ajax requests. Information from the event handlers will then be printed beneath.

JHeartbeat 0.1 Beta
JHeartbeat is a plugin for JQuery 1.0.1 that allows a web page to periodically poll the server. This polling can be used to keep the user’s session alive or to download updated information.

jQuery Impromptu
jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Spotlight
jQuery Spotlight is a jQuery plugin which allows you to highlight elements in your page using a ’spotlight’ effect. This plugin is highly customizable and requires no external CSS or images.

jQuery Page Peel 1.2
jQuery Page Peel displays a small animated “peel” on the top right corner of a page. Once the mouse is moved over the page peel, the page rolls down and a large clickable ad is displayed: Once the mouse is moved back onto the main page, the page peel rolls back up.

  

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience.

You may also want to consider our previous articles:

• Free Slideshow, Gallery And Lightboxes Scripts
• The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
• 45+ Fresh Out of the oven jQuery Plugins
• 50+ Amazing Jquery Examples

Navigation jQuery Plugins

Leopard Desktop with jQuery using jqDock
jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. This jQuery using jqDock can help you create a completely coded Dashboard like Leopard. It’s handy in hiding a whole lot of gadgets or widgets for which you don’t have space.

jQuery Keyboard Navigation Plugin
The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

jQuery Plugins
This plugin is for Ajax-driven pages to have back/forward navigation and to allow bookmarking.

jQuery (mb)Menu 2.6 (New!)
This is a powerful jQuery component to build a multilevel tree menu or a contextual menu with a right click in an intuitive yet easy way

Advanced keypress navigation with jQuery
Based off “A fancy Apple.com-style search suggestion,” but new and improved with keypress accessibility, this handy keypress navigation in included with this useful jQuery resource.

Gallery and Slideshows jQuery Plugins

jQuery.popeye 1.0 released
This is major release, completely rewritten and overhauled, of jQuery.popeye. It is an image gallery plugin that started as an alternative to the famous JavaScript lightbox.

Pikachoose jQuery Image Gallery (Demo)
Pikachoose is a lightweight jQuery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easy from installation to setup.

Supersized – Full Screen Background/Slideshow jQuery Plugin (Demo)
The Supersized jQuery plugin can resizes images to fill the browser while maintaining image dimension ratio. Additionally, it can cycle images/backgrounds via slideshow with transitions and preloading. The navigation controls allow for pause/play and forward/back.

Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
This Easy Slider 1.5 jQuery plugin offers many features such as auto slide, continuous sliding, "go to first” and “go to last” button, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page, and more.

jQuery lightbox for images, videos, YouTube, iframes – by Stephane Caron
prettyPhoto jQuery supports more than images. It also adds support for videos, flash, YouTube, and iFrames. It’s a full blown media lightbox that comes with useful APIs so prettyPhoto can be launched from nearly anywhere, including a flash USB.

Spacegallery – jQuery plugin
Spacegallery is a Javascript image gallery with a jQuery plugin. After setting parameters, images are animated with perspective style. When you click the front image, it fades in a smooth animation and is replaced with the next image. Although designed with one way navigation, it is a cool gallery when only a limited number of images need showcased.

jquery-rotate – Google Code
This library is an extension for jQuery to rotate images directly within JavaScript. It works especially well when you need to organize your thumbnails without the lag of synchronous image operations via the web server.

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Galleriffic is a high performance plugin for delivering a high volume of photos. Features include smart image preloading after the page is loaded, thumbnail navigation with pagination, support for bookmark-friendly URLs per-image, slideshow with optional auto-updating URL bookmarks, events that allow for adding your own custom transition effects, support for image captions, flexible configuration, graceful degradation when JavaScript is not available, and support for multiple galleries per page.

JQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

jQuery Infinite Carousel
jQuery Infinite Carousel is a scrolling carousel that works in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk you through the fundamentals of the effect and how to recreate it.

Fancybox
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library.

jQuery Flash Plugin
This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and JavaScript are available, and fallback to plain (X)HTML when they’re not. Replacements can happen as soon as the DOM is ready. (X)HTML, CSS and JavaScript stay separate, making it easy to remove, update or swap out later. Inspired by tools like SWFObject, UFO and sIFR, but written line-by-line for jQuery, no other scripts are required, meaning less redundancy, smaller filesize and faster loading.

Jquery Plugin MopBox 2.2
MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one child, the slider navigation is shown automatically and can be resizaable for one page of content.

JQuery Media Plugin
The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an “<a>”) into a <div> which holds the object.

Calendars and Datepicker with jQuery

New jQuery Weekly Calendar Plugin
This jQuery Weekly Calendar Plugin makes it simple to integrate into any jQuery-UI based application. It’s based off the fullcalendar plugin, using the same event names where it makes sense and most importantly to use an identical data format. Now the two plugins can co-exist utilizing an identical data source and similar programming style.

Transcendent jQuery Date Range Selector + Short Cuts
Transcendent jQuery Date Range Selector + Short Cuts are packaged into a nice download so even a novice can enjoy these fantastic improvements to the standard Date Picker.

jNathanson.com
This is a jQuery timepicker plugin. To try different configuration options, set the options on the demo and then click again on field or clock.

Tab browsing with jQuery

tabSwitch
tabSwitch is a tab/slider plugin for jQuery. With this plugin, you can make a tab box system with the least of code and still fully customizable. Currently, you can choose from 7 different effects with 2 view styles, as well as hot swap the effects around in runtime.

Autotab: jQuery auto-tabbing and filter plugin
Autotab is a jQuery plugin that provides auto-tabbing and filtering on textfields in a form. Once the maximum number of characters has been reached within a defined textfields, the focus is automatically set to the defined target of the element. Likewise, clearing out the textfield’s content by pressing backspace places the focus on the elements previous target. The purpose of this script is to easily establish auto-tabbing between multiple textfields.

idTabs
idTabs is a plugin for jQuery. It makes adding tabs into a website super simple and opens the door to endless possibilities.

jQuery Tabbed Content Rotator
jQuery UI is a library built on top of jQuery which allows you to create interactions, full-featured widgets, and animation effects. It is a tabbed content rotator.

Further useful jQuery Plugins

jQuery fade and slide toggle plugin
The jquery slidetoggle() is great, but but this plugin allows some opacity fading in the sliding animation. This is a very small plugin, but with different effects than regular sliding.

jQuery pageSlide by Scott Robbin
jQuery pageSlide was inspired by the UI work of Aza Raskin who introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of JavaScript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

s3Slider jQuery plugin
The s3Slider jQuery plugin shows how the layer appears. It can be on top or bottom, on left or right, or the layer can appear on all sides (left, right, bottom or top).

jqModal :: Minimalistic Modaling for jQuery
jqModal is a plugin for jQuery to help display notices, dialogues, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

markItUp! Universal Markup Editor
markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor.

Further Resources

jQuery Localisation
Localisation works by appending language indicators to the base package name to download and implement the contained overrides. If no specific language is given, the default setting for the browser is used. For example, if the browser is set for the languages English – Australian, then the greeting package causes the download and evaluation of the greeting-EN.js and greeting-en-AU.js files in that order.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times. Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

All Marked Up / Projects / jQuery URL Parser
A jQuery plugin to parse URLs and provides easy access to information within them, such as the protocol, host, port, the segments that make up the path and the various query string values.

File Style Plugin for jQuery
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using CSS. It is written using JavaScript and jQuery.

Related posts

You may also want to consider our previous articles:

• Free Slideshow, Gallery And Lightboxes Scripts
• The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
• 45+ Fresh Out of the oven jQuery Plugins
• 50+ Amazing Jquery Examples