Float Menu



	MENU Top Install Cutomize Example 2 Simple1 Simple2 Simple3 Simple4 HOME

This page demonstrates one use of the "Floating Div" JavaScript. The HTML content for the page is more complex than the simple examples but the concept is the same. You have some HTML, complex or not, wrapped in a named "DIV" element. The script will then keep the DIV element always in view as the browser window is scrolled. It uses a gentle floating action to return the DIV to view which is a lot easier on the eye than just trying to keep the layer static.

Try it now. Use the scrollbar and scroll down the page and back up. Notice how the menu floats gently back into view as you scroll?

The affect has been enhanced here by using a special layout and nice graphics to give the affect that the menu is on a "rail". You can make your floating menu (or image or text or whatever you can put in a DIV element) as complex or as simple as you like.

1) Open up your webpage document in Notepad
2) Right click in the text area below and select "copy"
3) Right click in Notepad and "Paste" this code into the <body> section just after the <body> tag itself

<div id="divTopLeft"     style="position:absolute">

<b>Your Content Here</b>

</div>

el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 40);
	}
	return el;
}
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
</script>

4) Put your content in place of the "<b>Your Content Here</b>" content
5) Change JSFX_FloatDiv("divTopLeft", 10 ,30).floatIt(); where
10 is the x-coordinate of the menu (distance from left of window)
30 is the y-coordinate of the menu (distance from right of window)