PDA

Click to See Complete Forum and Search --> : autoscrolling divs

mistaDave
06-16-2003, 03:38 PM
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?

:confused:

/David

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- 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>

<BODY OnLoad="setVariables();checkLocation()">
<div id="object1" style="position:absolute; visibility:show; right:0px; top:0px; z-index:2">

<BODY></HTML>
Jona
06-16-2003, 04:29 PM
<div id="object1" style="position:absolute; visibility:show; right:0px; bottom:0px; z-index:2">


Jona
mistaDave
06-17-2003, 04:47 PM
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?
Jona
06-17-2003, 11:12 PM
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 :D).

Jona
mistaDave
06-18-2003, 09:25 AM
Well, that shouldn't be the problem, because I'm using IE6.

Couldn't it be something with the "scrollTop"-stuff in script-part?
Jona
06-18-2003, 10:25 AM
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. ;)

Jona
Jona
06-18-2003, 10:38 AM
Is this what you wanted?


<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">&nbsp; &nbsp; &nbsp;</div>
<input type="button" value="Click me to start" onClick="setVariables();checkLocation();">
<BODY></HTML>


Jona
mistaDave
06-18-2003, 06:18 PM
Yup! Thatīs pretty much it! Thank you for helping!
Jona
06-18-2003, 06:19 PM
You're welcome!

Jona
LuKeS
03-06-2008, 11:32 PM
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>

<BODY onload="setVariables();checkLocation()">
<DIV id="object1" style="position:absolute; left:0px; top:0px; z-index:2">
<TABLE border=0 cellPadding=0 cellSpacing=0 width=192>
<TBODY>
<TR><TD><BR><BR></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Home.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Contacts.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Admin.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Technical.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Internet.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Cryologic.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Safety.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Search.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Update.jpg"></TD></TR>
</TBODY>
</TABLE>
</DIV>
<TABLE>
<TBODY>
<TR><TD width=192></TD>
<TD height=0 width=814>
<FONT=VERDANA>

Blah ! <BR>
Blah ! <BR>

</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
mistaDave
03-10-2008, 05:46 PM
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="Buttons\Plastic\Home.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Contacts.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Admin.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Technical.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Internet.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Cryologic.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Safety.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Search.jpg"></TD></TR>
<TR><TD><IMG src="Buttons\Plastic\Update.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>
LuKeS
03-10-2008, 06:42 PM
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.
mistaDave
03-10-2008, 07:24 PM
The best way is probably to look at other peoples scripts, that's the way I did it.
mistaDave
03-10-2008, 07:49 PM
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 ]