Ewen's jQuery Plugins

In this section of the site you will find a collection of jQuery plugins that I have created. To the left you will find links to each of the plugins and below is a quick summary of each.

Style File Input

The Style File Input jQuery plugin provides a method for displaying a styled file input. It creates several extra elements in the DOM which, as can been seen in the demos, can be freely styled in almost any way.

The options provided allow for a high level of customisation of the generated elements, for example the element which displays the selected file's filename can be any element, I have demonstrated this in the examples using an input type=text for examples one and two, and an ol element for example three.

Equal Height Columns

This jQuery plugin sets the height of selected elements equal to the height of the highest element.

Any number of elements can be passed.

The various configuration options include specified column height, minimum and maximum column heights, the ability to animate the height changes and the ability to apply the plugin to (and filter) the selected element's children.

Internet Explorer Select Style

Styling the select box in Internet Explorer 6 and 7 is almost impossible. This jQuery plugin provides a workaround for that problem. It will apply borders, background colours (background images still don't work properly) and padding to any select element. It also incorporates the 'Internet Explorer Select Width Bug Workaround' I created (found here.)

It works by searching the stylesheets and calculating the specificity of any styles associated with the select box, then creates a series of elements that will wrap around the select box. A sprite is used to represent the arrow of the select box.

Internet Explorer Select Width

Setting the fixed width of a <select> element in Internet Explorer will cause all of the select options that are wider than the select's set width to be cropped.

This jQuery plugin proposes a work around.

Applying this plugin makes the select element in Internet Explorer appear to work as it would work in Firefox, Opera etc...

Iframe Post Form

Well, it's not really Ajax uploading considering file upload with ajax is not possible, but the end result is similar.

This jQuery plugin creates a hidden iframe and sets the form's target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server's response from the iframe.

This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.

Link Manager

This jQuery plugin manages the opening of links in new windows (or any other possible value of the anchor target attribute) removing the need for the target attribute (e.g. target="_blank" for opening in a new window) which is deprecated in XHTML strict standards.

By default this plugin will open all external links in a new window. Using the available options you can include internal links using the 'include' option; exclude external links using the 'exclude' option, choose which part of the link's href attribute to match (domain, pathname, querystring and hash) and define what the link should target (_blank by default.)

Toggle Options

This jQuery plugin allows the user to select or deselect options in a multiple select box without the need of the ctrl key. The options can be selected using the arrow keys and spacebar, holding shift + arrow keys or simply by a single mouse click.