The Dock – as anyone familiar with a Mac will know – is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. This plugin mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.

Basically, all the Dock does is expand a reduced size image towards its full size when the cursor is either on it or nearing it from a neighbour. You can specify a vertical or horizontal orientation for the Dock, and select the direction in which the image should expand and whether to show labels or not. The styling and positioning of the Dock is (almost) entirely down to you.

You can use 2 different images for clarity, one for the minimised ‘at rest’ state, and one for performing the enlargement to its full size. Alternatively, you can just use the one larger image as long as you are happy with its clarity and definition when reduced by the browser.

There is no restriction on the type of image that can be used (gif, jpg, png), but obviously if you are applying any styling to your Dock that makes it stand out against the background (such as a border or background colour), then a transparent GIF or PNG (8-bit for IE6!) may be preferable to an image that displays with an opaque background. The images can be enclosed within links, or not, depending on how you wish to control your navigation or application. The only requirement is that the parent container, probably a DIV, holds only images and/or anchors that enclose an image.

You may need to ensure that the placement of your menu allows for expansion, either horizontally or vertically depending on the assigned alignment. The Dock will extend one or both ends of its major axis as the images are rolled over, as well as enlarging the relevant images themselves, and you want to avoid having it disappear off screen, or under other elements, if you can help it. Unless instructed otherwise (eg. for the flow option, added at v1.5), the Dock will always do its best to position itself centrally (along its major axis) within what it thinks is the maximum space required for any expansion.

The Dock uses the document’s original HTML, in other words it does not create clones and append them to the end of the document. This means that the container element to which you apply jqDock() is what controls the position of the Dock, and what elements the Dock can appear on top of. Although absolute positioning is used, and several wrapper elements are added below the container element, any other elements in your document may be styled in such a manner as to obscure all or part of the Dock. It is therefore recommended that the container element be placed or positioned with care within your document such that the Dock will not appear underneath any other elements on the page.


jqDock was inspired by, and owes full credit to, Isaac Rocca’s “iconDock” plugin – I have simply re-modelled it, tweaked it, expanded it, and re-packaged it.

 Posted by at 5:42 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">