PDA

View Full Version : 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/dynamicindex1/staticmenu.htm

3) Describe problem:

Hi,

Check it out the link : http://www.dynamicdrive.com/dynamicindex1/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
<!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
<!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. :)