Home

12 Excellent jQuery Plugins for Enhancing Forms

Leave a comment

Forms are part of almost every website. Whether it’s a simple contact form or a complex sign-up form, filling one out is usually a mundane task. When possible, you should try to make form completion for the user easier and more enjoyable. Here are 12 jQuery plugins that can help you enhance your forms.

Read full entry here»

http://webdesignledger.com/resources/12-excellent-jquery-plugins-for-enhancing-forms

TableSorter: Flexible Client Side Table Sorting With jQuery

1 Comment

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.

Read full entry here»

http://www.w3avenue.com/2009/11/18/tablesorter-flexible-client-side-table-sorting-with-jquery/

http://tablesorter.com

 

 

JavaScript Framework Matrix

Leave a comment

The JavaScript Framework Matrix

shall give you an overview of popular JavaScript frameworks and their functions. There are various examples for the frameworks and every snippet contains links to the official documentation. The choice of a framework depends on many factors and can’t be made of this document only. The matrix shall solely demonstrate the different API styles and functionalities of the JavaScript libraries. In addition, there are many more interesting frameworks which are listed here.

Read the rest of this entry »

http://matthiasschuetz.com/javascript-framework-matrix/en/

AnythingSlider – The Functionality of All Kinds of Sliders In One

7 Comments

AnythingSlider is an attempt at bringing together the functionality of “featured content” slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.

It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).

Anything Slider

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingSlider/
License: License Free

View Demo Download Files

Read the rest of this entry »

http://css-tricks.com/anythingslider-jquery-plugin/

Creating iPhone-style Checkboxes with JQuery and Prototype

Leave a comment

iPhone-style Checkboxes is a progressive enhancement for standard HTML checkboxes which transforms them into the beautiful iPhone toggle switches. The change is purely visual as the underlying checkbox is not touched. The usage of the iphone-style-checkboxes library is very simple. Unzip the downloaded package place the JavaScript, images and stylesheet where you please. Make sure to update the stylesheet to point to the new location of your images if they have changed relative to the stylesheet. Once you are done with the files upload, the activation is very easy:

<head>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
  <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
    $(document).ready(function() {
      $(':checkbox').iphoneStyle();
    });
  </script>
</head>

Elijah Miller is sharing the prototype version of this library with some additional features:

  • The initial version supported changing the ON/OFF label text; but if you made the text longer than a few characters, it would be hidden under the handle. UPDATE: The handle and label sizes are automatic based on the actual label text.
  • Support for dragging the control
  • Sliding labels
  • iPhone compatibility

Source & Demo: JQuery VersionPrototype Version

A jQuery inline form validation, because validation is a mess

Leave a comment

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.

When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. When validating on submit , every errors will appear in absolute position above the input in question, and slide the scroll bar to this first error (diminish your browser window if you don’t see the effect).

The on the fly validation will validate the modified input when you click outside of the text zone.

View demo

Localisation language is also available, I already did a (poor) french localisation. Do not include more than one localization at a time in a page. Custom regEx rules with error messages can also be added very easily for you crazy guys that understand how regEx rules actually work.

Read the rest of this entry »

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/