Home arrow JavaScript arrow More of the Top jQuery Plugins for 2012
JAVASCRIPT

More of the Top jQuery Plugins for 2012


We recently highlighted some of the top jQuery plugins that have been released in the new year. While they can certainly help you get the most out of your site in terms of looks and functionality, there are many more that reside on the Web that are worth mentioning as well. With that being said, here are more of the top jQuery plugins for 2012. Thereís a little bit of everything in this list to give you some variety in terms of the functionality that the different plugins provide.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
March 21, 2012

print this article
SEARCH DEVARTICLES

We recently highlighted some of the top jQuery plugins that have been released in the new year. While they can certainly help you get the most out of your site in terms of looks and functionality, there are many more that reside on the Web that are worth mentioning as well. With that being said, here are more of the top jQuery plugins for 2012. Thereís a little bit of everything in this list to give you some variety in terms of the functionality that the different plugins provide.

Hovercard

No matter what type of site you have, space is precious.  You donít want pages that are filled with clutter, but you also donít want to omit important information or data just because you lack space.  With the Hovercard jQuery plugin, you can make the most out of page space.

Lightweight in nature, Hovercard allows visitors to view related information when they hover over a label, link, or other HTML element.  For example, if you have a book preview, you can employ the hover action to occur when the user hovers over the authorís name to see additional information.  By essentially embedding information this way, you can save page space while still including relevant info on your site.

Some of the highlights of the plugin include a built-in Twitter and Facebook hovercard, support for callback functions on hover in and hover out, plus full control over the HTML to be displayed.  The plugin also eliminates the need to download external stylesheets.

Link: http://designwithpc.com/Plugins/Hovercard#demo

PageScroller

Navigation is a huge element of any website, as it helps your visitors get where they want to be.  If your navigation is lacking, you may lose visitors who become frustrated with your site.  The PageScroller jQuery plugin enhances site navigation by adding smooth scroll functionality.  Itís easy to use and flexible so you can tweak the settings to fit your site perfectly.  By adding nifty little page targets to your site, users can jump directly to the part of the page that they wish to read without having to scroll all the way manually.  The orientation can be adjusted to the left, right, or top of the page, and you can also adjust the color.

Link: http://pagescroller.com/

jQuery Shadow Plugin

Adding shadows to your site is a quick and easy way to enhance its look.  This plugin handles just that, and it gives you various shadow options to choose from.  The plugin may not be the most complex around, but its final effect is one that could be useful on many sites.

Link: http://syddev.com/jquery.shadow/

SimpleVid

The main purpose of the SimpleVid jQuery plugin is one that can come in handy if you need a way to host and embed your own videos.  Sure, popular services such as YouTube and Vimeo work well, but they are not always available.  Thatís where SimpleVid comes in to save the day.  To help with compatibility, the plugin employs Flash for browsers that donít support the h.264 format.  The plugin comes with some nice options to help you customize the look of the videos, and itís easy to use so you can get to sharing right away.

Link: http://johnpolacek.github.com/SimpleVid/

Lazy Load

Have you ever visited a site with so many photos on a page that it made browsing unbearable?  You may want to view photos, but if it takes too long to load them, why waste your time?  The Lazy Load jQuery plugin addresses this issue by delaying the loading of certain images in pages that are particularly long.  Instead of image preloading, the plugin will prevent images outside of the pageís visible view from loading.  Only once the user scrolls further down will those images be loaded.  This offers a couple of advantages.  First, the page will load faster and appease your visitors during the process.  Second, you could reduce server load, allowing you to kill two birds with one stone.

Link: http://www.appelsiini.net/projects/lazyload

Gips

Itís a good idea to make your site as user-friendly as possible.  This means you may need to explain certain parts of a page.  One example would be with forms.  Perhaps itís not too clear what should be entered into a field, so adding an explanation could help greatly.  Thatís where tooltips come in.  They offer mini-explanations as a guide for visitors.  The Gips jQuery plugin helps add clean and simple tooltips to your site.  It supports CSS themes, and offers various customizable options for text, themes, animation speed, and more.

Link: http://www.egrappler.com/jquery-clean-and-simple-tooltips-gips/

youRhere Marker

A Google Chrome extension developed with jQuery, yourHere Marker was created to help readers save their place on a website.  For instance, if you are reading a long article and are interrupted, you may find it difficult to find the spot where you left off.  youRhere Marker allows you to mark your progress by simply double clicking on a line of text.  The text will become highlighted in yellow, giving you an exact spot to continue your reading later on.

Link: http://yourhere.gandtblog.com/#demo

Turn.js

Do you have a site that presents content in a book or magazine format?  If so, the turn.js jQuery plugin would be a great addition.  As its name would suggest, turn.js deals turning.  In this case, the turning is of pages, similar to if you were reading a book or a magazine.  The final effect looks great and can add some user-friendly functionality to your website.  The plugin is lightweight at only 6K and easy to manipulate to fit your needs. 

The fact that itís built to cater to HTML5 is a plus, since the technology is quickly gaining in popularity across the Web.  Another plus is that turn.js works on tablets and smartphones too, so you can capture another market that is growing.  Implementing the plugin is as easy as can be, and all a user has to do to turn the page is to click their mouse in the upper left or right-hand corner.  They can even use the cursor keys to turn pages as well, giving you and your users some added flexibility.

Link: http://www.turnjs.com/#home


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials