Fresh Useful & Powerful jQuery Plugins - The `write less, do more` JavaScript library is great for rapid web development. New components, tools and applications are literally popping up on daily basis. Numerous plugins are also available to help jQuery developers. I have compiled a list of jQuery plugins that you may find really useful.
Showcase your gallery in style with ppGallery, an advanced lightbox photo gallery plugin built with the jQuery Framework. It is lightweight, unobtrusive and installs with ease. It has been tested on the latest versions of IE7, IE8, Safari, Firefox, Google Chrome, Camino and Opera.
MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.
WOW Slider is a jQuery Image Slider with stunning visual effects and fancy templates.
zLayers is a jQuery plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creative methods.
A cool jquery/css thumbnail scroller plugin inspired by the ones made in Flash. It works by cursor movement and it's simple to configure and easy to style through css.
Choose which form controls get styled -- all, buttons only, checkboxes and radios, textareas and selects?
SliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index).
FBModal is a jQuery plugin that is the first FaceBook replica modal dialog.
Tipped allows you to easily create beautiful tooltips using your Javascript framework of choice.
Pines Grid is a JavaScript data grid plugin for the jQuery JavaScript library, developed by Hunter Perrin as part of Pines.
jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.
This plugin is very easy to use. Just target the element you want to highlight.
Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.
This jQuery Plugin allows you to skin standard form elements (select, input, textarea) with CSS.
StickyForms is a jquery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.
The panoscoper plugin allows you to take any DOM object and wrap it into a 360 panorama, leaving interactivity intact. This includes Images, Div boxes, and even Video. Currently in alpha development.
This plugin adds title and description on an image visible on mouseover. Slide has several effects: above, left, right and bottom. Fully customizable and easy to apply ... Here you will find all info about it.
Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.
jQuery Capty is a plugin jQuery Capty is a plugin that creates captions over the images.
Horizontal Box Slider is using native scrolling. There are a lot of “carousels”, but none of them is using it.
This lightweight jQuery Share Plugin allows you to easily add share buttons for Social Bookmarks to your website - with only a few lines of code.
jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Thumbnail Gallery JQuery plugin is a easy to use JQuery plugin for web developer to build Javascript gallery on their web application. The gallery can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography portfolio.
It is a plugin which Highlights the rows of a table.You can navigate to previous or next table row by pressing the left or right arrow keyboard keys. You can also click on the panels to navigate.
"infiniScroll" was written as a jQuery plugin. It works for blog posts... but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling?
Simple Fade SlideShow is highly customizable with CSS and it can create the list and buttons automated or you can create your own individual elements and Simple Fade SlideShow will only bind the relevant functions.
10 jQuery Accordion Plugins & Tutorials - jQuery Accordion is a really easy way to squeeze a bunch of text, images, buttons, or whatever you are using in to a smaller area.
Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.
Easy Accordion Plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images here!), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free!
This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.
When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content.
JQuery Micro Accordion Plugin is a small (1.33 KB) plugin that creates a simple accordion - no bells or whistles. It's pretty easy to use just download it at the bottom of this post. A demo is included in the download.
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.
Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it’s own hands and applies a glowy blue border around active form elements
When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial I’ll show you how to use jQuery to do some instant checking on an example comment form.
Ah... form validation. A subject that has been the source of debates ever since Web browsers were born. There are as many ways to implement form validation as there are opinions of the best way to do it. This article discusses client-side validation using jQuery's validation plugin. That is, we will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.
A lot of forms can be boring and plain, don’t 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.
There are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.
Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.
Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Impressive techniques using some jQuery magic to style slick forms with a simple, rich user experience that gets them excited about your contact, register or whatever form you have.
Providing instant feedback is the in-thing right now. Why limit yourself to checking usernames and email addresses? Why not extend this to provide quick visual feedback about the strength of the password the user has input? Today, we’ll take a look at how to create a simple password strength checker using the jQuery library, regular expressions and a simple algorithm.
Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design.
This tutorial will show you how to use the "Popular Queries" feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.
The time when username availability is checked after the page is normaly processed is long way behind us. Google has it, Yahoo has it and many many more sites have it, ajax username availability checker. So in this tutorial we will make an ajax username availability checker powered with jQuery.
Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post we’ll feature 25 useful plugins that you may be able to use in your own work with forms.
