Interactive jQuery Plugins

The key to a successful design is interactivity. Interactivity makes a design usable and friendly. These interactive jQuery plugins showcase the simple yet inspiring ways in which interactivity can be added to designs.

1. Presentation Cycle – Cycle with a progressbar

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements. Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear. In this article I will explain how to implement this on your web page and give you some tips on how to adjust the looks of the cyc

2. How To Create A Keypress Navigation Using jQuery

The key to a succesful website is the ease with which a user finds what they are looking for. Thus, it is worth spending a lot of time and effort in creating both useful and visually appealing navigation systems. Lately, I have began experimenting with new ways to navigate a website. In this tutorial I will show you how to let the user make use of their keyboard to get around your site.

3. Glowbuttons Using jQuery

This jQuery plugin helps you to create glowing buttons using jQuery.

4. Create a Twitter-Like Load More Widget With jQuery

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

5. Create A Tabbed Interface Using jQuery

Creating tabbed interfaces suddenly becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!

6. Blur Links With jQuery

This quick tip covers a quick usability upgrade for links on AJAX pages. By most browsers default a dotted line stays around the link after it has been clicked. This becomes a problem with AJAX because the pages are often not reloaded. Turning it off is simple with jQuery without any impact to the functionality. Give your links some love now and make the appearance smoother for the user later!

7. jQuery liScroll – A jQuery News Ticker made easy

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

8. Simple chained combobox plugin for jQuery

Very simple chained selects plugin for jQuery with JSON processing and callback feature, chain multiple selects with ease.

9. jTabber For jQuery

First off, Merry Christmas! For those of you who feel that I am scrouge for not giving you anything for Christmas, well I am about to prove you wrong. I spent a few hours on Christmas eve building a little tabbed menu script. I built it with the jQuery framework and I call it jTabber. It allows you to scroll through content by clicking on tabs, without the page having to reload. The content is already on the page, you just need some javascript to tell it to display. It is very flexible in what

10. jquery Hover Sub Tag Cloud

Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the sites 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, so our demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mo

11. jquery Biggerlink

A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.

12. Humanized Messages for jQuery

Interact with your users with humanized messages.

13. How to Load In and Animate Content with jQuery

In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

14. Submit A Form Without Page Refresh using jQuery

Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I will show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery!

15. Simple Draggable Element Persistence with jQuery

At some point you may need to create a draggable element within your web application. This is great functionality, however you may want or find that you need the element to stay in place after being dragged around. In this tutorial I will show you how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.

16. Changing Form Input Styles on Focus with jQuery

A lot of forms can be boring and plain, do not let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.