Ok, so I’ve been looking at http://www.ndesign-studio.com/blog/mac/css-dock-menu and trying to get the dock to be fixed to the bottom of the screen. Generally when making this a fixed dock, the scaling mouseovers disappear. Many people asked on the comments about this, but I didn’t see a solution so this is what I did. I  have not thoroughly tested it, I know that it works in ff3.5, safari 4, IE7, &  IE8.

So, here is how it’s done in your CSS file set #dock to fixed.

#dock {
width: 100%;
bottom: 10px;
position: fixed;
left: 0px;
}

This will lock it to the bottom of your screen. After setting your css, go to http://interface.eyecon.ro/download and download the source files (or click here.)

There are 2 files in this collection that are used on this menu fisheye.js, and iutil.js. The only one we need to edit is fisheye.js.

Look for the following  line

var posx = pointer.x – el.fisheyeCfg.pos.x;

and add the following lines of code afterwards

var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;

if(pointer.y > windowHeight)
{
pointer.y = windowHeight;
}

now for a little explanation. When you scroll down, pointer.y increases because it represents the location of the cursor (vertically) in relation to the page. All I did, was look at the height of the window and limited the value of pointer.y to that value.

Note: The window Height code came from http://snipplr.com/view/2638/height-of-window/

Tags: Javascript, Web Design

This entry was posted on Friday, October 30th, 2009 at 2:32 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.