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.

FileSizeDescription
MacStyleDock.js9382 bytesFull version with comments
MacStyleDock.compressed.js2765 bytesCompressed 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>

Further reading

If you’re looking for a JavaScript book, one of the best is the 1000-page JavaScript: The Definitive Guide by David Flanagan, published by O’Reilly and now in its fifth edition. It covers all aspects of JavaScript and details the most common browser compatibility issues that you may encounter:

This article was last edited on 17th October 2014. The author can be contacted using the form below.
Back to home page
Bookmark with: