17 Useful jQuery Plugins For Developers

Web users love informative clues. Whatever questions and misunderstandings might occur – delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips – used correctly; they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for. Tooltip is a good way to show extra information when user hovers the cursor over an element, If a tooltip on your website is very well made and looks amazing then it can improve our site’s user friendly level, and also save us a lot of spaces. Have a look below “17 Useful jQuery Plugins For Developers” and do experiments with jquery. Enjoy

Shiny Tooltips

CSS3 is used for the gradients and shadows but Opera will just render one background color. The gradient background does work with IE because it uses filters. This item is also compatible with Chrome 7 & 8.

There are only 2 files to include in the HEAD : tooltips.min.css and tooltips.min.js. You also need jQuery.

This item comes with a very detailed documentation with lots of examples. A PSD is included.

jQuery Plugin Preload Images

Today, I came across a great jQuery plugin that will preload your images. This file now has a permanent spot in my “resources” folder. The plugin essentially scans your CSS files and preloads all of the images within it.

s3Slider jQuery Plugin

Boban created a wonderful “featured content” jQuery plugin. You’ve seen this effect many, many times. Now you can easily implement the functionality into your own web apps.

Create a jQuery Plugin

You might think to yourself, “What is all the fuss with jQuery? You have to download a bunch of plugin to even make the library worth while.”. First, that isn’t true. Second, the jQuery library was specifically designed for that very purpose. By keeping the core library as small as possible – about 16 kb – users can then apply additional plugins at their own discretion. Today, I’ll teach you how to build your first “Center” plugin from scratch. Let’s get started!

Submit A Form

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’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let’s get started.

Simple Tooltips

Here’s some examples of simple tooltips using some of the default options provided by the simpletip library.

jQuery Lightbox

I couldn’t tell you how many lightboxes I’ve used over the last few years. This specific lightbox was designed as a plugin for the jQuery library. It works perfectly, and more importantly, requires no additional markup to your document. You only need to call it from your Javascript file. You’ll have zero problems!

Building the imgPreview jQuery Plugin

Today, we’ll be featuring the winner of our “Screencast Competition”. Created by James Padolsey, this video tutorial will demonstrate how to build a relatively advanced jQuery plugin from scratch.

A big congratulations goes out to James. He’ll be receiving $200 cash, a 1 year subscription to TUTS+, and $100 worth of credit at our Envato marketplaces.

An Intensive Exploration Of jQuery

Ben Nadel has generously created a comprehensive video overview of the jQuery framework. He carefully covers everything from the basic hide/show methods, to jQuery’s AJAX capabilities. This is a “DON’T MISS” tut. I highly recommend it.

Information balloon pop-ups

For Corl DeLuna, thank you.

This one has a little bit extra to my previous demonstration. Links in the pop-ups.

The method is based on my drop-down and flyout menus whereby Internet Explorer can be made to recognise nested links by using tables.

Hover the mouse over any of the web pages to see a pop-up information box with the site name and a snippet of information. Also included are three links from the particular web site.

Non IE browsers are able to use the li:hover styling to show the pop-up balloon but IE is limited to using a:hover. Conditional comments are used to feed the nested links to IE5.5 and IE6.

IE7 beta 2 recognises li:hover so it is excluded from the conditional comments.

This works in IE5.5, IE6, IE7 beta X, Firefox, Opera etc.

IE5.01 will just see the browsers images which can still be clicked to take you to the web site.



Now you can replace the ugly default tooltip with this smart and nice one!


Overview :   Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

Basic: By default, tooltips will appear centred underneath their anchor:

Sticky Tooltip script

This script adds a rich HTML tooltip to elements that’s revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The tooltip can be “stickied”, or kept visible on the screen by right clicking on pressing “s” should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you’ve got yourself a tooltip that can do more than just show extra information, but serve it as well!

Build a Custom jQuery Tabs Plugin

In this week’s 45 minute Premium video tutorial, I’ll personally teach you how to build a flexible jQuery tabs plugin. This plugin will automatically create the individual tabs, allow for auto-switching, fading, and plenty more – without being bloated. Why create a tabs plugin when there are plenty of them already available? Because too much abstraction is never a good thing.

Nobody Used Your jQuery Plugin

With so many folks developing jQuery plugins, it’s not uncommon to come across one that just plain – for lack of better words – sucks. There’s no examples or documentation, the plugin doesn’t follow best practices, etc. But you’re one of the lucky ones: this article will detail the pitfalls that you must avoid.

jQuery is no stranger to those of you frequent Nettuts+. Jeffrey Way’s awesome 30 Days to Learn jQuery(and various other tutorials here and elsewhere) have led us all down the path to Sizzle-powered awesome sauce. In all the hype (and a lot of leaps in JavaScript adoption by developers and browser vendors), plenty of plugin have come onto the scene. This is partially why jQuery has become the most popular JavaScript library available! The only problem is that many of them aren’t too great.In this article, we’ll focus less on the JavaScript specifically, and more on best practices for plugin delivery.

Excited About in jQuery UI 1.9

jQuery UI 1.8 has been around for a little while now. In fact, it’s currently on version 1.8.16. jQuery UI 1.9 is under active development and brings a number of new widgets to the table, along with the usual improvements in stability and performance.

The biggest changes are, of course, the new widgets themselves, but there have also been modifications to some of the existing widgets. We’ll look at the new widgets first. The widgets are in the advanced stages of development, but you should be aware that the widget’s APIs are still subject to change until they are fully finalized.

Create a jQuery Plugin

It’s tough. You read tutorial after tutorial, but they all assume that you know more than you actually do. By the time you’re finished, you’re left feeling more confused than you initially were. Why did he create an empty object? What does it mean when you pass “options” as a parameter? What do “defaultsettings” actually do?

Never fear; I’m going to show you exactly how to build your own “tooltip” plugin, at the request of one of our loyal readers.


Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

log in

reset password

Back to
log in