Share your brilliance with the world by clicking the Add a Tip button... write a tip and win money!

Tip Details Add a Related Tip

Rate as: Positive Negative

Create a Mac-like dock on web pages

This site (http://www.safalra.com/programming/javascript/mac-style-dock/) has a great tutorial on how to create a Mac-like dock on webpages using javascript. For those not familiar with the dock, it presents a row if images, and when you move the mouse over them, it grows the images near the mouse if a very smooth and stylish fashion cause a) it looks cool, and b) it makes it easier to click on the one you want. Here's what the dock looks like when it grows...

The dock, with the mouse cursor (not shown) over the key chain icon The dock, with the mouse cursor (not shown) over the key chain icon

Implementing this is really easy. The site offers the needed javascript file for inclusion. You then create an element to contain the dock and create a new dock object from the given javascript code. It works using two images for each icon; one image in the small state and one image in the large state. You give it all of the image details (file names, sizes, etc) which you create the javascript object. It's very easy to use.
Link: www.safalra.com...Search for more tips related to this link
Rating: 100% positive, 3 total Votes
Categories: web 2.0 web design javascript tutorial
Added: on Jul 13, 2007 at 11:39 am
Added By: Marcos84

Comments on this Tip

Add a Comment
There are no comments for this tip
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Smooth scrolling for anchor links

100% positive, 1 comment - last added on Mar 12, 2007 at 9:09 am
– Tip added by Marcos84 on Mar 11, 2007 at 9:24 am

Use a javascript lightbox to display pictures

100% positive, 0 comments
– Tip added by an anonymous user on Nov 19, 2007 at 5:45 pm

Cool accordian menus in CSS/Javascript

0% positive, 0 comments
– Tip added by an anonymous user on May 30, 2007 at 9:19 pm

Great AJAX repository

100% positive, 0 comments
– Tip added by hindy on May 02, 2007 at 7:23 am

CSS trick for doing unlimited number of columns on a page without using tables

Categories: CSS web 2.0 web design
100% positive, 0 comments
– Tip added by messy-me on Mar 19, 2007 at 7:45 pm

great site with tips on designing to web standards

100% positive, 0 comments
– Tip added by rlansky on Mar 06, 2007 at 10:20 am

CSS Text tricks

Categories: CSS web 2.0 web design
100% positive, 0 comments
– Tip added by an anonymous user on Jun 16, 2007 at 2:46 pm

Improving javascript page load time

Categories: javascript web 2.0
100% positive, 0 comments
– Tip added by Marcos84 on Jun 03, 2007 at 6:37 pm

web 2.0 logo library

Categories: web 2.0 web design logos
100% positive, 1 comment - last added on Apr 10, 2007 at 5:57 pm
– Tip added by rlansky on Apr 05, 2007 at 12:24 pm

Web developer tools for Firefox

100% positive, 0 comments
– Tip added by rlansky on Mar 28, 2007 at 11:39 am

Javascript: How to Create a Random Number

no ratings, 0 comments
– Tip added by Walkere on Feb 23, 2008 at 9:49 pm

Migrating from dojo 0.4 to 1.0

no ratings, 0 comments
– Tip added by an anonymous user on Jan 08, 2008 at 12:44 pm

Faster javascript page loads

Categories: javascript web 2.0 speed
no ratings, 0 comments
– Tip added by an anonymous user on Jul 18, 2007 at 7:53 pm

Web 2.0 buttons

no ratings, 0 comments
– Tip added by an anonymous user on Jun 04, 2007 at 7:26 am

Styling browse buttons on file elements in forms

Categories: CSS web 2.0 javascript HTML
no ratings, 0 comments
– Tip added by an anonymous user on May 31, 2007 at 9:13 am

library of sites designed with CSS

no ratings, 0 comments
– Tip added by Marcos84 on Mar 13, 2007 at 12:20 pm

Create your own font

100% positive, 0 comments
– Tip added by an anonymous user 6 days, 16 hours ago

Mother's Day Gift Ideas

Categories: photography tutorial
no ratings, 0 comments
– Tip added by an anonymous user 5 days, 18 hours ago

FAX over the web

Categories: FAX free online web 2.0
no ratings, 0 comments
– Tip added by an anonymous user on May 02, 2008 at 12:04 pm

Getting latitude and longitude from Google Maps

Categories: maps google hack javascript
no ratings, 0 comments
– Tip added by an anonymous user on Apr 25, 2008 at 10:01 am