OSXBar.js Documentation

What It Does:

This script presents an HTML unordered list (<ul>) as an icon bar similar to the Mac OS X dock. The top-level items are presented as icons (which zoom in when the mouse moves near) and the secondary lists as popup menus.

How To Use It::

This script will only work on a properly formed HTML unordered list (<ul>). For example:

<ul id="navigation">
   <li id="item1"><a href="url">Label</a></li>
   <li id="item2">Label
         <ul>
            <li>Submenu</li>
            <li>Submenu</li>
            <li>Submenu</li>
         </ul>
   </li>
</ul>

The script style is most easily applied to the element as a ScriptSheet. By default it will match <ul> elements with a class or id of "navigation". You may override that by setting the OSXBar.scriptSheetSelector to your own CSS selector string.

If you wish to use the script outside the ScriptSheet framework, you can call it like var bar = new OSXBar(elt, edge, minSize, maxSize, iconSpacing, scaleReach); where:

elt
A reference to the <ul> Element node to be styled.
edge
The edge of the browser window the bar should be positioned at. One of "left", "top", "right", or "bottom".
minSize
The size (integer) of the icons in pixels when the mouse is nowhere near them. They will appear at this size by default.
maxSize
The size (integer) of the icons in pixels when the mouse is over them. For best image quality, this should match the native size of the icon image.
iconSpacing
The distance (integer) in pixels between icons.
scaleReach
The distance (integer) at which an icon's scaling is affected by the mouse position. This is not a linear distance, but a larger number equals a larger reach (giving a more gradual curve to the icon scaling).

What It Depends On::

Compatibility:

Known to work in Mozilla 1.3+, MSIE 5.0+ (icon PNG alpha transparency in MSIE5.5+ only)

Demonstration:

To Do:

Known Issues:

License:

The contents of this file are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.mozilla.org/MPL/

Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.

The Initial Developer of the Original Code is Jason Johnston (jj{at}lojjic[dot]net). Portions created by the Initial Developer are Copyright (C) 2004 the Initial Developer. All Rights Reserved.

This code is provided for you to use free of charge. If you find it useful please consider making a donation to help me continue to create tools like this one. You can find my contact info at http://lojjic.net.