JavaScript Dock

About

The JavaScript Dock is a navigation element intended for websites. It magnifies the icons and displays the alternate text as titles, allows resizing by clicking and dragging on a non-icon portion of the dock, and resizes to fit the window automatically. See the example at http://tlrobinson.net.

Please note that JSDock is not affiliated with Apple or the Mac OS X Dock in any way.

Requirements

JSDock requires a web browser with JavaScript, but can be set up in such a way as to still be usable if JavaScript is disabled. The quality of image scaling is dependent on the browser and operating system. Safari on Mac OS X appears to work best, as well as Firefox on Mac OS X. The fluidness of JSDock magnification is dependent on the speed of the computer, and seems to perform well on all reasonably modern computers.

Using JSDock on your site

A single div with the "id" attribute set to "dock" should contain all the images you wish to use as icons. Additionally, these icons should have the "alt" attribute set to the text you want to be displayed when the icon is hovered over (but you always set your "alt" attributes anyway...right?)

Icons can be any size and format that is understood by web browsers, but it is recommended you use PNGs with transparent backgrounds and size 128 by 128 pixels. This is because icons expand to twice the normal size (64 pixels by default) when magnified.

Here is an example:

<link rel="stylesheet" type="text/css" href="dock.css" />
<script type="text/javascript" src="dock.js"></script>

<div id="dock">
    <a href="/">        <img alt="Home" src="/images/home.png" />
    <a href="/blog/">   <img alt="Blog" src="/images/blog.png" /></a>
    <a href="/resume/"> <img alt="Resume" src="/images/resume.png" /></a>
</div>

This should be included in every page you wish the dock to appear on, or in a template if you want it to appear on all pages. Here's an example using php (assuming the above is in a file located at "/home/username/public_html/dock.php"):

<?php include("/home/username/public_html/dock.php"); ?>

Download

Version History

Version 1.0 (5/20/2007)

Modifying JSDock

The CSS file dock.css can be modified to adjust the appearance of the dock. Generally the attributes that are safe to change are separated at the top of each section by a blank line.

You can also tweak various behaviors of the dock in the JavaScript code. Search for comments beginning with "MOD" for more information.

comment ^