60+ Must Have jQuery Toolbox

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.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

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

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

• Download jQuery
• jQuery Documentation
• Browser Compatibility
• How jQuery Works (official getting started guide)
  A basic introduction to jQuery and the concepts that you need to know to use it.
• Getting Started with jQuery
  Goes through the basics of jQuery, all the way up to building plugins.
• jQuery For Designers
  Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.
• Live Examples of jQuery
  An interactive demonstration of the basics behind jQuery.
• jQuery Cheat sheets are always nice to have
  oscarotero jquery 1.3 (as wallpaper)
  
  colorcharge jQuery 1.2
  jQuery 1.3 Cheat SheetQuick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

  

  jQuery Cheat Sheet 1.2

  

• Simple Guide: How To Get Started With jQuery (Part One)
• Selectors, Animation, and AJAX – jQuery Tutorial And Examples (Part Two)
• Companies and organisations using jQuery: Google, Dell, Bank of America, Digg, NBC, CBS, WordPress, Mozilla, Drupal, Technorati. More Sites Using jQuery

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.

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.

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.

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.

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.

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

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.

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.

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.

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

SimpleModal Demos

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

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.

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.

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.

Rollovers and tooltips with jQuery

Simple tutorial on how to create jQuery tooltip

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.

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

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.

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.

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

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.

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.

Image Fade – Revisited

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

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!

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

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.

jQuery Demo: Creating A Sliding Image Puzzle Plug-In

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

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

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 Infinite Carousel

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

Scrollable timeline

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.

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.

Spoiler Revealer with jQuery

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

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

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.

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.

jquery.Combobox

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

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)

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.

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.

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.

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.

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

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

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

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

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

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

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.

Submit A Form Without Page Refresh using jQuery

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.

How to Create a MooTools Home Page-Inspired Navigation Effect

A simple side menu realized in jQuery.

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.

Learning jQuery: Fading Menu – Replacing Content

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

jQuery look

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

jQuery sliding menu revisited

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

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.

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

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 Tabs made easy

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

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!

Zebra Tables Demo

Using jQuery to do zebra striping and row hovering

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

• Learning jQuery 1.3
  
• jQuery in Action
  
• Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
  
• jQuery Reference Guide: A Comprehensive Exploration of the Popular JavaScript Library
  
• jQuery UI 1.6: The User Interface Library for jQuery
  
• jQuery Cookbook
  
• jQuery: Visual QuickStart Guide
  

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.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.