|
|
|
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.
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;
| |
| Parameter |
Description |
Value
|
| 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!
| |
|
|
"Better
Than Books - As Easy As It Gets!"