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
Searches: dock javascript web image create

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

50% 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

Javascript/Flash Powered File Upload Using SWFUpload

100% positive, 1 comment - last added on Aug 17, 2008 at 7:37 pm
– Tip added by an anonymous user on Aug 17, 2008 at 9:58 am

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

22 Really Web Safe Colors

100% positive, 0 comments
– Tip added by codenique.com on Apr 20, 2009 at 12:16 pm

Web Color Basics

100% positive, 0 comments
– Tip added by codenique.com on Apr 15, 2009 at 6:14 am

CSS3 Color Names

100% positive, 0 comments
– Tip added by codenique.com on Apr 14, 2009 at 4:18 am

Faster javascript page loads

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

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

CSS Backgrounds Properties

no ratings, 0 comments
– Tip added by learnhtmlonline on Aug 10, 2009 at 2:06 pm

Javascript: How to Create a Random Number

0% positive, 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

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