Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Friday 28th of September 2012

JavaScript Floating Box with Example



Adding a Floating Box to your website page is made simple.
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.:
The JavaScript Code that you pasted at the head section of your website contains these lines at the top:
floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="center";
valign="center";
delayspeed=3;

ParametersDescriptionsValues
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...





Comments
0

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement