jQuery Smart Timer And Counter

jQuery Smart Timer And Counter

Smart Timer And Counter is a jQuery plugin that can be used to add timers and clocks to the web page. Plugin is highly configurable and expandable through custom skins (visual component), modes (clock/timer logic) and languages (translate labels).

  • Styling is done using CSS (and Canvas for Circular skin), and all included styles are pure CSS with no images used.
  • Responsive, uses media queries to change counter sizes, and it can break into multiple lines on smaller screens.

jQuery Fly Side Menu

jQuery Fly Side Menu

Fly Side Menu is a script that will recreate the impressive animation you see on Airbnb’s new iOS7 app using jQuery and CSS3. In additional to that, I’ve also added a few more options for you guys to play around with.

jQuery Isotope for Twitter Bootstrap

jQuery Isotope for Twitter Bootstrap

Combines the epic powers of Twitter Bootstrap and jQuery Isotope

jQuery Masked Input Plugin

jQuery Masked Input Plugin

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:

  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)

Responsive CSS3 Data Grids

Responsive CSS3 Data Grids

Responsive CSS3 Data Grids are used to present typical tabular data. Their advantages over the standard table are expandable rows in a form of drop down accordion sections, ability to highlight individual rows, hover states, table cell and headings tooltips. In addition the table is fully responsive and adapts well to the resolution of different mobile devices like iPad or iPhone by grouping the data into rows. Additional drop down panel allows to show / hide selected columns for easier data comparison.

Features:

  • Pure CSS3 + HTML,
  • Responsive Layout,
  • IE8 JS Fallback,
  • Expandable Rows,
  • Ability To Expand Multiple Rows At Once,
  • Ability To Expand Only One Row At Once,
  • Ability To Expand Selected Rows By Default At Startup,
  • Ability to Highlight Single Table Row,
  • Hover States,
  • Columns Filtering,
  • CSS3 Tooltips,
  • 4 Predefined Color Skins

bselect : Select decorator component for Bootstrap

bselect : Select decorator component for Bootstrap

The select decorator component that was missing for Twitter Bootstrap.

Features:

  • Bootstrap-like dropdown decorator for <select> elements
  • Easy to use, a simple jQuery call and you’re done!
  • Doesn’t require any Bootstrap CSS or JS to work
  • Tested via QUnit
  • Support for internationalization
  • ARIA ready

jQuery.creaseFont : jQuery Plugin to resize the Font

jQuery.creaseFont : jQuery Plugin to resize the Font

jQuery.creaseFont is a Plugin for jQuery to resize the Font on the whole Page or only in some Elements.

Image Caption Hover Animation with CSS3 Transitions & Transforms

Image Caption Hover Animation with CSS3 Transitions & Transforms

This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of demo page to understand how the animation is working.

ColourBrightness.js : jQuery plugin to determines the Background Colour

ColourBrightness.js : jQuery plugin to determines the Background Colour

A lightweight and easy-to-use jQuery plugin that determines if the background colour of an element is light or dark.It’ll grab the background colour of that element and uses a small algorithm to determine the brightness of the colour and will add the class light if the colour is light and dark if the colour is dark.

jQuery Photo Enlarger

jquery-photo-enlarge

A simple widget in jQuery to enlarge and shrink photos.