In fluid and responsive designs, it can be challenging to make sure the text -usually titles- behave how we want them to be.
FitText is a simple yet very functional jQuery plugin for making sure a text fits into a defined element.
It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser.
And, there are some options provided for a fine-tune including the ability to set "level of scaling" and mentioning min-max sizes.
Requirements: jQuery
Compatibility: All Major Browsers
Spin.js is a tiny JavaScript library that enables us to generate loading/activity indicators without any images.
It creates the UI with CSS3 (VML in Internet Explorer) and works in all browsers (even in IE6).
The spinners can be customized in several ways like setting the number of lines, their color, length, width, radius, speed of the animation and the trail effect. Such a flexibility ends up in many possible variations.
And, Spin.js weights only 1.7kb gzipped which is smaller than an animated GIF file in most cases.
P.S. Although, it is a standalone library, there is an optional jQuery provided.
Requirements: No Requirements
Compatibility: All Major Browsers
An option for resizing text is a very good way of helping visitors to read easier.
jFontSize is a jQuery plugin for integrating the popular "A+ and A- buttons with the functionality of resizing text" into web pages.
The buttons are actually inserted with standard HTML-CSS (so any type of buttons can be used) and the plugin controls the resize part.
It is possible to target a specific element (or the <body> for the whole page) and the resizing will be applied only to the contents of that element.
Also, various options can be configured like the "max-min number of resizes" and "how many pixels each command will resize".
Requirements: jQuery
Compatibility: All Major Browsers
Grumble.js, a jQuery plugin by the developers of Huddle.com, enables us to create tooltips as bubbles.
The positioning of these tooltips are very flexible and, with the help of "angle" and "distance" settings, they can be pixel-perfectly placed (by using CSS3 transforms and Matrix filters for IE).
Bubbles come from a sprite image and the plugin decides which image to use according to the size of the text.
Tooltips are displayed with a fadeIn/fadeOut effect, can be set to auto-disappear or stay visible until they are closed.
There are also callbacks on every level: onShow, onBeginHide and onHide.
Requirements: jQuery
Compatibility: All Modern Browsers
CanvasLoader is a JavaScript UI library for drawing and animating circular preloaders with HTML5 canvas.
Using a simple function, a canvas element (loader) is created inside a placeholder div and multiple instances can be created at the same page.
There are few different loader types supported and they can be customized in many ways like color, density, speed, diameter, fading, FPS and scaling. Also, functions exist for getting the values of each parameter.
Optionally, a web-based creator helps building the loader image by setting the values, previewing the output and downloading the HTML file.
Requirements: No Requirements
Compatibility: All Modern Browsers
leanModal is a lightweight jQuery plugin for displaying modal boxes with minimum effort.
The plugin doesn't use any images and a very good solution for for displaying anything except image galleries as there is no built-in support for that. But that's ok considering it only weights 780 bytes (when minified).
The width and height of the modal box is flexible and adjusts itself according to the content.
Multiple instances can be used on the same page and there are almost no settings or complicated usage instructions which is perfect for most cases.
Requirements: jQuery
Compatibility: All Modern Browsers
For any website/web application that expects an action from its visitors (like "filling a form" or "making a selection") or help them browse the way required, offering an online guide can be a good idea.
Guiders.js, a JavaScript library developed and used by the popular A/B testing service Optimizely, is recently open sourced and enables us to create flexible guiders.
The guiders are in the form of a dialog box, they can be attached to an element or centered on their own and positioned however we want.
Custom event handlers can be used to hide and show guiders. This makes interactively showing the user how to use your software by having them complete steps possible.
It requires jQuery and very easy to setup by simply creating the list of guiders, ordering them and attaching the events we want to each.
Requirements: jQuery
Compatibility: All Major Browsers
Overlays are used widely when we need to block HTML elements or the full body and transfer the attention of the user to a specific point.
There are high-quality plugins for creating overlays but most of them come with Lightbox or modal dialog capabilities and sometimes all we need is only the overlay.
Simple Overlay is a flexible and lightweight jQuery plugin that can display the overlay using jQuery's fade effect, slide effect or no effect at all and can be improved further with built-in CSS hooks like CSS3-glossy effects.
The overlay can also be customized more by setting its color, opacity level, whether it'll be removed with onClick and more.
Thanks to custom callbacks, any functions can be fired after onShow and onHide events.
Requirements: jQuery
Compatibility: All Modern Browsers
OpenJS Grid is a very easy-to-setup solution for displaying records as a user-friendly datagrid.
It comes as a plugin for jQuery with the PHP files for handling the Ajax requests and can be called with a simple/one-line function.
The data to be shown on the initial load can be limited to a desired number, rest of the records can be browsed with pagination and every column can be sorted.
And, there are many options like:
- showing/hiding row numbers
- inline editing
- deletion of records
- filtering records with date range
There are callbacks on every step (rowClick, loadComplete, saveFail, etc.) and the design of the grid can be totally changed with CSS3-powered theming support.
Requirements: jQuery
Compatibility: All Major Browsers
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips.
Compared to other plugins, it comes with minimum default styles or animations but gives you the complete control over them.
It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.
There are also few settings like "the ability to aligning the tooltip according to the cursor or the element" and "its distance from them".
Tooltipsy is very well-documented and a set of samples show the flexibility offered.
Requirements: jQuery
Compatibility: All Major Browsers
