Pagination shortcuts: Enable Keyboard Shortcuts

Pagination shortcuts is a lightweight plugin that enables keyboard shortcuts for moving through pages without having to click through with a mouse. (It’s the same concept as using the keyboard for any other quick bits of functionality.)

The plugin works by using a callback function code that detects whether the left or right keyboard arrow is pressed to advance or go back between pages on a website. It then selects a corresponding pagination link and triggers a click event for it.

These events follow common UI patterns for pagination:

  • Numbered links
  • Previous page and next page links
  • First page and last page links

You can install this plugin with or without dependencies, depending on your preference. Either option results in a small file size that will not bog down load times on your site.

You have some custom options available with Pagination shortcuts such as the ability to change numbered elements, previous and last selectors, intervals between button clicks and some keystroke functions. (You can keep the plugin even lighter by only entering values for the type of pagination you plan to use.)

This plugin is compatible with all modern browsers including IE 6+.


Labelmask: Create Accessible Input Hinting

Labelmask is a tool to help you create accessible input hinting without using input masks. The simple plugin is ready to go after installation without a lot of fuss.

This plugin is based on the politespace tool, which adds spaces to numeric form values to increase readability in elements such as credit card numbers, phone numbers, etc.


PatternLock: Android-like Pattern

PatternLock simulates an Android-like pattern lock mechanism for your hybrid app or website.

The plugin is lightweight and easy to configure and style so you can have a different type of pattern lock according to your needs. You can also configure this plugin with methods to use it securely.

PatternLock is pretty easy to use. Just include the jQuery and CSS to your page and follow the simple initialization. Then you can set the pattern for your validation (examples are included in the documentation).

There are a few options included in the plugin to help you make the most of the tool including a variety of matrix examples for the lock mechanism, margin pattern settings, radius pattern settings, whether the tracing pattern is visible or not during the drawing process, whether the tracing pattern is visible or not during the unlock process and whether the pattern can be set dynamically.

The plugin also includes directional classes which can be used to stylistic purposes or to provide hints for user success. These classes include general direction, north, south, east weest, southeast, southwest, northeast and northwest.


Period Selector: Select a Single Month or Year

Period Selector is a visual element to select a single month or year in your design. It simplifies selecting a predefined month or year with a single click.

The plugin is a simple library for selecting a single year or month among predefined ranges. It’s useful to filter a set of items based on the time. You can add any number of options to this Facebook-like component to your page as you need.

Key features of this plugin include:

  • Multiple plugins in a single page
  • Separated year and month click events
  • Auto arrange years and months based on input dates
  • Smooth expand and collapse

Period Selector is easy to install and use. Just download and add the markup to the <head> of your website, define the plugin container and start the engine. (The code is fairly simple and easy to understand during the installation process.)

There are multiple options and parameters for a custom experience with this plugin including year, month and year/month combinations. You can set these parameters to work in the way the best suits your website design.


Select or Die: Style the Select Elements

Select or Die is a jQuery plugin to style <select> elements in your website design project. The tool is simple to configure and use.

Here are the configurable options:

  • CustomID
  • CustomClass
  • Placeholder
  • PlaceholderOption
  • Prefix
  • Cycle
  • Links
  • LinksExternal
  • Size
  • TabIndex
  • OnChange

Select or Die has a simple aesthetic that can be matched to almost any design style.

This is a good tool to play with the look of drop downs or links in your framework as well as other selection-based items. Customization is easy with a little knowledge of how to tinker with the code.

The plugin is simple to install. Download the .zip file, unzip it and include the selectordie.css and either of the two .js files found in the “_src” folder. Initialize the plugin, targeting the desired element in the jQuery selector. Start customizing and you are all ready to go.


flyLabel: Flexible Floating Form Labels

Flexible floating form labels can make boring placeholders super fly. This plugin is based on the FloatLabel pattern by Matt Smith. With flyLabel.js, it’s easy to trigger custom behaviors on form labels.

Common uses of flyLabel include a classic style, a drop style, fly from right or left styles, jiggle and easy select styles.

The goal of flyLabels is not aesthetic, it’s more functional. The style, transitions and animations are all determined by CSS.

Getting started with the plugin is easy, download the snippet and add it to your site. You can call flyLabels() on a container element, and all the elements with class .fly-group will be automatically made awesome. (If you need more, there are some examples in the flyLabel documentation.)

  • Spotlight

addClassWhenEmail: Hide the Submit Button for Email Forms

Hate when users submit a form with an email address that just does not work? This little tool — addClassWhenEmail — solves that problem.

The plugin hides the submit button for email forms by default and shows it only when the user enters a valid email address. It works in that the Javascript sets a “trap” on the input field to check with a little help from RegExp if the typed text has “symptoms” of an actual email address. The check is performed with each symbol typed. In case of success, a custom class name is added; if not, it’s removed. The rest is be handled using CSS.

The tool works in a loop so that you can have multiple newsletter subscription forms on the page and each one will be served using this tool. If you need different configurations for each form, you can do that as well.

This tool can be installed in the form of a plugin or with the code. Both options are available in the documentation. The tool is also super-small and lightweight, so you won’t have to worry about it bogging down your website.


Card: Improve the Credit Card Form

You can improve the credit card form on your website with just one line of code thanks to Card.

What can one line of code do? It will make your form more interactive and engaging.

  • It includes animations for four different card types — Mastercard, Visa, Discover and American Express.
  • It is designed using pure CSS, HTML and Javascript so you don’t have to worry about uploading images.
  • It is free and open source.

Card works as a drop in addition to your current credit card form. There is no need edit input names or HTML — you can leave everything as is.

There are plenty of options when it comes to installation and usage for this tool. It can be used with or without jQuery.

And if you want to use the coded credit card icons without animation, that’s an option too. All of the instructions are easy to follow in the documentation. (And if you want to see this tool in action, the demo includes links to shops already using it.)


fontIconPicker: Include an Elegant Icon Picker

Add an icon picker to your website forms with fontIconPicker.

This is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside administration forms. The list of icons can be loaded manually using a select field, an array or object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

The plugin comes with plenty of configuration options:

  • Theme
  • Source
  • Empty Icon
  • Icons Per Page
  • Search
  • Attributes
  • Category Text

The added bonus with this plugin is that you can add your own theme with a few steps:

Using the theme parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass theme: 'mytheme' then a class mytheme will be added to .icons-selector container. Then you can add custom styling using CSS selectors like .mytheme.icons-selector. For the sake of convention and to avoid CSS conflict, prefix your theme name with fip-. So the settings becomes theme: 'fip-mytheme' and CSS selector becomes .fip-mytheme.icons-selector.

This plugin is ready to go and compatible with the Firefox, Chrome, Internet Explorer and Opera browsers.


Unibox: jQuery Plugin for Search Box with Suggestions

Unibox includes what every user wants when it comes to website search — a universal search box with search suggestion. By using this common visual, you will make it easy for users when they are looking for something on your website. (Essentially it works a lot like Google’s intuitive search.)

Installation is fairly easy but does require following the instructions, especially is you want suggestions to work properly. For suggestions:

  • The unibox.min.js and unibox.min.css need to be included and configured on the page.
  • The server needs to give search suggest data for the plugin to show.


  • Spotlight

Fort: jQuery Progress Bar for Form Completion

Fort is a modern progress bar for form completion. Just add the form and the Fort.js algorithm will take care of the rest. What makes this tool even better is that it’s super small and won’t bog down your website.

the progress bar design is simple, subtle and nifty. The default settings are for a fairly small bar, but you can increase the size to your liking for a more pronounced progress bar.

Using this tool couldn’t be easier. Insert fort.min.js and fort.min.css into the <head> then pop in an <input> into <div class="form">. Anything outside of the <div> won’t count. Then call the effect. That’s it!

The types of effects included in Fort include a solid default, gradient, sections, slash and merge. You can change the colors and and each of the color settings work together.

Fort works will all modern browsers including Safari 7+, Opera 21+, Firefox 29+, Chrome 34+ and Internet Explorer 8+.


MagicSuggest: Auto Suggest Combo Box

MagicSuggest is a multiple selection auto suggest combo box for Bootstrap themes. It works similarly to Google search in that when you start typing, it tries to help fill in and suggest options related to your query.

This is a fairly robust tool and can require some setup to make the most of its functionality. You should first decide how you plan to use it. Some examples include a tag box, a filter box, a scrabble box, an email recipients box or for complex templating.

It allows for custom usage based on the needs of your website. You’ll want to do through the pretty extensive documentation to figure out how you can best use it in your design projects.

  • Spotlight

ClockPicker: Clock-Style Timepicker

Don’t fret any more over the style of the clock or timer in your design. Let ClockPicker help make it easy for you.

This tiny little tool is a clock-style timepicker for Bootstrap websites. (The only dependencies are Bootstrap and jQuery.)

All of the code and options are included in the documenation, making this tool easy to implement for your projects.