A Mac OS X-style Dock In JavaScript

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

Before implementing the dock, please read the notes on usability.

File	Size	Description
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:

<script type="text/javascript" src="MacStyleDock.js"></script>

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:

<div id="dock"></div>

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:

<script type="text/javascript" >
  var dock = new MacStyleDock(
      document.getElementById('dock'),
      [
        {
          name      : 'mac-icon-0-',
          extension : '.jpg',
          sizes     : [32, 64],
          onclick   : function(){
                        alert('You clicked on the first icon');
                      }
        },
        {
          name      : 'mac-icon-1-',
          extension : '.jpg',
          sizes     : [32, 64],
          onclick   : function(){
                        alert('You clicked on the second icon');
                      }
        }
      ],
      32,
      64,
      2);
</script>

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.

Firstly, the dock is generated entirely using JavaScript. If no alternative navigation is available then the site will be impossible to navigate for those without JavaScript — this includes search engines and many disabled visitors. The solution is always to provide an alternative form of navigation — if necessary it can then be hidden using JavaScript.

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:

<script type="text/javascript" >
  var dock = new MacStyleDock(
      document.getElementById('dock'),
      [
        {
          name      : 'mac-icon-0-',
          extension : '.jpg',
          sizes     : [32, 64],
          onclick   : function(){
                        window.location = 'http://www.safalra.com/';
                      }
        }
      ],
      32,
      64,
      2);
</script>