Slide out and drawer effect

drawer

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

chain

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

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

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

transfer

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

slider

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

ticker

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

VISIT TUTORIAL
Live demo inside tutorial

del.icio.us:8 Fantastic jQuery Tutorials for Designers digg:8 Fantastic jQuery Tutorials for Designers spurl:8 Fantastic jQuery Tutorials for Designers wists:8 Fantastic jQuery Tutorials for Designers simpy:8 Fantastic jQuery Tutorials for Designers newsvine:8 Fantastic jQuery Tutorials for Designers blinklist:8 Fantastic jQuery Tutorials for Designers furl:8 Fantastic jQuery Tutorials for Designers reddit:8 Fantastic jQuery Tutorials for Designers fark:8 Fantastic jQuery Tutorials for Designers blogmarks:8 Fantastic jQuery Tutorials for Designers Y!:8 Fantastic jQuery Tutorials for Designers smarking:8 Fantastic jQuery Tutorials for Designers magnolia:8 Fantastic jQuery Tutorials for Designers segnalo:8 Fantastic jQuery Tutorials for Designers gifttagging:8 Fantastic jQuery Tutorials for Designers

21 Responses »

  1. Anthea on March 29th, 2008 at 11:51 pm:

    Oh how perfect!
    I have just started learning jQuery and now have something to practice with.
    Thanks!

  2. Tutoriales gratis de jQuery | Uberbloggerz on March 30th, 2008 at 3:58 am:

    [...] desplegables, tablas editables, presentaciones y demás. Desde tutorialBlog nos llegan estos 8 tutoriales de jQuery que todo diseñador Web debería conocer. « Templates gratis en XHTML y [...]

  3. Peter T - Webshop on March 30th, 2008 at 4:33 am:

    Thanks for the post, this is another good JQuery resource, http://ui.jquery.com/

  4. 8 tutoriales de JQuery para diseñadores [EN] on March 30th, 2008 at 6:23 am:

    [...] 8 tutoriales de JQuery para diseñadores [EN]tutorialblog.org/8-fantastic-jquery-tutorials-for-designers/ por estilo0 hace pocos segundos [...]

  5. Welcome to Paradise on March 30th, 2008 at 12:37 pm:

    This is just awesome complication for jQuery. Thanks for this. It couldn’t have gotten any better. Cheers.

  6. Fensterfolien on March 30th, 2008 at 1:26 pm:

    Great Job! Very nice Tutorials….i love them all!
    Have a nice day

  7. seb on March 30th, 2008 at 1:26 pm:

    both sub tag cloud demo and accordion demo get broken if you increase your font size in the browser. Sign of bad html/css code.
    Maybe you should worry about html and css before worrying about fancy javascript.
    The tab effect can be done very easily with a few lines of js, without jQuery.

  8. 8 Fantastic jQuery Tutorials for Designers « Jans Links on March 30th, 2008 at 2:45 pm:

    [...] 8 Fantastic jQuery Tutorials for Designers http://tutorialblog.org/8-fantastic-jquery-tutorials-for-designers/ [...]

  9. links for 2008-03-30 on March 30th, 2008 at 3:34 pm:

    [...] ‽ 8 Fantastic jQuery Tutorials for Designers (tags: jquery) [...]

  10. Learning jQuery: A Roundup Roundup - CSS-Tricks on March 30th, 2008 at 7:45 pm:

    [...] 8 Fantastic jQuery Tutorials for Designers I put this roundup together for TutorialBlog, which highlights some more tutorials that may have not been seen in these other roundups. [...]

  11. links for 2008-03-31 « Mike Does Tech on March 31st, 2008 at 12:37 am:

    [...] » 8 Fantastic jQuery Tutorials for Designers (tags: jquery howto) [...]

  12. Fatih Hayrioğlu’nun not defteri » 31 Mart 2008 web’den seçme haberler on March 31st, 2008 at 1:46 pm:

    [...] 8 güzel jquery uygulamalı ders. Bağlantı [...]

  13. rascunho » Blog Archive » links for 2008-03-30 on March 31st, 2008 at 8:48 pm:

    [...] » 8 Fantastic jQuery Tutorials for Designers (tags: tutorialblog.org 2008 mes2 dia30 at_home JQuery javascript lista_de_links *****) [...]

  14. links for 2008-03-31 « toonz on March 31st, 2008 at 11:34 pm:

    [...] » 8 Fantastic jQuery Tutorials for Designers (tags: jquery javascript tutorial ajax) [...]

  15. Adrian Demian on April 2nd, 2008 at 5:15 pm:

    Nice post… keep up the good work

  16. Resurse pentru webdesigneri şi webmasteri | CNET.ro on April 3rd, 2008 at 8:08 pm:

    [...] 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…)- 8 Fantastic jQuery Tutorials for Designers- Top 10 Javascript Frameworks - Which do you [...]

  17. Rize on April 13th, 2008 at 5:44 pm:

    Oh how perfect!
    I have just started learning jQuery and now have something to practice with.
    Thanks!

  18. Metropolis on April 14th, 2008 at 9:43 am:

    [...] - Logolog - Styling Text Links - Kick-ass creative Logos - How to handle a Client critique - JQuery for Designers [...]

  19. HTML Editor Reviews » del.icio.us bookmarks for April 1st through April 14th on April 15th, 2008 at 12:33 am:

    [...] 8 Fantastic jQuery Tutorials for Designers - 04-14-2008 | 5:33 pm [...]

  20. 8 Fantastic jQuery Tutorials per Designers : sastgroup.com on April 18th, 2008 at 9:25 pm:

    [...] web: http://tutorialblog.org/8-fantastic-jquery-tutorials-for-designers/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

  21. Daniel on April 22nd, 2008 at 7:53 am:

    Editable chart is great, but I can’t use with JQuery 1.2.2 or 1.2.3, it works only with version 1.2.1.

    Daniel

Ad-Links

Translate