How to scroll Layer using javascript

tgopal · June 4th, 2003, 07:59 AM

Is there a way to scroll an layer using javascript.
For example

<DIV STYLE="overflow:auto; height: 365; width: 780; class="ColorBG">
<TABLE id ="JobsTable" border="1" cellpadding="0" cellspacing="0" width="750" class="TDBGWhite">
//Table Rows
</TABLE>
</DIV>

If the Table heigth exceeds the height 365 then scroll bar appears.How can i scroll the layer using javascript.
Thanks
T.Gopalakrishnan

Dan Jallits · June 12th, 2003, 12:42 PM

I received the code from http://www.uwyn.com/projects/relativ...tion/x377.html

Code:

<HTML>
<HEAD>
<TITLE>RelativeLayers : Available area example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"100%","AUTO",LEFT,"0",TOP,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd", "");
layer1.setVisible(true);

layer2 = new RelativeLayer(
"layer2Div", "", "",
"30%","50%",LEFT,"50%",TOP,"50%","0","0",
"200%","AUTO",LEFT,"50%",TOP,"0","0","-50%",
"#dddddd", "");
layer2.setVisible(true);

var htmltext = "top top top top top top top top top top<BR><BR>";
for(var i = 0; i < 7; i++)
{
    for(var j = 0; j < 5; j++)
    {
        htmltext += "This is just a bit of text to fill up space.";
    }
    htmltext += "<BR><BR>";
}
htmltext += "bottom bottom bottom bottom bottom<BR>";
layer2.setHtml(htmltext);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#ffffff">

<DIV ID="layer1Div">
<CENTER>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, 10);"
              ONMOUSEUP="return layer2.stopScroll();">scroll up</A><BR>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(10, 0);"
              ONMOUSEUP="return layer2.stopScroll();">scroll left</A>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(-10, 0);"
              ONMOUSEUP="return layer2.stopScroll();">scroll right</A><BR>
<A HREF="javascript://" ONMOUSEDOWN="return layer2.startScroll(0, -10);"
              ONMOUSEUP="return layer2.stopScroll();">scroll down</A><BR>
</CENTER>
</DIV>

<DIV ID="layer2Div">
</DIV>

</BODY>

</HTML>

Best Regards,
Dan Jallits

richard.york · June 16th, 2006, 10:19 AM

I realize this thread is old, but I happened upon it while searching for an answer to this question.

The answer to the original question is to use the scrollTop and scrollLeft properties, in addition to scrollWidth and scrollHeight.

In my case, I was looking for a way to auto scroll to the bottom of a <div> with overflow: auto; set. I did that like so:

Code:

var $obj = document.getElementById('some-element');

// Scroll to the bottom!
$obj.scrollTop = $obj.scrollHeight;

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html