Loading...
 
Gmail / Facebook Style Chat Application


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




Views Today: 0
Total Views: 1072

Comments
0
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.

Copyright © 2011 - 2024 | All Rights Reserved