8 Fantastic jQuery Tutorials for Designers

Slide out and drawer effect

The effect is commonly known as an “accordion” and it’s usually used to slide up, or down blocks of content to expose new blocks. 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 restricted area.

VISIT TUTORIAL
VIEW DEMO

Chain-able transition effects

Now lets see the power of jQuery’s chainability. With just several lines of code, I can make the box fly around with scaling and fading transition.

VISIT TUTORIAL (#6)
VIEW DEMO

jQuery Tabs

Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript. For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled.

VISIT TUTORIAL
VIEW DEMO

Creating an Editable Chart

Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript.

VISIT TUTORIAL
VIEW DEMO

Easy Multi Select Transfer with jQuery

I’m sure that at some point or another you’ve encountered a form widget like the one below, allowing options to be traded from one multi select to another.

VISIT TUTORIAL
Live demo inside tutorial

jQuery Hover Sub Tag Cloud

Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the site’s content. And although we don’t have that much choice in designing them, we can still find our way to come up with new design approaches and solutions. Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites.

VISIT TUTORIAL
VIEW DEMO

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.

VISIT TUTORIAL
VIEW DEMO

News Ticker

LiScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker.

VISIT TUTORIAL
Live demo inside tutorial