ONLINE TOOLS :
FLOATING LAYER








This tool let's you play with a floating layer.

Try scroll this page and watch the floating layer stay in place.

Try clicking these links to change the position of the floating layer.

TOP LEFTTOP CENTERTOP RIGHT
MIDDLE LEFTMIDDLE CENTERMIDDLE RIGHT
BOTTOM LEFTBOTTOM CENTERBOTTOM RIGHT

DELAY ZERODELAY ONEDELAY THREE





Add A Floating Layer to Your Own Pages.

The script on this page is a rare cross browser safe solutions to adding a floating layer. (tested on Internet Explorer 4+, Netscape 4.7 and Netscape 6.2).

This page you're looking at now shows a very simple example of a floating layer menu. The floating layer is typically used for menus but can contain anything you want it to.

You can add your own floating layer to your own pages by following these four simple steps:

First: copy this code to the head of your page.

<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="center";
valign="center";
delayspeed=3;

// This script is copyright (c) Henrik Petersen, NetKontoret
// Feel free to use this script on your own pages as long as you do not change it.
// It is illegal to distribute the script as part of a tutorial / script archive.
// Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
// This comment and the 4 lines above may not be removed from the code.

NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);

function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}

function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>





Second: copy this code to the bottom of your page (insert it just before the final </BODY> tag.)

<script>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</script>
***** ENTER THE CONTENT FOR YOUR LAYER HERE *****
<script>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>





Third: in the above code, you should replace where it says...:

***** ENTER THE CODE FOR YOUR LAYER HERE *****

...with the HTML code piece that you want on your floating layer. (Could be an image, a menu or whatever).




Finally: you need to customize the parameters.

The script that you pasted to your <HEAD> section, contains these lines at the top:

floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="center";
valign="center";
delayspeed=3;


ParameterDescriptionValue
floatX Defines the horizontal distance from the border.
positive numbers.

floatY Defines the vertical distance from the border.
positive numbers.

layerwidth Defines the width of the menu layer.
positive numbers.

layerheight Defines the height of the menu layer.
positive numbers.

halign Defines which border floatX should be counted from.
left
center
right.

valign Defines which border floatY should be counted from.
top
center
bottom.

delayspeed Defines the time delay before the layer's position is updated.
If set to 0 (zero) the layer will move to its correct position immediately.
If set to a value the layer will be slightly delayed before moving to its correct position.(Do not set to values
beyond 3).






And that's it - as easy as it gets!

 << PREVIOUS
BACK TO MENU >>  



















     "Better Than Books - As Easy As It Gets!"

MENU
 :: EchoEcho
 :: About Us
 :: Yahoo
 :: Microsoft
 :: Netscape