60+ Must Have jQuery Toolbox

October 16, 2011 · 52 comments

by Lars

When developing Web Applications one of the most challenging tasks is to make the solution cross-browser compliant. It’s been this was since the early days of www and it is not likely to change in the near future. Client side scripting is very important for creating interactive functionality and dynamic effects on web pages but Javascript is executed in the client browser and this means they are directly affected by the differences in web browsers. Fortunately some of highly skilled developers have dedicated their precious time and passion to create frameworks that encapsulate most of the browser related difficulties and in many ways makes difficult parts of client side scripting fun and not a nightmare. This article will briefly introduce you to the Javascript framework jQuery and then provide excellent examples of the low hanging fruits waiting for you if you’re starting to use jQuery. jQuery is just one of several frameworks that all have powerful features but it is a strong pick for jquery carousel. Why focus on Javascript frameworks anyway? Because they provide NEED TO HAVE functionality out of the box that can be accessed so easily you wont believe it. Trust me the effects you’re going to roll out soon will impress your co-workers, friends and most important your customers! I’m not going to make any judgement regarding what framework is best as it would be wrong. We should just be grateful that they exist and that skilled developers keep maintaining them and because good alternatives means competition and in the end better solutions. Please comment if some great resources is missing and I’ll add them at once.


ElegantThemes
ThemeForest

Advertisement

A Javascript framework, jQuery

Common to most of the Javascript frameworks available is that they dramatically reduce the amount of code that needs to be written compared to pure Javascript. This leads to less development time, more readable code and code that is generally easier to maintain and extend. Generally one of the main purposes of using a Javascript framework is to avoid dealing with browser differences yourself and that part should not be underestimated.

This article will focus on jQuery only as it is too hard to cover more than one Javascript Framework in a single article. The other major frameworks are (may cover these in future articles): prototype (and script.aculo.us), Dojo and mootools. These are all great and worth considering but currently jQuery seams to lead on terms popularity. jquery.com have an alexa rank close to 2000 indicating massive traffic. Further some of the largest software vendors use it in their development platforms.

Lets take a look at JQuery

javascript-frameworksWith their own words:

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.”

Main features of jQuery

The jQuery Library provides a general-purpose abstraction layer for common web oriented scripting.

  • DOM element selections using the cross-browser open source selector engine Sizzle
    Without encapsulating DOM access many lines of traditional javascript code must usually be written for even simple tasks. jQuery chages this completely with a robust and efficient selector mechanism.
  • DOM traversal and modification (including support for CSS 1-3 and basic XPath)
    jQuery is using CSS selectors to for locating page elements, this is good news for web designers as knowing CSS makes a good starting point for using jQuery.
  • Events, responding to user actions
    The jQuery Library provides an elegant approach to catch and interpret user events like clicking, mouse movement etc. and at the same time it removed complexity of browser differences.
  • CSS manipulation
    CSS is powerful but as most browsers still interpret it differently it is hard to implement. jQuery offers a standard approach to shield developers from browser differences.
  • Effects and animations
    jQuery offers fascinating features for animating changes made to the web page and it is done with only a few lines of code
  • Retrieving information from the server without refreshing the page, also known as Ajax.
    jQuery removes the browser specific complexity from implementing ajax into your web pages making it possible to focus on the actual functional task at hand.
  • Extensibility
  • Utilities – such as browser version and the each function.
  • JavaScript Plugins

Getting started resources

If you’re new to jQuery this is where you get started. Download the Library and load one of the getting started guides. It’s not hard just try it. In the bottom of the article I have linked to a few books that you may consider reading to get more solid learning.

General Utilities

Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it’ll load very quickly from Google’s CDN and most importantly it’ll already be cached if the user has visited a site which delivers it from Google Code.

javascript-frameworks

Animation

API: queue & dequeue

Video tutorial showing how to create animations using jQuery queue/dequeue. queue & dequeue are a pair of core data utilities that help you to add your own bespoke to animations.

javascript-frameworks

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

javascript-frameworks

SlideDown Animation Jump Revisited

When using slideDown depending on the layout of your page, you could still see the jumping effect, regardless of whether you fix the padding around the element.This tutorial will create sliding effect when link is pressed.

javascript-frameworks

Animate your message boxes with jQuery

A few months ago I posted an article on creating message boxes. No question, you should really take care about it. But this time I want to make fun with it and add some animations using (you guess) jQuery.

The idea is more than simple. Let’s animate message box that is being shown, and blow it away after we read it.

javascript-frameworks

Animation Jump – quick tip

The way the slide animation works is it animates the height CSS property of the element. The problem occurs if the element being animated has a margin or padding.

This is because when the element shifts from display: none to a tiny height (or width) and visa versa, the padding (or margin) jumps in to view, causing the real height to be height + padding + margin.

As of jQuery 1.3 this fix is no longer required as jQuery height animation also animates the padding and margin

javascript-frameworks

Creating LightBox / Model Windows

I have noted that many lightbox solutions use prototype or mootools framework. If you’re looking for more modal window scripts try looking for some based on these (150 Worth Knowing Web Developer Tools and Techniques)

Load Data while Scrolling Page Down with jQuery and PHP

This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.

javascript-frameworks

Building a Lightbox with jQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.

lightwindow

Coda Popup Bubbles

Demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site. To create the puff popup bubble effect, we need the following:

  1. Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
  2. The hidden popup, correctly styled for when we make it appear.
  3. jQuery to animate the puff effect on mouseover and mouseout.

coda

ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Good examples and descriptions. All code can be downloaded. Demo

javascript-frameworks

SimpleModal Demos

Purpose is to provide developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

javascript-frameworks

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

lightwindow

Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

shadowbox

Hover Sub Tags

Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

tagcloud

Rollovers and tooltips with jQuery

Simple tutorial on how to create jQuery tooltip

javascript-frameworks

jQuery books widget

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

javascript-frameworks

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. Licensed under the MIT License

javascript-frameworks

Advanced docking using jQuery

Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.

javascript-frameworks

Image Handling

Jcrop

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

javascript-frameworks

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

javascript-frameworks

Add zoom icon to images using CSS (and jQuery, of course)

How to create a zoom icon in two ways: CSS way and jQuery way.

javascript-frameworks

Easy way to improve your image gallery using jQuery

How do you decide which image to click while browsing some gallery? Most probably, you’ll click on image that you find interesting. And you make that decision in a matter of seconds. If, however, images have some description attached, it could make your choice easier.

Let’s say you are browsing a CSS gallery and you want to check out some new and beautiful website designs. And you are of course interested in some details – for example, which category design belongs to, what’s the rating or whatsoever. This information could be rendered below thumbnail, but there are other, more attractive ways of displaying additional data.

javascript-frameworks

Image Fade – Revisited

See how to create a really cool image transition effect for buttons

javascript-frameworks

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

polaroid_photo_viewer

Image Cross Fade Transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

View the working example and the source

image-cross-fade-transition

Image Loading

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

javascript-frameworks

Creating A Fading Header

A simple example using jQuery and CSS that shows you how to create the fading header technique seen on Bits and Pixels.

javascript-frameworks

jQuery Demo: Creating A Sliding Image Puzzle Plug-In

This tutorial show us how to create a sliding image puzzle.

javascript-frameworks

Sliders and Transitions

Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch. Try Demo | View Code

slider-gallery

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. Demonstration

jQuery-Multimedia

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

javascript-frameworks

Scrollable timeline

javascript-frameworks

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

javascript-frameworks

Build A Login Form With jQuery

In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

javascript-frameworks

Spoiler Revealer with jQuery

A simple technique that hides some content first and fades it in once a link is clicked.

javascript-frameworks

Form Enhancements

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. Demo

javascript-frameworks

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.

javascript-frameworks

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

javascript-frameworks

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

javascript-frameworks

Masked Input Plugin for jQuery

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

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. The following mask definitions are predefined:

  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)

masked-input-plugin

The jQuery Tooltip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

javascript-frameworks

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

javascript-frameworks

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

ui-timepickr

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

javascript-frameworks

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jQuery-checkbox

jQuery Checkbox

Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

jQuery-checkbox

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

javascript-frameworks

jQuery Sliding Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo

jquerycontactform

jQuery – Ajax Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo

contactform

jQuery – Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo

ajaxcontactformv1

jQuery Contact Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

jqueryajaxform

Submit A Form Without Page Refresh using jQuery

“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “

slideshow

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

slideshow

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

jQuery Tabs and Menus

Sexy Drop Down Menu w/ jQuery & CSS

Drop-down menus are not new and a lot of sites use them but this tutorial rocks! Soh teaches us how to create a ’sexy’ menu using jQuery and CSS that degrades gracefully.

javascript-frameworks

How to Create a MooTools Home Page-Inspired Navigation Effect

A simple side menu realized in jQuery.

javascript-frameworks

BBC Radio 1 Zoom Tabs

How to recreate the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

javascript-frameworks

Learning jQuery: Fading Menu – Replacing Content

In this tutorial Chris teaches us how to create a good looking fading menu!

javascript-frameworks

jQuery look

Two effects are inspected. Simplified accordion and a hover effect.

javascript-frameworks

jQuery sliding menu revisited

Tutorial showing how to create a nice sliding menu. Images are preloaded and the entire block is click-able.

javascript-frameworks

Create fancy share box with CSS and jQuery

This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box.

javascript-frameworks

Collapsible Panel

In this tutorial we will be learning how to create a collapsible panel or sidebar and an expandable content area. jQuery will be assisting us to create this smooth and sleek behaviour. Once our panel is hidden, we will display a small button to reveal it again. Collapsible Panel demo

javascript-frameworks

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.

javascript-frameworks

jQuery Tabs made easy

small jQuery dependant code to create my own tabs widget and thought you could find it useful.

javascript-frameworks

Tables and Data Handling

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Fully internationalisable: UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
  • It’s free!

datatables

Zebra Tables Demo

Using jQuery to do zebra striping and row hovering

javascript-frameworks

Books on jQuery

A good way to learn new stuff or get into more details of a already well known area is to get yourself a good book. To make this article a one stop resource I have added some good

Our brand new offers for free 642-681 dumps and 350-040 study guides prepare you well for the final HP0-J41 exam.

Hold on! Do you have a Facebook page? With one of the good looking Facebook Skins you social profile and presence will improve. Have a look!

Also don’t miss these best wordpress themes if you’re looking for a great theme for your website. And if you’re looking for Cute Tumblr Themes there is a lot of good one to choose from.

{ 20 comments… read them below or add one }

anitha December 25, 2012 at 3:14 pm

good

Reply

anitha December 25, 2012 at 3:15 pm

thanks

Reply

Webdesign March 11, 2012 at 4:51 pm

I have looking for this article everywhere.
I thank you so much. I have bookmarked this site!

Reply

Mike January 12, 2011 at 11:09 pm

I have been looking for an article about Jquery and this is exactly what I was looking for thanks.

Reply

Lars January 12, 2011 at 11:39 pm

glad it helped you out Mike! Also check here we have many jQuery articles: http://www.tripwiremagazine.com/category/development/ajax

Reply

NewBitOrder Agentur Koblenz December 3, 2010 at 4:19 pm

Thank you for this great collection.
jQuery is one of the most powerfull Frameworks i’ve found so far. With these Plugins it becomes even more usefull for me :)

Reply

Roedix June 24, 2010 at 11:14 pm

awesome list!! thank you

Reply

City Web Studio August 24, 2009 at 12:59 pm

I am embarking to use Jquery soon and this article provides all the basic information i need to start!

Many thanks for the article.

Reply

Flex developer August 19, 2009 at 6:43 pm

Hmm… Great list. I think it’s very helpful as beginer and as expert :). Thanks

Reply

Module23 Werbeagentur Koblenz August 4, 2009 at 9:33 am

jQuery is very useful and powerful. Thanks for sharing that great collection. I’ll go and check out the interesting links above.

Reply

Bernadus July 24, 2009 at 5:34 am

Hmmmm… delicious Jquery toolbox collection. Thanks for sharing this. I also write about introduction to jquery please please visit my blog :
http://www.newellandbudge.com/development/programming/keep-it-short-and-sweet-with-jquery/

Reply

Paul July 23, 2009 at 3:54 pm

Vielen herzlichen Dank =)

Reply

seeal July 23, 2009 at 11:49 am

sooo great¡¡ added to bookmark ¡¡

Reply

natalia cancino July 22, 2009 at 3:17 pm

Gracias / Thank you!…gran recopilación!

Reply

cssrain July 22, 2009 at 5:03 am

wow .

Reply

Benjamin July 21, 2009 at 11:06 pm

That’s definitely a useful list! The cheatsheats and books sections are awesome! Bookmarked it on delicious.

I’m also an JQuery developer. Maybe you want to check out my Image Magnifier Plugin located at http://benjaminmock.de/bezoom-jquery-plugin/ It’s still in a very early development phase, but I’d like to hear some opinions. Thank you!

Reply

Brian Jørgensen July 22, 2009 at 12:55 am

Oh thanks SO much! This is such an awesome list!!

Thank you!

Reply

tripwiremag July 22, 2009 at 7:42 am

@Brian, @Benjamin: Thanks for the feedback. jQuery rocks and having access to as many plugins and tricks as possible is essential.

Reply

MorayWeb July 21, 2009 at 8:49 am

Wow! Fantastic collection of resources, helpful to find many of the tuts and plugins I have bookmarked all on one page – and the ones I don’t have already are welcome additions too! Brilliant, thanks for a great post. :)

Reply

tripwiremag July 21, 2009 at 9:36 am

@MorayWeb: Thanks your positive feedback is very appreciated!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 32 trackbacks }

Previous post:

Next post:


Web Analytics