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

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>

Demo: http://safalra.com/web-design/javascript/mac-style-dock/
Download: http://safalra.com/web-design/javascript/mac-style-dock/MacStyleDock.js

Source: http://safalra.com/web-design/javascript/mac-style-dock/

Related Listings:

1. Corner Dock Icons Script Move your mouse over one of the smaller icons around...
2. JavaScript image combobox v1.5 Are you tired with your old fashion dropdown? Try this...
3. Javascript Style Sheets JSS stands for Javascript Style Sheets, it is a jQuery...
4. DHTMLX JavaScript Tree Component dhtmlxTree (DHTML extensions Tree) is a feature rich JavaScript...
5. Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...

Do you like this post?

Email: