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
Before implementing the dock, please read the notes on usability.
|MacStyleDock.js||9382 bytes||Full version with comments|
|MacStyleDock.compressed.js||2765 bytes||Compressed version|
Download one of the files listed above 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 constructor takes five paramaters:
- The node at which to create the Mac-style dock.
An array each of whose elements are object with three properties:
- the basename of the image
- an array of pizel sizes available
- the image extension
- the function to call when the image is clicked
- The minimum size of icons in the dock.
- The maximum size of icons in the dock.
- The range of expansion, measured in icons. This must be an integer.
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.
Mac-style Dock FAQs
What usability issues are raised by the dock?
Anyone considering using the dock should be aware of the usability issues it raises. The dock code on this page was originally developed at a client’s request, but we successfully advised the client against using it due to the usability issues. There are two major issues — one easily addressed, and one more fundamental.
Secondly, the dock item magnification itself harms usability. Fitts’s law is used in studies of Human-Computer Interaction to model the use of a mouse pointer. It estimates the time taken for the user to move the mouse pointer over a desired target, and implies that larger targets are preferrable. However, because the dock icons expand dynamically, they move on screen. The user has to correct for this movement, and this slows down their use of the dock. When observing Mac OSX users, it is noticeable that the majoirty of more experience users disable the magnification of dock items.
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: