A Mac OS X-style Dock In JavaScript

Author: admin

Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily. An example is shown below (a larger demonstration is available on a separate page).

Compatible browsers

The code has been tested and confirmed to work in the following browsers:

• Firefox 1.5 on Mac OS X
• Firefox 2 on Ubuntu Linux
• Firefox 2 on Windows (slightly jerky due to event handlers being given a higher priority than intervals)
• Internet Explorer 6
• Internet Explorer 7
• Konqueror 3.5 on Ubuntu Linux
• Opera 9 on Windows
• Safari 2 on Mac OS X
• Safari 3 on Windows

Implementing the Mac-style Dock

Download one of the files listed below and upload it to your website. Link to it from your page with code such as:

The code for the dock is added to the document tree under an existing node, so create an element to contain the dock with code such as:

The dock can then be created as a new JavaScript object. Note that the dock’s document tree node must already exist when the constructor is called. This can be done either by including the JavaScript code below the node in the document source, or by calling the constructor when the document has loaded — one way to do this is by using the OnloadScheduler.

The constructor takes five paramaters:

node

The node at which to create the Mac-style dock.

imageDetails

An array each of whose elements are object with three properties:

name

the basename of the image

sizes

an array of pizel sizes available

extension

the image extension

onclick

the function to call when the image is clicked

Requested file names consist of the concatenation of the name property, one of the values of the size property, the string ‘-reflection’ for reflections, the string ‘-full’ for full versions (so captions can be added), and the extension property.

minimumSize

The minimum size of icons in the dock.

maximumSize

The maximum size of icons in the dock.

range

The range of expansion, measured in icons. This must be an integer.

For example:

Multiple icon sizes should be supplied for operating systems such as Windows that scale images poorly. The function will scale down the next larger image from the size it requires.

How do I make the dock icons link to other pages?

To link dock icons to other pages, just set the window.location property in the onclick function.
For example: