Daily Feed

Just another Blog

Mac OSX Style Dock with JavaScript

leave a comment »

Mac OSX Style Dock with JavaScript 000Apple’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 demonstration is available on a separate page).

Download JavaScipt File here

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

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. 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.

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(){
                        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>

 

 

 

JavaScript File [via Safalra]


Written by James Lam

February 23, 2009 at 4:43 pm

Posted in Web Design

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: