10 Advance jQuery Scripts to take Your Website to the Next Level

Faz July 23, 2009 72

Before 2008, there were only a handful (compared to now) of sites which were of a very high level of quality and stunningly unique; standing out from the rest. It was in 2008 when many tools and frameworks became more popular and widely used amongst the masses. This included CSS based design and everyone’s favourite – WordPress! Due to this, today, every half decent web designer has a stunning website. You’re probably wondering what I’m getting at? To make your website standout from the rest, you need to take your website to the next level. In this post, I’m going to showcase many Advanced jQuery techniques to add that extra touch to your site.

Advanced jQuery

Below are a list of sites that offer some amazing jQuery script by which you can achieve some stunning effect for your site. I have given a brief introduction to each effect with a link to the original site direct download.

TN3 Gallery (Sponser – added July 2012)

A jQuery and WordPress image gallery.

Includes slideshow, transition effects, multiple album options, CSS skinning and much more. Beautiful looks for a Beautiful gallery.

AJAX Fancy Captcha

Taking Captcha’s to the next level! A new, intuitive drag and drop captcha:


Here we’re asked to drag the pencil into the circle! Neat!

Note: According to the producers, this Captcha’s security level is medium.

jQuery Cycle – Custom Incoming/Outgoing Transitions

Cool image transitions that were once possible in Flash only. This powerful script has room for lots of customisation to all you to fine grain your transition over speed and easing in/out transitions.

Cool jQuery Sliding Panel

I really like this effect (might implement it here in the future!).

jQuery Scrollable

A very nice/smooth script which you can implement to a div.

This script can be used for

  • Image Galleries
  • Products
  • Navigation
  • Anything else!

Some features:

  • Horizontal/Vertical
  • Can Scroll using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.
  • Ability to make your own effects
  • and lots of other stuff! See script homepage for script

jQuery Filterable Portfolio

An awesome effect for portfolios and just showcasing your work!

Here you click the tabs above the images and jQuery performs a cool transition to filter out the required category!

Animated Portfolio

A Nice Effect!

Password Strength Meter

A customisable password strength meter to show how secure your password is.

With a bit of tweaking, you should be able to implement it with your registration forms. I’m sure the download contains all the instructions.

Note: Images can be changed!

jQuery Slide-In Tab

Again from the same site as the above two. This is similar to an accordion effect however horizontal from the edge of the screen.

JQuery Dashboard

Like the one found on a Mac.

Smooth Tabbed Menu

Smooooth!

BONUS – jQuery Tetris!!!

WIN!

Conclusion

You need to initially impress your users within a very short amount of time and one of the methods to achieve this is to use jQuery. By adopting some of the uses above backed up by some inspiration on your side, you can be sure that many of your users will return.

Important Note! All of the above methods are the foundation upon which a strong structure can be built. Use it to your advantage. With some tweaking and CSS, you can take much more out of them. For a freelancer. it’s very important.

If you’re not in the web design/development industry, then using even the most basic jQuery will more than likely impress your visitors! (It’s alright for some!)

Useful Links

For the best web hosting services in Manchester, please visit Umbrella Host

72 Comments »

  1. Matt July 24, 2009 at 09:38 - Reply

    Although I love jQuery, I have to disagree with your opinion that it’s the only way to make your website unique. If you have some skills in PS and HTML/CSS you can craft a stunning web design without using a single piece of JavaScript code.

    • Faz July 24, 2009 at 17:13 - Reply

      I agree with you that using jQuery is not the only way to add spice to your site however these days, especially in the web design industry, every half-looked after websites looks stunning! jQuery is the way to move forward!

      Thanks for your comment!

      • René July 26, 2009 at 21:20 - Reply

        I also have to disagree. ;) I don’t think it’s jQuery. It’s just Javascript. Sure, jQuery makes it easier for all people to handle Javascript effects but I think jQuery isn’t THE thing that makes it special. It’s the Web 2.0 and his trends which are not revolutionized by jQuery. jQuery just does it on a simpler way. It’s not the next level. It’s the level of today.

        I say, HTML5 is the “next” level.

        btw. I’m also have to disagree about that before 2008 there were only a handful of sites which were on a high level. You can’t compare this. The Level isn’t similar to today. back in 2002, tables were the grates thing to make websites. So we could say: That was high level for that time.

        • Faz July 26, 2009 at 23:29 - Reply

          Thanks for the comment René, much appreciated.

          I agree JQuery is the “level of today” however believe it or not; there are still many awesome designers with stunning sites out there who have very little knowledge of jQuery and its possibilities! Thus, although it’s today’s technology, many out there are a little behind in this aspect of web technology and hence, need waking up!

          HTML 5 is indeed the next stage on the web alongside CSS 3!

          I’ll keep in mind your final comment and make sure I do a bit more research before posting such statements as “before 2008″. You have stated correctly that we cannot compare today’s quality of sites with those of 2008 due to the technology available however, leaving this aspect aside and comparing directly between sites from 2007 and now, we can come to a conclusion that many of the sites that use jQuery today look far more stunning than those in 2007 when jQuery was of very little use!

          Thanks Again!

          • Chris Heney October 7, 2010 at 15:43 -

            I agree with everything you said Faz, except for the use of the word _only_ when you say “only way to make the website unique.

            jQuery is probably the fastest growing js library I have ever seen. It makes ajax easy, as well as data parsing, serialization, etc.

            As the browser turns more and more into an application launcher rather than a document viewer jQuery is the right place to be.

      • Ahtisham October 12, 2010 at 19:52 - Reply

        These are nice plugins

  2. Hernan_ July 26, 2009 at 20:54 - Reply

    I think Animation and Design are two totally different things. So if you can complement both there’s no doubt that you may get a better final product.
    Anyway every project has different needs.

    • Faz July 26, 2009 at 20:59 - Reply

      Good call.

      They are very different things and to implement both together is an art in itself.

  3. Rick July 26, 2009 at 21:41 - Reply

    Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use.

    • Faz July 26, 2009 at 23:31 - Reply

      Heh heh, The captcha was new to me also and is my favourite from this list (excluding Tetris, of course!).

      Thanks for the comment Rick!

  4. Ezrad Lionel July 27, 2009 at 00:12 - Reply

    JQuery is a framework that will eventually be replaced by native browser frameworks. It is still only javascript afterall, therefore cautious use of javascript will yield the same results. in conclusion it’s not the only way to spice up a site. My framework, however, creates another level of encapsulation that makes creating interesting things much easier. But creativity is always left up to the developer/designer.

    • Faz July 27, 2009 at 09:01 - Reply

      Hi Ezrad.

      Yes, jQuery is after all only JavaScript however many believe it is here to stay. One reason for this in my opinion is that, although it would be nice for a native browser framework, it’s unlikely to happen for a very long time (if it ever does) due to the relationship between the browsers (Microsoft, Mozilla, Google). However, it’s a grey area ATM.

      Thanks for the comment! Much appreciated.

  5. Jasmin Halkić July 28, 2009 at 23:53 - Reply

    Very nice article. I love jquery!

    • Faz July 29, 2009 at 07:42 - Reply

      Thanks!

  6. mommaroodles July 30, 2009 at 01:59 - Reply

    Amazing posts, thanks for sharing – I’ve only recently just started with jQuery and I’m loving it !!!! :)

    • Faz July 30, 2009 at 07:42 - Reply

      To be honest, I’m also not an expert on jQuery and JavaScript! Hoping to advance in these greatly soon.

      Thanks for the comment! Much appreciated!

  7. Tom Arnfeld July 31, 2009 at 19:57 - Reply

    Pretty much the same as everyone else,
    I love jquery to bit – i think it opens up total cross-browser effects and advanced flash-like pages without having flash, for instance iPhone or a dated browser that doesn’t support flash. :)

    • Faz July 31, 2009 at 21:08 - Reply

      That’s one of the reasons why it rocks! It’s cross-browser compatibility!

      BTW, your JQVibrator (http://tarnfeldweb.info/jqvibrator/) is awesome! Would have added it to this list if I came across it sooner!

      Thanks for the comment!

      • Tom Arnfeld September 4, 2009 at 23:42 - Reply

        Thanks so much!! :D

        • Faz September 5, 2009 at 01:03 - Reply

          No problem!

  8. nugroz August 6, 2009 at 17:49 - Reply

    jquery is great!! i lov it!!

  9. breanne i. hartman November 3, 2009 at 02:11 - Reply

    I have numerous problems with my web browser Neoplanet on your site. The monkeys are in the page :( .

    • Faz November 4, 2009 at 08:59 - Reply

      Apologies breanne i. hartman!! I’ll have to download Neoplanet!

  10. Jquery Rob November 5, 2009 at 23:02 - Reply

    Great lists. That AJAX Fancy Captcha is kind of weird though :)

    • Faz November 8, 2009 at 11:39 - Reply

      Very weird indeed!!

  11. Tyson F. Gautreaux February 1, 2010 at 00:40 - Reply

    I wish I had this level of knowledge and experience. I’ve been struggling in this area for sometime and not able to break through – this information could be exactly what I need, thanks!

    • Faz February 13, 2010 at 23:49 - Reply

      I’m sure with a little practice, you’ll be just as good!

  12. 3Turtlestudios March 9, 2010 at 08:11 - Reply

    Kick-ass collection of jQuery scripts. Very very useful. Keep up the good work.

    Chandan

  13. KarachiCorner Blog March 14, 2010 at 21:40 - Reply

    Really nice collection, i m developer and i know what is the importance of jQuery in these days..

    thank you so much for sharing.

  14. lookatthat332 May 12, 2010 at 20:13 - Reply

    This may be off base, but how about changing the layout every now and then? Maybe not if it won’t look right, but I just get tired of seeing the same thing all the time. My own computer has about 1000 wallpapers that randomly rotate every 15 minutes, lol. Good post though, thanks.

    Kelly Malthus

  15. David Peers May 15, 2010 at 20:24 - Reply

    This blog helped me somewhat in narrowing down some issues with the latest release, Why do they always seem to leave out vital documentation when they upgrade? It may be minor to them but not to me. I’m sure i’m not alone either.

    • Faz May 16, 2010 at 12:57 - Reply

      Hah hah, probably due to laznness?

  16. datshay May 26, 2010 at 07:07 - Reply

    coollllll….

  17. Luther Ratcliffe June 13, 2010 at 17:55 - Reply

    Good review. I might do a similar post about this myself.

    Another thing, liking the blog layout. I used to have a similar blog to yours before I sold it.

  18. Oma Kerslake July 16, 2010 at 01:01 - Reply

    Great article.

  19. linksys router reviews August 7, 2010 at 11:28 - Reply

    “Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.”

  20. zimebn belts October 30, 2010 at 04:00 - Reply

    i don’t usually reply to posts but i will in this case. i like jQuery!

  21. Steven November 14, 2010 at 23:44 - Reply

    jQuery. I like the Password Strength Meter, cool.

  22. tuz December 4, 2010 at 16:55 - Reply

    Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use…

  23. Marc Buurke December 6, 2010 at 13:43 - Reply

    I like jquery, however I feel that it is currently being overused in webdesign. Use it with care and only if it is functional.

  24. creative web design January 25, 2011 at 01:32 - Reply

    The same thing can be said about Flash, that is overused. I don’t see too many interesting examples using jQuery, most used with a specific function though.
    No matter how funny a script may look on your website, always use The W3C Markup Validation Service.

  25. wndr37av review January 27, 2011 at 10:33 - Reply

    I love jquery, and I think that if you use it properly, it can give your website that edge over other sites.

    There definitely seems to be a jquery fashion happening at the moment, but Im not complaining, because I really like how they look (but only if it is carried out properly). I also like how many different uses jquery has.

    Many thanks for the article, was a good read!

  26. kapil January 28, 2011 at 11:29 - Reply

    Very Nice and great jquery scripts

    thanks

  27. Ryan March 5, 2011 at 12:18 - Reply

    Thanks for the great script list. I have used jquery sliding panel script in one of my underconstruction website, but its a bit buggy to me. not sure if its my css issue or actual script is not flexible. anyone tried this? I’m trying to implement this script on this template http://www.templatesrule.com/web-templates/view-template-2857.html i purchased it yesterday and trying to edit now. current zoom script on this template is conflicting with sliding panel i guesss. any suggestion?

  28. Vinita Macchiaroli March 27, 2011 at 18:50 - Reply

    Good post, I’ll definitely be check your blog often keep it up.

  29. David G April 23, 2011 at 07:50 - Reply

    Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use.

  30. John Smith July 24, 2011 at 00:43 - Reply

    This is very interesting post, thanks.

  31. templates November 3, 2011 at 06:50 - Reply

    Very great post. I simply stumbled upon your weblog and wished to say that I have really loved surfing around your blog posts. After all I will be subscribing in your rss feed and I’m hoping you write once more soon!

  32. jayendra November 25, 2011 at 12:57 - Reply

    Hi,

    Thanks to share this. I have checked all most all plugin and they are good.

    I am thinking to use these plugin on my site.

    Thanks

  33. website designers bournemouth January 12, 2012 at 21:31 - Reply

    jQuery animation technique is a fast and one of the best ways to promote your online business. It can be frequently used to create product reviews, news and exceptional deals. It is an effective way to advertise, if you can provide some quality web design graphics to showcase your product or service.

    Thanks for this very useful and incredibly well structured article.

  34. romil797 January 18, 2012 at 19:21 - Reply

    tetris? my sites don’t need tetris :)
    But cool effects overall.
    I cud use the password strength meter, the log-in panel and the “Fancy Captcha”. They would really work for log-in/register scripts.
    Thank you.
    I’d seen all of these exept the Captcha and the password strength meter.

  35. web hosting nepal May 16, 2012 at 11:11 - Reply

    great collections. thank u so so much !!

  36. kaushik May 16, 2012 at 11:46 - Reply

    Really nice collection, i m developer and i know what is the importance of jQuery in these days..

    thank you so much for sharing.

  37. Anas Tawfeek June 18, 2012 at 20:49 - Reply

    I LIKE THAT! Very Amazing job bro.

  38. Kevin Florish October 20, 2012 at 10:31 - Reply

    Try http://learnjavascript.co.uk, for tutorials on JavaScript and jQuery from beginner to advanced, including complete references.

  39. angel December 4, 2012 at 04:47 - Reply

    anyone knows a free popup login for download? thanks

  40. Kavita Meena February 11, 2013 at 09:18 - Reply

    Nice thanks for it

Leave A Response »