Javascripts
35 Highly Advanced Yet Simple To Use jQuery Plugins
jQuery is a speedy, succinct library that make traversing HTML documents, handling events, performing animations, and adding AJAX simpler. jQuery imparts web developers the opportunity to make websites better with incredible elements without the necessity to write down dozens of lines of code.
In this compilation, you will find top 35 highly advanced and cutting-edge jQuery plugins that are simple to use and will improve your web experience significantly. It is no longer achievable to overlook this competent, powerful and lightweight tool when more than 40% of other websites are using it. So, it is the right time to look over and discover the recent trends of web design and development. I am sure it does gonna be a helluva race for jQuery whose development just doesn’t stop. Enjoy!
Subway Map Visualization jQuery Plugin
Gmap Google Maps Plugin for jQuery
Creating a Slick Auto-Playing Featured Content Slider
Making a jQuery Countdown Timer
Bubble Slideshow Effect with jQuery
Animated Content Menu with jQuery
Fullscreen Slideshow with HTML5 Audio and jQuery
Easy Paginate – jQuery plugin for pagination
Slideout Tips With jQuery & CSS3
Sponsor Flip Wall With jQuery & CSS
JQuery multi level accordion menu
jQuery PointPoint – A Plugin For Pointing To Things
15 jQuery Calendar Date Picker Plugins
In this collection, you will see some of the best jQuery Calendar Date Picker Plugins that will allow you output planners and calendars even more easily. Majority of these plugins are built on jQuery and jQuery UI (User Interface). With this collection, we tend to help those who need frameworks with great functionality.
You can directly incorporate these plugins into your website as they only require minor modifications and styling. These qualities make them extraordinarily acceptable because every project requires its own design and therefore you should modify style of calendar plugin as well.
Date Range Picker using jQuery and CSS Framework
BlueShoes JS DatePicker Component
AJAX Booking Calendar Pro (jQuery Calendar Plugin)
wdCalendar – jQuery Based Google Calendar Clone
Sexy jQuery Multiday Calendar Datepicker Plugin – jCal
Best Of 2011: Best Useful jQuery Plugins And Tutorials
jQuery is one of the most accepted JavaScript library that possesses an enormous collection of plugins which makes it even more powerful. On the other hand, there is a good deal of additional codes or modules, from simple alert functions to multifaceted galleries or form validation methods, that are hard-coded inside websites & not convinced to plugins.
Of course, not each code must become a plugin that would be worthless. However converting the ones to be re-utilized will save loads of improvement time & if shared with the community, will make the code itself better.
In this post, you will unearth some of the most excellent, interesting fresh and useful jQuery plugins and tutorials that were created in 2011.
( Demo | Download )
This plugin will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.
( Demo | Download )
Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item.
( Demo | Download )
MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.
( Demo | Download )
With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.
( Demo | Download )
The spin method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.
( Demo | Download )
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
( Demo | Download )
Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.
( Demo | Download )
Recurly.js allows you to easily embed a PCI compliant order form within your website. Recurly.js is a Javascript library designed to be easily embedded and customized to match your website.
( Demo | Download )
Ideal Forms is a small framework to build powerful and beautiful online forms.
( Demo | Download )
With this friendly jQuery plugin you can easily blog Block Adblock.
( Demo | Download )
Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure. Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.
( Demo | Download )
Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts. Disgusting, huh? With Sisyphus on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost.
( Demo | Download )
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.
( Demo | Download )
Responsive designs are cool! Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.
( Demo | Download )
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
( Demo | Download )
Isotope: An exquisite jQuery plugin for magical layouts
( Demo | Download )
Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects.
( Demo | Download )
With Diapo plugin you can creat a beautiufl slideshow.
( Demo | Download )
Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.
( Demo | Download )
The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
( Demo | Download )
With this plugin you can create HTML5 Music Player.
( Demo | Download )
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
( Demo | Download )
A jQuery plugin for radical web typography.
Multi Node Range Data Slider jQ Slider
( Demo | Download )
JQ Slider is a multi-node range and data slider that allows to provide easy-to-use user data selection and filter tool. It can be used in many ways.
Xml Driven Vertical News Scroller Script Using jQuery vScroller
( Demo | Download )
Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.
jQuery Sliding Content Bar Plugin
( Demo | Download )
It is a smart and quick content bar that you can integrate easily in any website or web application. It is integrated seamlessly in your website and can be popped up whenever required. PushUp Content Bar is easy to customize and strong enough to rely upon. You can add your contact details, location map via Google Maps, and a simple contact form that visitors can use to make contact with you.
( Demo | Download )
gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.
( Demo | Download )
With this plugin you can generate outstanding slideshows for your website.
( Demo | Download )
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content
Wave Display Effect with jQuery
( Demo | Download )
How cool is it to sometimes just display content a little bit differently? This plugin let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.
Simple jQuery Fluid Thumbnail menu Bar
( Demo | Download )
The idea of a fluid thumbnail bar is simple: Create a list of thumbnails within a space where the overflow can be flipped through page by page.
Useful image hover slide effect with jQuery
jQuery plugin: Easy Image Zoom
( Demo | Download )
This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.
( Demo | Download )
Use this jQuery plug-in to add lens style zooming effect to an image
( Demo | Download )
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
( Demo | Download )
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
( Demo | Download )
This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.
Responsive Image Gallery with Thumbnail Carousel
( Demo | Download )
Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
( Demo | Download )
Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
( Demo | Download )
Elycharts is a pure javascript charting library, easy to use and completely customizable.
( Demo | Download )
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
( Demo | Download )
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
( Demo | Download )
With this plugin you can create a beautiful jQuery Image Gallery.
( Demo | Download )
This jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.
( Demo | Download )
SmartGallery is an interactive image gallery that is specifically designed to support huge data. It is lightweight, lightening fast and fully customizable. Powered by jQuery, SmartGallery comes with twelve transition effects including some unique transition effect and thumbnail navigation.
( Demo | Download )
BxSlider will allow you to create a beautiful Content Slider for your website.
( Demo | Download )
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
( Demo | Download )
The pagination plugin combines a varity of features. It can be used to divide long lists or areas of content into multiple seperate pages, load paged content with pre-calculated database offset-parameters via Ajax and anything with full control to adapt the style properly to your site-layout. Of course, creating simple links with no event triggering is possible as well. The plugin also offers the facility to “overlap” pages, which means you can show elements of previous pages on the subsequent sites in order to allow a straightforward flow of reading.
( Demo | Download )
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
( Demo | Download )
Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
( Demo | Download )
AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.
jQuery is one of the most accepted JavaScript library that possesses an enormous collection of plugins which makes it even more powerful. On the other hand, there is a good deal of additional codes or modules, from simple alert functions to multifaceted galleries or form validation methods, that are hard-coded inside websites & not convinced to plugins.
Of course, not each code must become a plugin that would be worthless. However converting the ones to be re-utilized will save loads of improvement time & if shared with the community, will make the code itself better.
50 Awesomely Useful Yet Free jQuery Tooltip Plugins
Tooltips are used to inform the users about the expected results of a button or option and are particularly helpful in making them learn how to use a product, software and website. Fundamentally tooltips are employed to put up additional information on website. With the help of jQuery, where loads of developers have achieved amazing and incredible results, now you can also create visually appealing and fully functional tooltips.
In this assortment, we are going to share a collection of some useful jQuery Tooltip Plugins. jQuery is the most well-liked technology applied throughout websites development in an enormous range at the present time. Tooltips plugins furnishes facilities to acquire more information or details on mouse hover or click events, links and on words as well like Infolinks. Moreover this technology also has employed to show notification message. Enjoy!
Side Navigation Tooltip / Popup Bubble
Build a Better Tooltip with jQuery Awesomeness
Easiest Tooltip and Image Preview Using jQuery
jQuery Horizontal Tooltips Menu Tutorials
Multiline Tooltip with HTML, CSS and JavaScript
Form field hints with CSS Tooltips
Unobtrusive and Slightly Accessible CSS Tool Tips
Create a Digg-style post sharing tool with jQuery
CSS Tooltips using generated content and HTML5
7 Excellent HTML5 Tools And Resources
There are many tools and resources out there for designers and developers, but getting by free and good ones is not that easy. That is why I am sharing 7 Excellent HTML5 Tools And Resources. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more html5 tools and resources that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Heartcode CanvasLoader Creator
The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects. The Creator is using the CanvasLoader UI Library.
Html5 File Upload with Progress
Html5 finally solves an age old problem of being able to upload files while also showing the upload progress.
Making a Beautiful HTML5 Portfolio
In this tutorial, you will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.
Create a Stylish Contact Form with HTML5 & CSS3
Here is a step by step process to create your own stylish contact form completely out of HTML5 and CSS3.
Periodic Table of the HTML5 Elements
The table here shows the 106 elements currently in the HTML5 working draft and two proposed elements.
Interactive Typography Effects with HTML5
This tutorial outlines what is really just the tip of the iceberg that is interactive design. It will go over the development of dynamic, and generative banners to give your website that little extra wow.
JavaScript Mobile Framework for HTML5 Web Apps
DHTMLX Touch is a free open source JavaScript library for building HTML5-based mobile web apps. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.
Seven Premium Style jQuery Plugins And Tutorials To Display Images On Websites
There are many jQuery plugins out there, but getting by free and good ones is not that easy. Today, we are sharing Seven Premium Style jQuery Plugins And Tutorials To Display Images On Website. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more jQuery plugins to show images that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Orbit: A Slick jQuery Image Slider Plugin
Orbit is a jQuery slider developed by ZURB. The plugin is lightweight(4KB), easy to implement and has a good set of features.
Moleskine Notebook with jQuery Booklet
In this tutorial, you will learn to create a virtual Moleskine notebook with latest posts from the blog.
SIDEWAYS – jQuery fullscreen image gallery
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.
TN3 Gallery
TN3 Gallery is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers.
PhotoSwipe
PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.
Sponsor Flip Wall With jQuery & CSS
Sponsor Flip Wal is using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.
Nivo Slider
The Nivo Slider is world renowned as the most beautiful and easy to user slider on the market. It’s completely free and totally open source.
7 Excellent Online Tools For Designers And Alike
There are many apps available for designers out there, but getting by free and good ones is not that easy. Today, we are sharing 7 Great Online Tools For Designers And Alike. Read each entry in the list and see which design tool suits your needs best.
You are welcome if you want to share more design related tools that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Swiffy
Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads). Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari.
Spur
Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working.
Screenfly
Screenfly allows you to view your website on a variety of device screens and resolutions. It makes testing your online content, mobile designs, and responsive layouts a cinch. Choose common browsers, screen resolutions, and even mimic mobile phone and tablet devices.
Launch It Now
Launch It Now is an application for all the Startups & Enterprise companies who needs launching page at start of their online space, they help them build their launching page with just 6 steps saving their time and provide them over with different tools which can help them analyze their launching page performance.
Minify and GZip Compress JavaScript & CSS tool
With this simple tool, you can minify and gzip compress CSS & Javascript files in a single click.
DropMySite
DropMySite is a free service that lets you backup your website automatically easily. The free DropMySite account comes with 2GB of space that you can use for as long as you like.
Minible
While working with clients you might found the process of having to collect web copy for a specific website a pain. Minible was a simple idea that solves this issue. The site itself is designed to be used by everyone and is also created in a way to get a client used to using a content management system and the idea of inputting data and then saving this.
Extensive Collection Of Useful jQuery Plugins For Working With Tables
jQuery plugins are quite in these days in the field of web designing and are extensively used because of their aesthetically appealing results. Through jQuery tables plugins, you can attain the maximum results in terms of functionality and flexibility. The level of flexibility and functionality that jQuery provide cannot be met with classic HTML tables.
Here we are presenting a collection of exceptional and highly functional jQuery tables plugins that let you create user-friendly tables easily and efficiently. Enjoy!
( Demo | Download )
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.
( Demo | Download )
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
Animated Sortable Data Table jQuery plugin – jTPS
( Demo | Download )
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.
( Demo | Download )
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
( Demo | Download )
This plugin allows you to animatedly sort a table based on a column’s td’s, or on the content/value of a child/descendant element within those td’s. The various td’s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.
( Demo | Download )
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.
( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.
( Demo | Download )
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
( Demo | Download )
The treeTable plugin allows you to display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.
( Demo | Download )
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list. Individual rows can be marked as non-draggable and/or non-droppable. Rows can have as many cells as necessary and the cells can contain form elements.
( Demo | Download )
With this useful plugin you can convert characters to tables using jQuery.
( Demo | Download )
With jQuery rowCount plugin you can automatically add table row count column to your tables.
( Demo | Download )
uiTableFilter is a jquery plugin for filtering table rows.
( Demo | Download )
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
( Demo | Download )
Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it’s parent row, set some options, and let jQTreeTable take it from there.
( Demo | Download )
This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT).
( Demo | Download )
TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.
( Demo | Download )
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!
( Demo | Download )
This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.
( Demo | Download )
JSquared Enables ability to add/remove HTML table columns and rows.
( Demo | Download )
This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing rows by clicking over a “image handler”.
( Demo | Download )
graphTable provides the ability to graph the data in a simple HTML table using flot.
( Demo | Download )
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features.
jQuery floating table header plugin
( Demo | Download )
A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by the settings forceClass and markingClass.
( Demo | Download )
LiveFilter is a very lightweight jQuery plugin that will filter either an ordered or unordered list and display only the results that match the supplied string.
( Demo | Download )
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.
Using jQuery To Manipulate and Filter Data
( Demo | Download )
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this tutorial, author will go over four techniques: hover effects, zebra rows, filtering, and sorting.
Creating a “Filterable” Portfolio with jQuery
( Demo | Download )
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, you can learn how to make “filtering by category” a little more interesting with just a little bit of jQuery.
( Demo | Download )
List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.
( Demo | Download )
Maybe you want to sort the columns ascending/descending by clicking into the table-head. No problem! Use a handle to drag the rows.
( Demo | Download )
FireScope Grid is an open source (GNU Public License, v2) jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used. Included in the plugin is a navigation bar that is automatically appended at the beginning or end of a table that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.
( Demo | Download )
FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.
( Demo | Download )
This jQuery plugin allow you to add on-the-flight cell editing functionality in your table You may configure it to perform AJAX queries and returning changed content or error messages.
pfSelect – click drag select for huge datasets
( Demo | Download )
This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class “selectable”) and doesn’t calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.
( Demo | Download )
jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).
( Demo | Download )
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.
( Demo | Download )
Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.
( Demo | Download )
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.
45 jQuery Plugins And Tutorials To Enhance Your Forms
Creating awesome and appealing forms for your website has now become easy, thanks to jQuery plugins. Here we are sharing with you a collection of some extremely useful plugins and tutorials to help you create beautiful and awesome web forms.
Web forms are the crucial element for any website as website visitors use such forms to interact with the webmaster. Therefore, keeping them neat and functional while maintaining their aesthetic appeal is important. Here is the complete list. Enjoy!
Boxy –Facebook-like dialog/overlay ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.
A jQuery Inline Form Validation ( Demo | Download )
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. 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.
ToChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.
A Fancy Contact Form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.
Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.
Creating a Digg Style Sign Up Form ( Demo | Download )
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.
jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.
Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.
LightForm ( Demo | Download )
LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.
MeioMask ( Demo | Download )
With meioMask plugin you can create and apply maskstot text input fields.
LiveValidation ( Demo | Download )
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms.
WordPress plugins for contact forms ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.
How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started
Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.
Timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.
Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.
JQByte StickyForms ( Demo | Download )
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.
File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!
A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.
Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.
jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.
Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.
prettyCheckboxes ( Demo | Download )
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.
Improved Current Field Highlighting in Forms ( Demo | Download )
In this tutorial CSS expert Chris Coyier will tell you how to improve your form usuability and enhance them visually.
jQuery Ajax delete ( Demo | Download )
Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax. In the download and demo you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment div with a slide up animation which will remove the div. click the image below to check out the demo.
jQuery Auto Complete ( Demo | Download )
Auto-complete takes input from the user, and tries to form a list of words that match the users input. The function attaches itself to the input field selected, and also creates the UL drop down from within so all you need is have the styles for it ready.
Date Picker ( Demo | Download )
Date Picker component with a lot of options and easy to fit in your web application.
Plugin for Password Masking ( Demo | Download )
This plugin gives users the option to see the chracters of the password the are entering, for usability purposes.
jQuery Form Plugin ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.
Input Fields with Images ( Demo | Download )
With this plugin you can add icons or images inside of input fields to add some flair to your forms.
Elastic ( Demo | Download )
Elastic makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.
jQuery Checkbox ( Demo | Download )
This plugin allows you to style your forms checkboxes or radio buttons.
iPhone Style Checkboxes ( Demo | Download )
With this plugin you can enhance standard HTML checkboxes and gives them an iPhone-like styling.
jQuery Autosave ( Demo | Download )
Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong. The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.
AutoTab ( Demo | Download )
Autotab provides smart auto-tabbing and filtering on text fields in a form. Simply put: once you have typed the maximum number of characters in a text field, you will automatically have focus on the next defined text field. Target text fields are defined, as well as a defined previous text field.
Magicpreview ( Demo | Download )
Magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.
Using form labels as text field values ( Demo | Download )
When designing you sometimes have limited space to put and display all of the form elements. Recently that happened to me and when I was trying to squeeze in a simple newsletter form to a 120px wide area (plus a limited height). I realized that some of the elements will have to go. The obvious solution was to get rid of the labels and put only the form text fields. How will the users know what are the text fields for? I will use value attributes and write the explanation in there, something like “Input your email here”. Problem solved? Not quite. Why? Because I am a web standards freak 
Checking username availability with ajax using jQuery ( Demo | Download )
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.
jQuery Highlight plugin ( Demo | Download )
Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
A Fancy AJAX Contact Form ( Demo | Download )
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.
ASM Select ( Demo | Download )
A progressive enhancement to select multiple form elements. It provides a simpler alternative with lots of advantages.
BABYSTEPS ( Demo | Download )
BabySteps (A ‘What About Bob?’ reference) is a simple and easily configurable tool for turning long forms into broken out steps without going from page to page.
BS FORM ACCELERATOR ( Demo | Download )
BS Form Accelerator will be able to use Enter or Space buttons in your forms replacing the buttons such as Tab for changing focus in fields just with assigning an ID to the form.
Awesome jQuery Techniques To Create Visually Impressive Photo Galleries
Here we have gathered a round about of some amazing jQuery image galleries and sliders that we hope you will like. You must have seen many of these jQuery image galleries and sliders on different portfolio websites because they are easy and helpful in displaying images and photos than any other medium.
The most amazing thing about jQuery is that you don’t have to be a techie to add jQuery to your website, you can easily add it even if you don’t know much about JavaScript and jQuery. So let us take a look at this assortment. Feel free to share your opinion with us.
Full Page Image Gallery with jQuery
Sliding Panel Photo Wall Gallery with jQuery
Create Fantastic Lightbox – Style Galleries and Slideshow
HTML5 Slideshow w/ Canvas & jQuery
Thumbnails Navigation Gallery with jQuery
Create image gallery in 4 lines of jQuery
AD Gallery, gallery plugin for jQuery
Animate Panning Slideshow with jQuery
Auto-Playing Featured Content Slider
Automatic Image Slider w/ CSS & jQuery
Create a Slick and Accessible Slideshow Using jQuery
Create Scrollable Interface with jQuery Image Scroller Plugin
Minimalistic Slideshow Gallery with jQuery
Image Highlighting and Preview with jQuery
Beautiful Photo Stack Gallery with jQuery and CSS3
Multimedia Gallery for Images, Video and Audio
Awesome Mobile Image Gallery Web App
