31 Refreshing Jquery Techniques/Plugins

The Jquery Javascript framework is awesome. I've been experimenting with some Jquery techniques to implement on this blog and I found really a lot of interesting techniques which are really easy to implement and could easily enhance the overall user experience of your visitors. So I've decided to compile and share a list of those plugins/techniques. So here we go:

 

Kwicks For Jquery

Kwicks implements a very attractive menu, which slides and opens up on hover. It looks really good and the animation is really smooth.

 

Jquery Captify

This Jquery plugin implements in-image caption on hover. This looks great and might be a good addition to some portfolio website where images are predominant. Check out the screenshot below, the words "My Pup, Cider" appears on hover using the Captify Jquery plugin.

 

JQuery Columnizer

Columnizer will automatically convert your content into a newspaper style layout. It is really simple to use, either specify the number of columns or the widths, and you're done. It takes care of the rest.

 

JQuery Sunday Morning Translator

This Jquery plugin allows you to easily implement word translation on your website. You can translate individual words or a block of text, without any other HTML elements like images, or else Sunday Morning does not work (Personal experimenting here, and no hack available (according to developer) to support images, which would have been wonderful...). When you double click on the word, you get the translation menu, which itself looks very nice. You can then select which language you want the to translate to and the plugin uses Google Translate to do the translation and AJAX to seamlessly load the translated content into the page. You can translate into 30+ languages and the plugin is also available as a bookmarklet.

 

JQuery Lazy Load

This plugin is a very good plugin, which I myself use on Codefusion Lab. What it actually does is that it delays loading of images below the fold (not visible to visitor until scrolled into view). It is the opposite of image preloading. If you web pages are long and contain lots of images, then this plugin might speed things up a bit and load only required images when they are needed and not only this, you get to save bandwidth too! If you want to use this plugin, make sure you are using it with Jquery 1.2.x, because it does not work with later versions.

 

JQuery IPod-Style Drilldown Menu

The menu which this plugins allows you to implement trys to mimick the Ipod user interface. This type of menu will be of great use on pages where space is limited.

Jquery Text Sizer

This tutorial shows you how to implement a nice text sizer slider to enable your visitors to increase the font of the text in a very astute way.

 

JQuery JQZoom

JQZoom allows you to implement zooming for images on your website. This is ideal for portfolio website, where images need to be seen in as much detail as possible.

 

JQuery IconDock

IconDock allows you to create a Mac OS X like dock for your website to diaplay links. It has nice rollover effect.

 

Jquery Fading Header

This little tutorial shows you how to create a very cool fading header image.

 

JQuery Coda Style Tooltips

This tutorial shows you how to implement the tooltip implemented at Coda's Website, which is a very nice effect showing up when you hover over the download link at their website.

 

JQuery Hover Sub Tags

Hover Sub Tags is about showing main tags on the page, and showing sub tags when you hover over the main tags. It is useful if you don't want your tag space to be cluttered with very sub tags.

 

JQuery Drop Shadows

The Drop Shadows script can add shadows to any HTML element on the fly. It is very good if you want to place shadows behind images without wanting to code intensively for it.

 

Jquery Gradient Plugin 1, JQuery Gradient Plugin 2

These plugins allow you to add gradient to DIVs very easily. Here, we're providing links to 2 plugins which provide nearly the same functionality. It's up to you to choose which one you'd like to use.

 

Jquery.BiggerLink

Jquery.BiggerLink allows you to make the container of a link to behave as a larger clickable area for the link. This provides better click conversion and will be useful if you need to have those clicks.

 

Jquery LavaLamp

LavaLamp is a script coded to allows you to easily implement a LavaLamp menu for your website. It is an extremely lightweight script, and very easy to implement. The link here points to a tutorial and a demo.

 

InnerFade

This scripts allows you to fade any element inside a container in and out. Say you want a new ticker, this will fade the headlines between each other.

 

JQuery Tooltip (With Ajax)

This tooltip script allows you implement fully css styled tooltips, with the ability to pull content into it using ajax. This is a very nice effect and can be very useful if implemented in the right project.

 

Jquery Curvy Corners

Jquery Curvy Corners allows you to apply rounded corners to HTML block elements. Supports all major browsers.

 

JQuery Live Blogroll

This is a Wordpress plugin, using Jquery under the hood. It allows you to make your blogroll look better. When you hover over the links in the blogroll, the plugin uses AJAX and fetches the latest posts from that website to display in a simple CSS-styled menu.

 

Jquery Pop! - Simple Pop Menus

This simple Jquery script will allows you to create dropdown menus easily. This is ideal for language selection list and things of the sort.

 

JQuery Link Favicon

This amazing little script will add the favicon of the website it is linking to, besides the link itself. It looks really nice and might be useful in some projects like website directories.

 

JQuery Image Menu

JQuery Image Menu implements a nice image menu, similar to the Kwicks menu reviewed above.

 

JQuery Sexy Curls Page Peel Effect

JQuery Sexy Curls implements a cool page peel effect for your website. You need to peel the page off manually, with your mouse so as to see what's hidden behind.

 

JQuery Font Resizing With Animation

This allows you to modify the size of the font on a website, but goes a step further by enabling smooth animation effects on increase or decrease of the font size.

 

Jquery Auto Complete In Google Custom Search Engine

This very in-depth tutorial from Net Tuts+ shows you how to implement an auto complete feature for your Google Custom Search Engine. The tutorial is very easy to follow and easily implementable.

 

JQuery Seek Attention

JQuery Seek Attention allows you to grab the attention of your visitors by fading an element in out out repeatedly. It's really hard to find the right words to describe it. So see the demo or the screenhot below to get a better idea of it.

 

Easy Tooltip Styling Using JQuery

This script is probably the easiest way of styling tooltips on a website. Codefusion Lab uses it, and I can tell you that it's really easy to implement.

JQuery Scroll To Anchor

JQuery Scroll To Anchor implements a nice scroll to anchor feature on your website. Instead of just jumping to the defined anchor, this script scrolls the page to that anchor. It is visually more appealing and less disorientating.

 

JQuery Collapsible Breadcrumbs

JQuery Collapsible Breadcrumbs, as its name suggests, implements a collapsible breadcrumb for your website. This is especially useful if your breadcrumbs tend to get very long.

 

JQuery Glimmer

This is an application which allows you to code animation in Jquery, without have to write code. It automatically generates the code for you.

 

 

That's it. Enjoyed the post? Feel free to leave a comment below!