<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>
<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>
<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>
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). |
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.
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.
Copyright © 2011 - 2024 | All Rights Reserved