It's a common problem, you have a text form that you need to validate client side. It's easy enough to do this when the form is submitted but in some cases better to do as they type.

Imagine how annoying Twitter would be if you had to submit your tweet before it told you how many characters you had left. On the other hand this same immediate validation can be abused if overused. Don't insult the user by congratulating them for each and every text field they fill in.

Implementing this requires binding events to the keyup event, and a couple other events if you want to detect text changes on cut and paste. Even if you're a JavaScript god it's tedious to keeping writing this logic over and over again. Be smart and use the ZURB text change event plugin instead.

Published under: Forms | License Free

Fancy Sliding Form is a fancy sliding form that shows some validation feedback to the user after each step.

Fancy Sliding 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.

 

Published under: Forms | License Free | Validation | Animation

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks. 

 

Published under: Calendar | GPL License | MIT License

The ternElapse plugin allows you to cover any HTML element with a transparent mask and place a loading image and text at the center of the mask. With this plugin you can open and close the mask, change the text and/or image inside the mask or include no text or image to begin with. Cover the document body or cover any other block level HTML element.

ternElapse Features :

  • Cover any block level HTML element with a transparent mask.
  • Specify the color of the mask with any hexadecimal representation of your color.
  • Specify the opacity of the mask by percentage.
  • Change the text that goes inside the mask.
  • Specify an image that you’ve created or from my stock images to go inside the mask.
  • Use the mask with or without text and image.

Published under: Popup | License Free

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

So how it works? When user makes a selection in input field Minibar pops up, semi-transparent, above the selection. When user hovers the Minibar it fades out. It disappears when user clicks anywhere in the input field or performs an action by clicking on a Minibar button.

Creating Microsoft Office Minibar with jQuery and CSS3 will be shown in this tutorial which was written by Janko - it has only bold, underline, italic, and link buttons.

 

Published under: Menu | License Free

AeroWindow  is a jQuery plugin for creating Windows 7-like aero style pop-ups.

The pop-ups not only look like a native Windows element but also behave similarly as well with the minimize, zoom, maximize and close functions.

There can be multiple pop-ups in one page where the active one is highlighted visually.

All can be resized, drag'n dropped or maximized with double-clicks, all like Windows.

AeroWindow has various options like defining:

    - window titles
    - start positions (x-y or centered)
    - standard and minimum sizes
    - getting the status of an open window
    - applying animations on windows


The plugin is pretty awesome specially for anyone who wants to build an OS-like web interface.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.soyos.net/aerowindow-jquery.html
Demo: http://www.soyos.net/tl_files/demos/aero-window/

Published under: Popup | Tooltips

Do you want to be able to create and style an audio player using just HTML and CSS?

jPlayer is Free, Open Source jQuery plugin developed by Happyworm that allows you to play and control audio files in your webpage, easily customize the way it looks and make it fit your pages colours and style, plus adding sound effects to these projects with the ability to create multi instanced player and integrate it with interactive playlist.

All of this with HTML5 <audio> support for compliant browsers that allow mp3 or ogg format, while supporting other browsers using mp3 format with no visible Flash.

You can also use jPlayer  to create a simple text audio player, with fade effects on buttons and and progress bar.

 

Published under: GPL License | MIT License | Audio

Do you need to be able to dynamically create and present a message box without ending up with using a lightbox alternative?

BounceBox is jQuery plugin to present notifications to the user in an eye-catching manner. You can put whatever HTML code you want in the box div and it will be properly converted to a bounceBox for example registration form, newsletter signup or even some kind of advertisement as the content of the box div.

It is really easy to use BounceBox, plus you can have more than one bounce box on the page in the same time.

 

Published under: Popup | License Free

YouTube Chromeless Video Player is a jQuery plugin written by Trevor Davis allows you to buld a custom YouTube video player with the ability of adding multiple videos on the same page.

YouTube Chromeless Video Player functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look.

This great jQuery plugin requires jQuery, and SWFObject.

 

Published under: Video

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers, it's really small 6Kb and works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).

You can add tints of any colour (including black or white) to the small image, zoom position can be inside the smaller image, and apply a subtle soft-focus effect to the small image.

 

Published under: Tooltips | MIT License