All About jQuery: Fresh and Useful jQuery Plugins and Tutorials
Every designer knows that jQuery is not only a handy tool, but it is also very popular and widely implemented. Thus, they try to master their jQuery skills. If you fit into this category then this post of over 40 fresh and cool jQuery plugins and tutorials is for you. This showcase should allow you to grab some of the techniques required for developing a more interactive and visually appealing website with jQuery and harness the power of this tool.
When you come out the other side of this collection and have finished learning all that these plugins and tutorials throw at you, we hope that using jQuery will be a much simpler task. Which will hopefully translate into more satisfied clients and users. Enjoy!
Password Strength Verification with jQuery ( Demo | Tackle the Tutorial )
In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.
Create a Windows-like Interface with jQuery UI ( Demo | Visit the Source )
In this tutorial, you will learn how to utilize jQuery UI to create a highly-functional user interface without using anything else. By the end, you should be familiar with jQuery UI, some of its components, and basic understanding of jQuery UI’s customization.
Akordeon ( Demo | Visit the Source )
Akordeon is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space. For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category’s data displayed in a separate panel.
Fast and Simple Links Box Navigation Menu: BoxyMenu ( Demo | Visit the Source )
BoxyMenu is a simple and fast navigation menu plugin that renders smoothly in all major web browsers. It is simple to customize and can be plugged in to any website or web application.
Item Blur Effect with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up.
Fullscreen Image Blur Effect with Html5 ( Demo | Visit the Source )
With this jQuery plugin you can create a fullscreen image display with small thumbnail navigation and a blur transition effect for smooth image changes.
jQuery Plugin for On-demand Search Box: SeacrhMeme ( Demo | Visit the Source )
This jQuery Plugin is called SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website. Clicking on search button expands it to show a text box where you can type your search terms.
Multi-Level Hierarchical jQuery Menu: jQSimpleMenu ( Demo | Visit the Source )
jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menus in your website without writing a single line of code.
Making a jQuery Countdown Timer ( Demo | Visit the Source )
With this jQuery plugin you can display a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates every second.
jQuery List Items Menu Like iPhone Display ( Demo | Visit the Source )
A jQuery plugin that allows you to display list items in a similar way to an iPhone home screen. If the item count exceeds the number of displayed items on one screen, users can swipe through screens.
Shiny Knob Control with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a shiny knobbed control, with CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.
Arctext.jp – Curving Text with CSS3 and jQuery ( Demo | Visit the Source )
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
Thumbnail Proximity Effect with jQuery and CSS ( Demo | Visit the Source )
With this jQuery plugin you can create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance.
Lateral On-Scroll Sliding with jQuery ( Demo | Visit the Source )
With this jQuery plugin you can create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, now you can have it on yours.
Elastic Image Slideshow with Thumbnail Preview ( Demo | Visit the Source )
With this jQuery plugin you can create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and users can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
More on Page Two
We are just about halfway through the post, but don’t move on just yet, there is still more jQuery goodies on page two.
About the Author
Nousheen Aquil is a web graphic designer. She loves photography, drawing and painting. She also is a contributing member of WebdesignCore , a platform that focuses on free web resources and inspiration for designers and developers.