jQuery is a very powerful Javascript framework that allow you to built functionnal and extremely good looking webistes. In this article, I have selected 10+ jQuery resources to spice up your website.

Show/Hide a nice login panel

If your website allow user registration, it should definitely a good idea to implement this very nice sliding login form. Of course, it can be used for many other things, as such as a contact form.

» View tutorial

Easy Display Switch with CSS and jQuery

Some people prefers to read a list of blog exerpts in lines, so other prefers a column display. With this tutorial you’ll learn how to create a jQuery display switch so your readers will be able to choose their favorite display.

» View tutorial

Create a better jQuery stylesheet switcher

The purpose of this tutorial is to learn how to create a jQuery CSS switcher and let your visitor decide in what color scheme your site should be.

» View tutorial

Turn any webform into a powerful wizard with jQuery

Most of the time, Web forms are long and boring. So, what about turning them into wizards? Don’t forget to check out our list of jQuery tutorials to work with HTML forms.

» View tutorial

Chat with jQuery and PHP

I remember the time that you had to create a Java Applet to have an efficient chat application. Now, thanks to PHP and of course jQuery, you can forget heavy and boring applets.

» View tutorial

Beautiful tag clouds with jQuery and flir

Tag clouds used to be used intensively on lots of blogs two or three years ago. But nowadays, most blogs don’t use them anymore. If you also don’t use tag clouds on your blog, maybe this tutorial will change your mind?

» View tutorial

Fading colors with jQuery

If you’re looking for an interesting visual effect to put on your links, this one should be a good option. On their recent homepage redesign, Twitter used a similar effect on their homepage.

» View tutorial

Twitter-like login panel using jQuery

Talking about Twitter and their recent site redesign, I might say I really like the login panel they added. With this excellent tutorial, you’ll learn how to do the same for your website or blog.

» View tutorial

Disappearing “Scroll to top” link with jQuery and CSS

After you scrolled down a page, “Scroll to top” links are welcome. This tutorial will show you how to create a dynamic “Scroll To Top” link that will appear automatically when the page has been scrolled down.

» View tutorial

Using jQuery to recreate the product slider from Apple’s website

Ah, Apple website. Since their latest redesign, this site is often quoted by many blogs as being a must-see in terms of design and usuability. With this tutorial, you’ll be able to reproduce Apple products slider, using jQuery.

» View tutorial

Create an astonishing image rotator with jQuery

On many portfolios websites, javascripts sliders on homepage are now very common, this is why I hesitated to feature that one. But seriously, it may be common, it looks so great!

» View tutorial

 

30 Comments

  1. reza
    Posted October 19, 2009 at 5:40 pm | Permalink

    i never like the idea of styleswitcher
    it just makes your site heavier

    Reply
  2. Matt
    Posted October 19, 2009 at 7:19 pm | Permalink

    I also don’t like style switchers. A lack of consistency that’s hard to brand and a more complicated site. That login panel is really nice though. I need to work harder on getting my JQuery skills up to par; it’s real powerful.

    Reply
  3. Amalia
    Posted October 19, 2009 at 10:50 pm | Permalink

    Thanks!! I looove your suggestions. I’ll try to use some of them in my coming websites!

    Reply
  4. Ralph
    Posted October 19, 2009 at 11:23 pm | Permalink

    Heavier? But it makes you site get improve. Well it depends upon the admin.

    Reply
  5. Eric B.
    Posted October 20, 2009 at 1:30 am | Permalink

    Thanks! I will put these to good use ;)

    Reply
  6. Lam Nguyen
    Posted October 20, 2009 at 6:58 am | Permalink

    Thanks for the including :D I have 2 posts in your article :D

    Reply
  7. Janko
    Posted October 20, 2009 at 10:13 am | Permalink

    Nice roundup, thanks for including warp speed tutorials :)

    Reply
  8. Derrick
    Posted October 20, 2009 at 10:20 am | Permalink

    Great list. Thanks a lot.

    Reply
  9. Jean-Baptiste Jung
    Posted October 20, 2009 at 10:20 am | Permalink

    @Lam Nguyen & Janko : You’re welcome! Both of you definitely deserve your place on here!

    Reply
  10. Lloyd
    Posted October 20, 2009 at 12:04 pm | Permalink

    Just what i’ve been looking for… thanx!

    Reply
  11. Semblance
    Posted October 20, 2009 at 6:47 pm | Permalink

    I would definitely like to make my own tag cloud – I really like your example. Thank you for the inspiration!

    Reply
  12. lex
    Posted October 21, 2009 at 5:21 am | Permalink

    bad to the bone! thanks guys (and gals)!

    Reply
  13. Ricky
    Posted October 21, 2009 at 2:36 pm | Permalink

    I was looking for faded image tutorial. I would like to have faded image in sidebar as well as in posts. Like mouse over effect.

    Reply
  14. Roger
    Posted October 22, 2009 at 3:02 am | Permalink

    Not sure if I agree that the site gets heavier when using styleswitcher. I`ve done that on about all of my sites, and haven`t noticed a thing. Quite the contrary, actually; not noticing any negative effects when doing it, but getting quite an increase in traffic, for some strange reason.

    Reply
  15. Mohamed Amine
    Posted October 22, 2009 at 2:17 pm | Permalink

    Great! Thanks for sharing this amazing tutorials. I liked the control panel idea.

    Reply
  16. Sargo Darya
    Posted October 22, 2009 at 2:39 pm | Permalink

    Hey, in the current situation you should change your favicon to something which isn’t shaped like the Jack Wolfskin footprint :D

    Reply
  17. Marsh
    Posted October 22, 2009 at 4:56 pm | Permalink

    thanks for the chat tutorial.. i really liked it

    Reply
  18. Josh
    Posted October 22, 2009 at 10:09 pm | Permalink

    Thanks for the tutorial ; ) I love JQuery, seems to be taking over the web now!

    Reply
  19. Frank Lynch
    Posted October 23, 2009 at 7:30 am | Permalink

    this is awesome, i always use some jQuerry to enhance my blogger, but many a times i have to satisfy with all those limitations of Google, but thanks to Wordpress i can use them all now. and thanks to you too

    Reply
  20. Vege
    Posted October 23, 2009 at 10:11 am | Permalink

    Thanks for the great list. I will definitely use some of them. I am in the period of experimenting with my website so these will help me a lot.

    Reply
  21. Antoinette Taus
    Posted October 26, 2009 at 1:22 pm | Permalink

    Great list of jQuerry. I find the tutorials very useful that site owners can use to improve their sites.

    Reply
  22. Coktri
    Posted October 26, 2009 at 9:17 pm | Permalink

    Useful tutorials, thank you for sharing!

    Reply
  23. Dominic
    Posted October 27, 2009 at 12:51 am | Permalink

    This is an awesome round-up of jQuery resources. Thanks :)

    Reply
  24. Oliver
    Posted October 27, 2009 at 4:23 pm | Permalink

    Really like it especially the Chat with JQuery and PHP.

    Reply
  25. Diana
    Posted October 27, 2009 at 7:04 pm | Permalink

    wOW!!! This is a really good collection of resources! Thanks for sharing with us!

    Reply
  26. Jill
    Posted October 29, 2009 at 5:16 pm | Permalink

    Once again, thanks a lot for the suggestions. Always welcome! I’ll try some of them.

    Reply
  27. sivakumar
    Posted October 31, 2009 at 12:33 pm | Permalink

    Good collection of great jquery tools… Keep like this blog :)

    Reply
  28. Mike Green
    Posted November 5, 2009 at 3:39 pm | Permalink

    Some fascinating ideas here to add to my web development

    Reply
  29. Tony
    Posted November 11, 2009 at 2:05 am | Permalink

    Well, Stylesheets switcher makes a site heavier but consider this: What if you are trying to make a web app brandable, and provide the user with the opportunity to switch theme for their best convenience? Wouldn’t be that great? do you have another example on how a css switcher would be great?

    Cheers :)

    Reply
  30. Satish Gandham
    Posted November 26, 2009 at 3:58 pm | Permalink

    I dont like style switchers. If you blend your ads to match your content with one colour scheme, they wont match in the other.

    Reply

16 Trackbacks

  1. By 10+ astonishing jQuery resources to spice up your website | Webs Developer on October 19, 2009 at 5:00 pm

    [...] 10+ astonishing jQuery resources to spice up your website Share and Enjoy: [...]

  2. By 10+ astonishing jQuery resources to spice up your website | TopRoundups on October 20, 2009 at 12:59 am

    [...] 10+ astonishing jQuery resources to spice up your website Submitted by Editorial Team [...]

  3. By 【 Bookmark 】2009年10月21日 [ now edit ] | DESIRED BLOG on October 21, 2009 at 4:00 am

    [...] 10+ astonishing jQuery resources to spice up your website [...]

  4. By links for 2009-10-20 « Mandarine on October 21, 2009 at 6:08 am

    [...] 10+ astonishing jQuery resources to spice up your website (tags: webdev inspiration jquery plugin usability) [...]

  5. By 10 adet harika jquery örnek uygulama htt… « wiki.laroouse on October 23, 2009 at 1:29 am

    [...] adet harika jquery örnek uygulama http://www.catswhocode.com/blog/10-astonishing-jquery-resources-to-spice-up-your-website 0 like it. Like  [...]

  6. By Friday Fix Oct 19 - 23 on October 23, 2009 at 3:04 pm

    [...] 10+ astonishing jQuery resources to spice up your website | cats who code [...]

  7. By ITキヲスク | 2009年10/18～10/24の週間ブックマーク on October 24, 2009 at 8:16 pm

    [...] サイトに刺激を与えるjQueryの使い方10選 [...]

  8. By Notable Tech Posts – 2009.10.25 | The Life of Lew Ayotte on October 26, 2009 at 3:51 am

    [...] 10 astonishing jQuery resources to spice up your website [...]

  9. By 10+ astonishing jQuery resources to spice up your website | meshdairy on October 29, 2009 at 9:12 am

    [...] Get 20% off on the MyHomePro Premium WordPress Theme by using this exclusive code: wpcats20.10+ astonishing jQuery resources to spice up your website [...]

  10. By Mchiche.Com | Upgrade Your Mind ! » 58 liens sur inspiration, Wordpress, typographie, javascript, … on October 29, 2009 at 5:40 pm

    [...] 10+ astonishing jQuery resources to spice up your website 10 ressources jQuery pour booster votre site [...]

  11. By CSS Brigit | 10+ astonishing jQuery resources to spice up your website on November 1, 2009 at 1:33 pm

    10+ astonishing jQuery resources to spice up your website…

    jQuery is a very powerful Javascript framework that allow you to built functionnal and extremely good looking webistes. In this article, I have selected 10+ jQuery resources to spice up your website….

  12. By jquery関連のプラグインまとめ « vanillate on November 3, 2009 at 11:57 am

    [...] ListMenu Plugin」 10+ astonishing jQuery resources to spice up your website テーブル周りの素晴らしいjQueryプラグイン30 | CREAMU [...]

  13. By Top Articles On The Web Design Billboard In October’09 - Posted In Others | carangeblog - CARA ngeBLOG on November 5, 2009 at 10:34 pm

    [...] Official Link [...]

  14. By Webwoche 2.11.-8.11.2009 | Jakob-Matthias Maul Blog und Portfolio on November 9, 2009 at 11:01 am

    [...] …mit jQuery. Derselbe junge Belgier (Jean-Baptiste Jung) zeigt bei Cats Who Code ein paar nette jQuery Spielereien her, die jeder Website die nötige Würze geben. [Link] [...]

  15. By Jquery | DIGITALife on November 29, 2009 at 2:06 am

    [...] 10+ astonishing jQuery resources to spice up your website [...]

  16. By Inspirational Finds January « Nancy's Notes – Joomla on January 6, 2010 at 5:26 am

    [...] – Spice up your Website 10 Resources such as style [...]

Post a Comment

Your email is never published nor shared. 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>

Subscribe without commenting

  • Click to subscribe!
  • Smashing Network
WordPress Appliance - Powered by TurnKey Linux