Floating div Script in the specific area.

**psalmofpaul** · 06-26-2012, 03:24 PM

1) Script Title: Floating div Script in the specific area.

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...staticmenu.htm

3) Describe problem:

Hi,

Check it out the link : http://www.dynamicdrive.com/dynamici...staticmenu.htm . entitle "Floating Menu Script". This is really I want to happen in my site, But I wanted to float in the specific area. see the image sample : http://screencast.com/t/WJQ7BNuUTFY . for example, I wanted to float somewhere in the header area NOT to all page. I hope you guys get what I mean.

Please help me, what code should I add in the "Floating menu script". I'm new in js. or please make a simple script for me or revise the code in the "Float menu script".

Any help will be appreciated.

Regards,
Paul

**vwphillips** · 06-27-2012, 12:15 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
 <div style="position:relative;left:100px;top:100px;width:500px;height:500px;border:solid red 1px;" >
  <div id="tst" style="position:absolute;left:100px;top:0px;width:100px;height:100px;background-Color:red;" >
  </div>
 </div>
<div style=height:2000px;" ></div>

<script type="text/javascript">
/*<![CDATA[*/

var float={

 init:function(id){
  var obj=document.getElementById(id),p=obj.parentNode;
  float['zxc'+id]={
   obj:obj,
   p:p,
   max:p.offsetHeight-obj.offsetHeight
  }
  this.addevt(window,'scroll','float',id);
 },

 float:function(id){
  var o=float['zxc'+id],t;
  if (o){
   var pt=this.pos(o.p)[1],st=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
   o.obj.style.top=Math.min(Math.max(st-pt,0),o.max)+'px';
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}

float.init('tst');
/*]]>*/
</script>
</body>

</html>

**psalmofpaul** · 06-28-2012, 04:52 AM

Thank you so much Vic. I will try to apply that.

God loves you too.

**psalmofpaul** · 06-28-2012, 05:12 AM

But how about if I want to add something effects, like the bouncing effects every time user scrolled down or up the browser. Thanks for a quick response.

**vwphillips** · 06-28-2012, 09:38 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
 <div style="position:relative;left:100px;top:100px;width:500px;height:500px;border:solid red 1px;" >
  <div id="tst" style="position:absolute;left:100px;top:0px;width:100px;height:100px;background-Color:red;" >
  </div>
 </div>

<div style=height:2000px;" ></div>

<script type="text/javascript">
/*<![CDATA[*/

var float={

 init:function(o){
  var id=o.ID,b=o.Bounce,ms=o.ScrollSpeed,obj=document.getElementById(id),p=obj.parentNode;
  obj.style.top='0px';
  float['zxc'+id]={
   obj:obj,
   p:p,
   ms:typeof(ms)=='number'?ms:1000,
   b:typeof(b)=='number'?b:0,
   now:0,
   max:p.offsetHeight-obj.offsetHeight
  }
  this.addevt(window,'scroll','float',id);
 },

 float:function(id){
  var o=float['zxc'+id],t;
  if (o){
   var pt=this.pos(o.p)[1],st=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
   var to=Math.min(Math.max(st-pt,0),o.max);
   if (to!=o.now){
    clearTimeout(o.dly);
    this.animate(o,o.now,to,new Date(),o.ms*Math.abs((to-o.now)/o.max),4);
   }
  }
 },

 animate:function(o,f,t,srt,mS,b){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.now=now;
   o.obj.style.top=now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,b); },10);
  }
  else {
   o.now=t;
   o.obj.style.top=t+'px';
   if (t==0&&b==4){
    this.bounce(o,0,o.b,0);
   }
   if (b==0){
    this.bounce(o,o.b,0,1);
   }
   if (t==o.max&&b==4){
    this.bounce(o,o.max,o.max-o.b,2);
   }
   if (b==2){
    this.bounce(o,o.max-o.b,o.max,3);
   }
  }
 },

 bounce:function(o,f,t,b){
  this.animate(o,f,t,new Date(),200,b);
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}

float.init({
 ID:'tst',         // the unique ID name of the 'float' DIV.                                           (string)
 ScrollSpeed:1000, //(optional) the time to scroll the 'float' DIV from top to bottom in mill seconds. (number, default = 10000)
 Bounce:10         //(optional) the distance to bounce at the top and bottom.                          (number, default = 0)
});

/*]]>*/
</script>
</body>

</html>

**psalmofpaul** · 07-02-2012, 08:33 AM

Thank you so much vwphillips.

Thread: Floating div Script in the specific area.

Thread Tools

Search Thread

Floating div Script in the specific area.

Bookmarks

Bookmarks

Posting Permissions