Light Weight Fish Eye component
Vasanth Govind
Link:http://www.safalra.com/programming/javascript/mac-style-dock/
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 works 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
Implementing the Mac-style Dock
File Size Description
MacStyleDock.js 6285 bytes Full version with comments
MacStyleDock.compressed.js 2632 bytes Compressed version
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 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, 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 need not 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.5);
</script>
Multiple icon sizes should be supplied for operating systems such as
Windows that scale images poorly. The function will scale down the
next larger image from the size it requires.
Link:http://www.safalra.com/programming/javascript/mac-style-dock/