PDA

View Full Version : floating 'go to top' link, contained in a <div>

barryke
09-04-2005, 05:17 PM
I need a floating "go to top" link.
Much like this thread (http://www.codingforums.com/archive/index.php/t-60577.html) (June 2005)

Special thing i want, is that it is contained in the sidebar on the website in question (http://postruba.nl/content/).
This sidebar also contains some 'last news' and other content, and i want the floating menu to stay beneath that.

Best overall solution would be to contain the floating menu inside a <div></div> or likewise which has not absolute positioning.

I tried to find this feat in existance, but i couldn't. Thanks Barry
vwphillips
09-04-2005, 07:08 PM
inset where required


<div id="Weather" style="position:fixed;left:100px;width:100px;height:20px;background-color:red;text-align:center;"
onclick="window.scroll(0,0);"
>
Top
</div>


the <body> tag

<body onload="Float('Weather');">


in the <head> tags

<script language="JavaScript" type="text/javascript">
<!--
var Offset=200;
var w,wtp;

function Float(id){
w=document.getElementById(id);
wtp=w.offsetTop+Offset;
if (document.all){
w.style.position='absolute';
w.style.top=wtp+'px';
window.onscroll=zxcScrollTop;
}

}

function zxcScrollTop(){
zxcST=0;
if (!document.all){ zxcST=window.pageYOffset; }
else if (!document.body.scrollTop){ zxcST=document.documentElement.scrollTop; }
else { zxcST=document.body.scrollTop; }
w.style.top=(zxcST+wtp)+'px';
}


//-->
</script>
barryke
09-04-2005, 11:37 PM
Thanks vwphillips,
but the code doesn't do the trick. (besides just floating)
(on a side note, it views different on firefox versus IE qua top offset)

The problem in other words:
At the website (http://postruba.nl/content/), there is a left sidebar. Content in that sidebar is dynamic.
The floating 'go to top' link should remain inside the sidebar, below the content, and above the footer.

Question: (i'll take it step by step)
If i've got this relative position element:<div id="floatTopLimit" ></div>How can i retreive the distance between the top of the page and this element in pixels?

Thanks!

edit: i've added a big yellow marking on the website in question (http://postruba.nl/content/geschiedenis/) for clarity.
barryke
09-06-2005, 04:35 PM
I still have the same problem. :( consumes all my time.

In the middle of a html document i have this element:
<div id="topMeasurementAnchor"></div>
The element's position is relative.

And i need a script which basicly returns topMeasurementAnchor.top, but how?
- in other words: the distance from this element's top to the top of the page.

Help is much appreciated;
I dont have a clue on how to solve this. Thank you.
vwphillips
09-06-2005, 09:00 PM
this is getting there
..........

<body bgcolor="#ffffff" onload="StartPos();" >

<script type="text/javascript">
//HV Menu- by Ger Versluis (http://www.burmees.nl/)
/
...........
</tr>
-->
<tr>
<td id="MyA" bgcolor="yellow" height="100%"><br>FLOAT SHOULD ALWAYS REMAIN BELOW YELLOW when scrolling. but how?<br><br></td>
</tr>
</tbody></table>
..................
<div style="position: absolute; background-color: rgb(182, 20, 20); width: 500px; height: 20px; font-family: verdana,tahoma,arial; font-weight: bold; font-style: normal; font-size: 10pt; z-index: 101; top: 166px; left: 362px; visibility: visible;"><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 97px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 0px;">Introductie</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 97px; height: 18px; padding-left: 3px; padding-top: 2px; left: 100px; top: 0px;">Bestuur</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 97px; height: 18px; padding-left: 3px; padding-top: 2px; left: 200px; top: 0px;">Geschiedenis</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 97px; height: 18px; padding-left: 3px; padding-top: 2px; left: 300px; top: 0px;">Verhuur</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 97px; height: 18px; padding-left: 3px; padding-top: 2px; left: 400px; top: 0px;">Contact</div></div><div style="position: absolute; background-color: white; width: 150px; height: 124px; font-family: verdana,tahoma,arial; font-weight: bold; font-style: normal; font-size: 10pt; z-index: 102; top: 0pt; left: 0pt; visibility: hidden;"><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 0px;">Verre verleden</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 20px;">Rond 1900</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 40px;">Wegen</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 60px;">Nadien</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 80px;">Kapel</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; width: 147px; height: 18px; padding-left: 3px; padding-top: 2px; left: 0px; top: 100px;">Nu</div><div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 128, 128); background-color: rgb(173, 36, 29); text-align: center; background-image: url(/gfx/menu_sub_tail.gif); width: 147px; height: 2px; padding-left: 3px; padding-top: 2px; left: 0px; top: 120px;"></div></div>
<div id="top" style="position:absolute;width:100px;height:20px;background-color:red;" ></div>
<script language="JavaScript" type="text/javascript">
<!--

function StartPos(){
MA=document.getElementById('MyA');
TL=document.getElementById('top');
TL.style.top=(zxcPos(MA)[1]+MA.offsetHeight)+'px';
TL.style.left=(zxcPos(MA)[0]+20)+'px';
TL.tp=zxcPos(MA)[1]+MA.offsetHeight;
}
function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}

function zxcScrollTop(){
TL.style.top=(TL.tp)+'px'
TL.innerHTML=(TL.tp-zxcWWHS()[2])+' '+(zxcWWHS()[1]-20);
if((TL.tp-zxcWWHS()[2])<(zxcWWHS()[1]-20)){
TL.style.top=(zxcWWHS()[2]+zxcWWHS()[1]-20)+'px'
}
}

window.onscroll=zxcScrollTop;
function zxcWWHS(){
if (document.all){
zxcCur='hand';
zxcWH=document.documentElement.clientHeight;
zxcWW=document.documentElement.clientWidth;
zxcWS=document.documentElement.scrollTop;
if (zxcWH==0){
zxcWS=document.body.scrollTop;
zxcWH=document.body.clientHeight;
zxcWW=document.body.clientWidth;
}
}
else if (document.getElementById){
zxcCur='pointer';
zxcWH=window.innerHeight-15;
zxcWW=window.innerWidth-15;
zxcWS=window.pageYOffset;
}
zxcWC=Math.round(zxcWW/2);
return [zxcWW,zxcWH,zxcWS];
}




//-->
</script>
</body>
</html>
barryke
09-09-2005, 10:44 PM
vwphilips that is - :eek: EXACTLY IT - Thanks!
I'll learn a lot from this code.

btw, what does 'zxc' stand for?

May i ask you how you come up with your fantastic codesnippets?
You could work at Google, your javascripts are just as compact as theirs ;)