JavaScript Floating Box with Example
This script is a rare cross browser safe solutions to adding a floating box to your websites.
The script has been tested on Internet Explorer 4 , Netscape 4.7 and Netscape 6.2.
A very simple example of this floating box is shown below. The box can contain anything you wish to scroll on your website page or pages when users view your site.
DownloadLive Demo
Follow the steps given below to add the Floating Box to your website.
First Step: Copy this code to the head section of your website page where you want the floating box to appear.
<script type="text/javascript" language="javascript">
<!--
floatX = 10;
floatY = 10;
layerwidth = 100;
layerheight = 130;
halign = "left";
valign = "top";
delayspeed = 1;
NS6 = false;
IE4=(document.all);
if (!IE4) { NS6 = (document.getElementById); }
NS4=(document.layers);
function Floating_Contents()
{
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('Floating_Contents()',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 Step: Copy this code to the body section of your page for position demonstration purpose only.
<center>
<div style="width:520px; padding:20px; border: 5px solid #F6F6F6;" align="center">
Float Box Position<br clear="all"><br clear="all">
<div style="width:150px; float:left;padding:10px;border:1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='left'; valign='top'; define(); return false;">TOP LEFT</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='center'; valign='top'; define(); return false;">TOP CENTER</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='right'; valign='top'; define(); return false;">TOP RIGHT</a></div>
<br clear="all">
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='left'; valign='center'; define(); return false;">MIDDLE LEFT</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='center'; valign='center'; define(); return false;">MIDDLE CENTER</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='right'; valign='center'; define(); return false;">MIDDLE RIGHT</a></div>
<br clear="all">
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='left'; valign='bottom'; define(); return false;">BOTTOM LEFT</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='center'; valign='bottom'; define(); return false;">BOTTOM CENTER</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="halign='right'; valign='bottom'; define(); return false;">BOTTOM RIGHT</a></div><br clear="all">
</div>
<br clear="all"><br clear="all">
<div style="width:520px; padding:20px; border: 5px solid #F6F6F6;" align="center">
Float Time Allocation<br clear="all"><br clear="all">
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="delayspeed=0; define(); return false;">DELAY ZERO</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="delayspeed=1; define(); return false;">DELAY ONE</a></div>
<div style="width:150px; float:left;padding:10px;border: 1px solid #E1E1E1;" align="center"><a href="javascript:void(0);" style="text-decoration:none;" onClick="delayspeed=3; define(); return false;">DELAY THREE</a></div>
<br clear="all">
</div><br clear="all"><br clear="all">
</center>
Third Step: Copy this code to the bottom of your website page (insert it just before the final closing </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>
<div style="width:300px; height:200px; background:#CCC">
<p style="padding-top:80px;" align="center">YOUR FLOATING CONTENT GOES IN THIS BOX</p>
</div>
<script>
if (NS4) { document.write('</LAYER>'); }
if ((IE4) || (NS6)) { document.write('</DIV>'); }
ifloatX = floatX;
ifloatY = floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
Floating_Contents();
</script>
Finally: you need to customize the parameters.:
|
floatX=10; floatY=10; layerwidth=100; layerheight=130; halign="center"; valign="center"; delayspeed=3; |
| Parameters | Descriptions | Values |
| 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). |
That's it guys...
Total Views: 795
OUR OBJECTIVE
Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.
OUR MISSION
We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.
Get In Touch
General Email info@vasplus.info
Support Team support@vasplus.info
Sales Team sales@vasplus.info
Copyright © 2011 - 2024 | All Rights Reserved