Almost every browser comes with its own CSS prefix like -webkit-, -moz- or -o- which usually ends up in several repeated and unused CSS rules.
PrefixFree is a script which enables us to use CSS properties without vendor-specific prefixes.
At the backend, it detects the browser of users and adds only the prefixes needed to the CSS rules.
It works for both external (<link>) and inline (<style>) styles. PrefixFree even finds elements with style attribute and processes them too.
The script is standalone but there is also an optional jQuery plugin provided.
Requirements: No Requirements
Compatibility: All Modern Browsers
Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website.
By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips.
The location of tooltips (bottom, top), scrolling speed of the page, cookie on/off and several other options exist for customization.
To sum up, Joyride is a simple yet effective way of helping users find out the features of a website.
Requirements: jQuery
Compatibility: All Major Browsers
liteAccordion is a jQuery plugin for creating attractive horizontal accordions on the fly.
It is sized ~1.4kb (gzipped and minified) and can display any HTML element (images, text, video, Flash..).
Any number of slides can be shown (that fit to the size of it) and it can be set to display a selected slide on initial load.
There are also other options like:
- speed of the transitions
- autoplay
- pause on hover
- time between each slide
liteAccordion is themable and comes with 2 themes (basic and dark).
Also, 2 callback functions exist (after the transition is complete and if any of the slides is clicked) for interacting with events.
Requirements: jQuery
Compatibility: All Major Browser
jwerty is a lightweight JavaScript library (1.5kb minified) that enables us to bind, fire and assert key combination strings against elements and events.
The library is very easy to use and has callbacks fired once a key combination is pressed to attach custom events.
It doesn't require any other JavaScript frameworks but compatible with jQuery, Zepto.js and Ender.
Requirements: No Requirements
Compatibility: All Major Browsers
Flexible Nav is a jQuery plugin that can automatically generate a sitemap-like navigation for web pages.
It analyzes the heading tags of the page and displays them on the right side of the page as links by proportionally keeping the distances between each item.
Each link gets users to the related items and, as the user scrolls, the navigation keeps showing "on which part of the page you are".
As the name states, the plugin is flexible in many aspects; it can target any custom tags (rather than headings) or create the navigation for a given wrapper rather than the whole <body>.
The plugin is specially handy for web pages that are updated frequently in a given structure as there will be no need to update the navigation each time.
Requirements: jQuery
Compatibility: All Major Browsers
Peerbind is a JavaScript API (built by A9 of Amazon) for implementing P2P communications on a website almost instantly.
It works by adding an event listener to an element where the triggered events are shared with all visitors in the peerset (visitors of the web page).
Simply, it offers a very easy-to-implement way for real-time and interactive web-based communications (chat, multi-player games, document sharing, etc.).
The API comes as a jQuery plugin with methods for managing the events and the peerset created (it can be narrowed to users with same IP, geolocation, domain or a string -like a secret key-).
There is a free public server provided which is good for testing and low-level apps.
And, the server-side JS is offered with an Amazon license (that it should be hosted on Amazon AWS) for a more stable and customized usage.
SimpleModal is a MooTools plugin for creating modal boxes very easily.
The plugin is lightweight and can be used to display alert/confirmation dialogs besides any HTML content (text, image, video, etc.).
For the confirm dialogs, it provides a callback function. Also, SimpleModal can work in asynchronous mode and get contents from inline or other URLs.
Its look and feel can be customized with options like opacity, width, overlay color, draggable on/off and more.
Requirements: MooTools
Compatibility: All Major Browsers
MooVES is a MooTools plugin for easing and enhancing the integration of videos from popular video sharing websites (YouTube, Vimeo, Dailymotion, Facebook, Flickr, Google Videoi etc.).
It is unobtrusive and displays the link to the video and a notice if JavaScript or Adobe Flash Player is not enabled.
The plugin works by simply mentioning the URL of the media as a link and calling the MooVES function with targeting that element.
There is no need to know the settings for each video service and a single function makes setting options (like width/height, background/foreground colors, autoplay or loop) possible.
MooVES also has support for HTML5 video tag features (in beta).
Requirements: MooTools
Compatibility: All Major Browsers
Using elements that stay in the viewport while scrolling is a good way of providing an easy-to-reach links/info (like navigation or help) to users
Portamento.js is a jQuery plugin for creating such floating panels quickly with a line of JavaScript and few CSS rules.
It functions well with both absolutely-positioned + floated layouts and has cross-browser support.
The plugin has a smart feature which understands whether the screen-size is big enough or not to display the floating panel and decides to float it (or not) automatically.
It is very easy to use and has very few configuration options like "the element to be wrapped" or "its margin from top".
Requirements: jQuery
Compatibility: All Major Browsers
MobileESP is an open source project for easily detecting users browsing the web pages with a mobile browser.
It has server-side versions for PHP, ASP.NET, Java, Ruby and a client-side JavaScript version with light features.
There are methods provided for detecting a specific device (iPhone, Android, WebOS, etc.) or a wider selection if it is a smartphone, tablet, game console, etc.
The project has support for most of the well-known devices and can even identify their capabilities.
