How to get a DIV to follow scroll 1

[ahmun]

Hi all...

I'm sure this question has been answered before, but I'm not even sure what terminology to use for searching for it...

how do you make a div follow the user's scroll? I've got long page, and as the user scrolls down, I'd like a table with links to anchors within the page to follow so that the user can navigate to each section of the page easier...

can someone point me to threads in this forum or websites with some sample code?

Thanks

Earnie Eng

 

[kaht]

I modified some code I found on the web (I don't remember the source) to put notifications in the corners of the screen (similar to how it says safe mode in the corners of your screen when you start windows in safe mode) You can change the speed of how fast the boxes scroll into place by replacing the division by 8 with a different number.

<div id="vacYearDivUL" style="position:absolute; text-align: left;">
<table width=110px height=25px border=0 cellspacing=0 cellpadding=2 style='background-color:#00aaaa'>
<tr><td width=100% align=center>
<table border=0 width=100% height=100% cellspacing=0 cellpadding=2 style='color:#0000a0; background-color:#ffffff'>
<tr><td style='text-align:center; font-size:8pt'>Vacation Year <%=VacYear%></td></tr>
</table></td></tr></table></div>

<div id="vacYearDivUR" style="position:absolute; text-align: left;">
<table width=110px height=25px border=0 cellspacing=0 cellpadding=2 style='background-color:#00aaaa'>
<tr><td width=100% align=center>
<table border=0 width=100% height=100% cellspacing=0 cellpadding=2 style='color:#0000a0; background-color:#ffffff'>
<tr><td style='text-align:center; font-size:8pt'>Vacation Year <%=VacYear%></td></tr>
</table></td></tr></table></div>

<div id="vacYearDivLL" style="position:absolute; text-align: left;">
<table width=110px height=25px border=0 cellspacing=0 cellpadding=2 style='background-color:#00aaaa'>
<tr><td width=100% align=center>
<table border=0 width=100% height=100% cellspacing=0 cellpadding=2 style='color:#0000a0; background-color:#ffffff'>
<tr><td style='text-align:center; font-size:8pt'>Vacation Year <%=VacYear%></td></tr>
</table></td></tr></table></div>

<div id="vacYearDivLR" style="position:absolute; text-align: left;">
<table width=110px height=25px border=0 cellspacing=0 cellpadding=2 style='background-color:#00aaaa'>
<tr><td width=100% align=center>
<table border=0 width=100% height=100% cellspacing=0 cellpadding=2 style='color:#0000a0; background-color:#ffffff'>
<tr><td style='text-align:center; font-size:8pt'>Vacation Year <%=VacYear%></td></tr>
</table></td></tr></table></div>

<script LANGUAGE='Javascript'>

function setDivPosition() {
   var h = document.body.clientHeight;
   var w = document.body.clientWidth;
   //define div boxes
   divBoxUL = document.getElementById('vacYearDivUL');
   divBoxUR = document.getElementById('vacYearDivUR');
   divBoxLL = document.getElementById('vacYearDivLL');
   divBoxLR = document.getElementById('vacYearDivLR');
   //define div box functions and set initial positions
   divBoxUL.setPos=function(x, y){this.style.left=x;this.style.top=y;};
   divBoxUL.x = 3;
   divBoxUL.y = 3 + document.body.scrollTop;
   divBoxUL.setPos(divBoxUL.x, divBoxUL.y);
   divBoxUR.setPos=function(x, y){this.style.left=x;this.style.top=y;};
   divBoxUR.x = w - 113;
   divBoxUR.y = 3 + document.body.scrollTop;
   divBoxUR.setPos(divBoxUR.x, divBoxUR.y);
   divBoxLL.setPos=function(x, y){this.style.left=x;this.style.top=y;};
   divBoxLL.x = 3;
   divBoxLL.y = h - 28 + document.body.scrollTop;
   divBoxLL.setPos(divBoxLL.x, divBoxLL.y);
   divBoxLR.setPos=function(x, y){this.style.left=x;this.style.top=y;};
   divBoxLR.x = w - 113;
   divBoxLR.y = h - 28 + document.body.scrollTop;
   divBoxLR.setPos(divBoxLR.x, divBoxLR.y);
   setTimeout("resetDivPosition()", 10);
}

function resetDivPosition() {
   var h = document.body.clientHeight;
   var w = document.body.clientWidth;
   divBoxUL.x = 3;
   divBoxUL.y += (3 + document.body.scrollTop - divBoxUL.y) / 8;
   divBoxUL.setPos(divBoxUL.x, divBoxUL.y);
   divBoxUR.x = w - 113;
   divBoxUR.y += (3 + document.body.scrollTop - divBoxUR.y) / 8;
   divBoxUR.setPos(divBoxUR.x, divBoxUR.y);
   divBoxLL.x = 3;
   divBoxLL.y += (h - 28 + document.body.scrollTop - divBoxLL.y) / 8;
   divBoxLL.setPos(divBoxLL.x, divBoxLL.y);
   divBoxLR.x = w - 113;
   divBoxLR.y += (h - 28 + document.body.scrollTop - divBoxLR.y) / 8;
   divBoxLR.setPos(divBoxLR.x, divBoxLR.y);
   setTimeout("resetDivPosition()", 10);
}
</script>
<body onload='setDivPosition()'>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)

 

[CliveC]

Earnie,

See if this would work:

http://tubularity.com/h41/

if so make your own:

http://tubularity.com/kiss/

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[ahmun]

Wow... I really appreciate that!

How would this technique be called?

Roaming Divs?
Following Divs...

just so that others can find it easier?

Earnie Eng

 

[kaht]

I usually refer to them as "floating divs"

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)

 

[CliveC]

Hi Kaht,

I couldn't get that to work at all and then I realised that I had pasted it to a template with a doctype.

The problem is that when the newer DOM is involved you need to reference the scrollbar as:

document.documentElement.scrollTop
rather than:
document.body.scrollTop

if document.body.scrollTop contains 0, check
document.documentElement.scrollTop.

If the latter is not zero then use it instead.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org