autoscrolling divs

@mistaDaveJun 16.2003

Hello!

This JavaScript automatically scrolls the content within the div-tag to the top-right corner. I would like it to be placed in the bottom-right corner instead. How is it done?

/David

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! ~~[url]~~http://javascript.internet.com[/url] –>

<!– Begin
function setVariables() {
if (navigator.appName == “Netscape”) {
v=”.top=”;
dS=”document.”;
sD=””;
y=”window.pageYOffset”;
}
else {
v=”.pixelTop=”;
dS=””;
sD=”.style”;
y=”document.body.scrollTop”;
}
}
function checkLocation() {
object=”object1″;
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout(“checkLocation()”,10);
}
// End –>
</script>
</HEAD>

to post a comment

JavaScript

13 Comments(s) _↴

@JonaJun 16.2003 — #[font=courier new]

<div id="object1" style="position:absolute; visibility:show; right:0px; bottom:0px; z-index:2">

[/font]

[b]Jona[/b]

@mistaDaveauthorJun 17.2003 — #I´ve actually tried that, but the content (text) is put in the top-right corner instead. Any idea of how to make it right?

@JonaJun 18.2003 — #[font=arial][color=maroon]What browser are you using? It should work fine in any standards compliant browser--unless there is something that I did wrong (which I hope is not that case ?).[/color][/font]

[b]Jona[/b]

@mistaDaveauthorJun 18.2003 — #Well, that shouldn't be the problem, because I'm using IE6.

Couldn't it be something with the "scrollTop"-stuff in script-part?

@JonaJun 18.2003 — #[font=arial][color=maroon]If the example online works, the script will work no matter how you position it. Unless of course, the script automatically changes that.. Let me take a look at that code again...

I'm going to go test it and come up with something if I can. ?[/color][/font]

[b]Jona[/b]

@JonaJun 18.2003 — #[font=arial][color=maroon]Is this what you wanted?[/color][/font]

[font=courier new]

<HTML>

<HEAD>

<SCRIPT type="text/javascript">

var v, dS, sD, y, yy, object, x = 10;

function setVariables() {

if (navigator.appName == "Netscape") {

v=".top=";

dS="document.";

sD="";

y="window.pageYOffset+x";

}

else {

v=".pixelTop=";

dS="document.all.";

sD=".style";

y="document.body.scrollTop+x";

}

}

function checkLocation() {

object="object1";

yy=eval(y);

eval(dS+object+sD+v+y);

if(x>450){x=0;}else{x+=10;}

setTimeout("checkLocation()",10);

}

</script>

</HEAD>

<BODY>

<div id="object1" style="background-color:red;position:absolute; visibility:show; right:0px; top:0px; z-index:2">     </div>

<input type="button" value="Click me to start" onClick="setVariables();checkLocation();">

<BODY></HTML>

[/font]

[b]Jona[/b]

@mistaDaveauthorJun 18.2003 — #Yup! That´s pretty much it! Thank you for helping!

@JonaJun 18.2003 — #[font=arial][color=green]You're welcome![/color][/font]

[b]Jona[/b]

@LuKeSMar 07.2008 — #I've has an autoscrolling menu (very similar to yours Jona & Dave) working for some time in IE but for some reason it does not want to work in Firefox 2

can you help ? In Firefox The menu displays but stays put.

Here is my code for reference:

<HTML>

<HEAD>

<TITLE>CryoLogic Intranet Main Page</TITLE>

<META content="text/html; charset=unicode" http-equiv=Content-Type>

<BASEFONT name="Verdana" color=#004080>

<SCRIPT LANGUAGE="JavaScript">

function setVariables()

{

if (navigator.appName == "Netscape")

{

v=".top=";

dS="document.";

sD="";

y="window.pageYOffset";

}

else

{

v=".pixelTop=";

dS="";

sD=".style";

y="document.body.scrollTop";

}

py = eval(y);

}

 function checkLocation() 
   {
   object="object1";
   yy=eval(y);
   yy=py+(yy-py)/16;
   py=yy;
   eval(dS+object+sD+v+yy);
   setTimeout("checkLocation()",10);
   }
   </SCRIPT>
  </HEAD>

 Blah ! <BR>
   Blah ! <BR>
 
   </TD>
   </TR>
   </TBODY>
   </TABLE>
  </BODY>

</HTML>

@mistaDaveauthorMar 10.2008 — #Ok, this is probably not how things SHOULD be done according to all shouldos, wouldos and other written and/or unwritten laws and/or expectations you should follow, but it does work for FF2 as well... here goes the code...

Changes:

# setInterval used instead of setTimeOut

# added check for Netscape6+ compatible browsers

<HTML>

<HEAD>

<TITLE>CryoLogic Intranet Main Page</TITLE>

<META content="text/html; charset=unicode" http-equiv=Content-Type>

<BASEFONT name="Verdana" color=#004080>

<SCRIPT LANGUAGE="JavaScript">

var NN = (document.layers) ? 1 : 0;

var N6 = (document.getElementById && !document.all) ? 1 : 0;

var IE = (document.all) ? 1: 0;

function setVariables()

{

if (NN)

{

v=".top=";

dS="document.";

sD="";

y="window.pageYOffset";

}

else if (document.getElementById&&!document.all) {

v= ".top=";

dS="document.getElementById("";

sD="").style";

y="document.body.scrollTop";

}

else

{

v=".pixelTop=";

dS="";

sD=".style";

y="document.body.scrollTop";

}

py = eval(y);

setInterval("checkLocation()",10);

}

function checkLocation()

{

object="object1";

yy=eval(y);

yy=py+(yy-py)/16;

py=yy;

eval(dS+object+sD+v+yy);

}

</SCRIPT>

</HEAD>

<BODY onload="setVariables()">

<DIV id="object1" style="position:absolute; left:0px; top:0px; z-index:2; border: 1px solid black;">

<TABLE border=0 cellPadding=0 cellSpacing=0 width=192>

<TBODY>

<TR><TD><BR><BR></TD></TR>

<TR><TD><IMG src="ButtonsPlasticHome.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticContacts.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticAdmin.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticTechnical.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticInternet.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticCryologic.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticSafety.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticSearch.jpg"></TD></TR>

<TR><TD><IMG src="ButtonsPlasticUpdate.jpg"></TD></TR>

</TBODY>

</TABLE>

</DIV>

<TABLE>

<TBODY>

<TR><TD width=192></TD>

<TD height=20000 width=814>

<FONT=VERDANA>

Blah ! <BR>

Blah ! <BR>

</TD>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

@LuKeSMar 10.2008 — #Worked a treat.

By the way is there a good web site, document or book you would recommend for some one to catch up on some aspect of Web Java coding.

Until I ran across the script you have just corrected I was having trouble finding out about such elements as "window.pageYOffset" and ".top=" etc.

Now you have used "setInterval" instead of "setTimeOut" I would never have though about it.

My requirements would be the equivalent of a "Web Java for Dummies" book.

Regards

Luke

Thank you Again.

@mistaDaveauthorMar 11.2008 — #The best way is probably to look at other peoples scripts, that's the way I did it.

@mistaDaveauthorMar 11.2008 — #I decided to give some other hints anyway, even though you got the best one already.

The reason why "setTimeOut" didn't work with FF2 is because of a misspell. It should be "setTimeout", i.e. with a lower-case "o" instead of upper-case... ?

www.javascriptkit.com is a site I check out twice a year, google is a better tool though. Or this site.

As for books they might get outdated but there's actually a reference at www.dummies.com (JavaScript something something reference...).

I also believe "JavaScript" is a more correct term than "Web Java".

[ Recommended by mistaDave Jesus ]

Also in #JavaScript _↴

Loading images by demand when mouse over How do i place a 2 second wait before a function exits?Running an EXE on a webpage.

Success!

Help @mistaDave spread the word by sharing this article on Twitter...

Tweet This

autoscrolling divs

13 Comments(s) _↴

# setInterval used instead of setTimeOut

# added check for Netscape6+ compatible browsers

Also in #JavaScript _↴

Success!

Social

Version

autoscrolling divs

13 Comments(s) ↴

# setInterval used instead of setTimeOut

# added check for Netscape6+ compatible browsers

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴