I didn’t have a good reason or pressing need to write this bit of eye-candy. I just wanted to see if I could. It’s obviously inspired by the OSX dock bar, but with a HTML implementation. Here is an example:

some text above some text above some text above some text above some text above some text above some text above

some text below some text below some text below some text below some text below some text below some text below

Basic Functionality

To set the bar as shown above, you need at least three divs. The outer div is simply a container. The first inner div contains the icons and maintains absolute positioning to keep it out of the document layout flow. And the final div gives our dock a background to visually bring everything together. For example, to create a single element bar:

In addition to the HTML, the file dockbar.js contains two user functions: dbmorph(o,w,h) and dbtap(o)

Function: dbmorph(o,w,h)

This function will morph an image from one size to another in fixed-step increments driven by the browser’s timer. To use it, pass in an object reference and the target width/height. To simulate a dock bar, this would be triggered by the onmouseover and onmouseout events targeting 128×128px and 64×64px sizes respectively.

Function: dbtap(o)

This function controls the bouncing effect of an object. Simply pass in an object reference and it will bounce until call the method again. To simulate a dock bar, this would be triggered by the onclick event. Notice that the dock items do not simply stop when clicked the second time; the come to a normal, peaceful rest.

Code

• dockbar.js
• sample.html

All code is licensed under the GPL.
If you would like the code under an alternate license, please ask.

This entry was posted on Monday, March 21st, 2005 at 4:54 pm and is filed under programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.