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.
Chain-able transition effects
Now let’s 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.
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.
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.
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.
News Ticker
LiScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker.
VISIT TUTORIAL
Live demo inside tutorial
Tags: Web Design
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply