pennypacker.net: FishEye Three : Emulating the Mac OS X Dock with Javascript

FishEye Three : Emulating the Mac OS X Dock with Javascript

Well, in the continuing effort to explore Fisheye javascript, I've crafted a Mac OS X Dock look-alike. It's a little rough, and it makes Windows Internet Explorer go berserk, but at least it responds. Perhaps with the future tweaks to this script, I'll endeavor to make it compatible with legacy browsers like Internet Explorer so long as lack of proper png support doesn't bother IE users, and I suppose it doesn't since they still use it.

None of the icons are links to anything, but that's not to say they couldn't be. They work just as well as links as they do as eye candy. I had tested that locally, but removed the links as I thought it was something of a distraction.

Ideally, I think the plans for this script go from the obvious to the sublime. First is cleaning up the scroll bars and wrapping problems. I think I can pull that off entirely with CSS. Then, I'd like to remove the event handler attributes from the mark-up. I don't foresee this being a problem, in fact, I think it'll help streamline a good bit of the script. Lastly, I'd like to ideally remove the span tags that contain the hover-text from the mark-up. They aren't really necessary, and I think that the script would be more complete and intuitive if it generated the description text dynamically from the title attribute of the link, or from the alt text of the icon.

Without further delay, here's the Mac OS X Dock in Javascript proof of concept. Beware, the png files are a little on the large side, so it might take a moment or so to load.

under:

Web Development

Posted on

2005-03-03