...

View Full Version : div appear between two points?



resin
05-30-2012, 05:29 PM
Hello, how can I have a div appear only when scrolling between two points on a page? Say if I wanted the div to slide up from the bottom, after scrolling down 300px from top of page, and then have the div slide back out after scrolling past 1000px from top?

jmrker
05-30-2012, 10:00 PM
I'm not sure what you want can be done with JS
but just in case, can you show an picture example of what it is that you are trying to accomplish
or a link to a page that does what you want to do?

resin
05-31-2012, 10:19 AM
thanks

sayannayas
05-31-2012, 12:55 PM
Use a scroll event handler that will track the current scroll positon & trigger ur "back to top" panel




<script type="text/javascript">
function trackCurrentScroll ()
{
var div = document.getElementById ("scrollDiv");

if(div.scrollTop.equals(1000px) || div.scrollTop.equals(300px)
//unhide ur back to top division
Else
//hide ur back to top

}

</script>

<body>
<div id="scrollDiv" style="overflow:auto;" onscroll=" trackCurrentScroll()">
//ur main division with scroll
</div>

</body>

vwphillips
05-31-2012, 04:05 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

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

<body>
<div style="height:2000px;" ></div>
<div id="tst" style="position:absolute;z-Index:101;left:300px;top:-300px;height:100px;width:100px;background-Color:red;" > </div>
<script type="text/javascript">
<!--
var zxcFix={

init:function(o){
var div=document.getElementById(o.ID),ms=o.AnimateDuration,obj;
obj={
obj:div,
mm:o.ShowHide,
mve:0,
fix:typeof(o.Fix)=='number'?o.Fix:0,
ms:typeof(ms)=='number'?ms:1000
}
this.addevt(window,'scroll','scroll',obj);
},

scroll:function(o){
var s=this.wwhs();
if (s[3]<o.mm[0]&&o.mve!=0){
this.animate(o,s[3]+o.fix,s[1]+s[3],new Date(),o.ms,true);
o.mve=0;
}
if (s[3]>o.mm[0]&&s[3]<o.mm[1]&&(o.mve==0||o.mve==2)){
o.mve=1;
o.obj.style.position='absolute';
o.obj.style.visibility='visible';
this.animate(o,s[1]+s[3],s[3]+o.fix,new Date(),o.ms,false);
}
if (s[3]>o.mm[1]&&o.mve==1){
o.mve=2;
o.obj.style.position='absolute';
o.obj.style.top=s[3]+'px';
this.animate(o,s[3]+o.fix,s[1]+s[3],new Date(),o.ms,true);
}
},

animate:function(o,f,t,srt,mS,hide){
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,hide); },10);
}
else {
o.now=t;
if (f>t){
o.obj.style.top=o.fix+'px';
}
o.obj.style.position='fixed';
}
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
},

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); });
}

}

zxcFix.init({
ID:'tst', // the unique ID name of the DIV. (string)
ShowHide:[300,1000], // the minimum and maximum trigger positions. (array)
AnimateDuration:1000, // the animation duration in milli seconds. (number, default = 1000)
Fix:100 // the div fixed position from the window top position. (number, default = 0)
});
//-->
</script></body>

</html>

resin
05-31-2012, 04:25 PM
this is excellent! how do i stop it from appearing on page load? I don't want it to appear until I scroll down.

jmrker
05-31-2012, 09:57 PM
I'm not sure what you want can be done with JS
but just in case, can you show an picture example of what it is that you are trying to accomplish
or a link to a page that does what you want to do?

Looks like I learn something new each day. Can't wait until tomorrow! :D

vwphillips
06-01-2012, 10:03 AM
how do i stop it from appearing on page load

in my example the div has an initial top position of - 300px so it is not visible until the page scrolls.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum