By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,230 Members | 2,471 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,230 IT Pros & Developers. It's quick & easy.

Onmouseover to scroll DIV?

P: n/a
Hi.
I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal
scroll bar is used to move the thumbnails from left to right.

Does anyone know any code to have the DIV scroll from left to right when I use an onmouseover on two images either side of the
DIV?

Thanks

Laurie

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
laurie wrote on 08 feb 2004 in comp.lang.javascript:
I have a DIV section that has many thumbnail images inside it. I have
a DIV so all images can fit in a row and the horizontal scroll bar is
used to move the thumbnails from left to right.

Does anyone know any code to have the DIV scroll from left to right
when I use an onmouseover on two images either side of the DIV?


onmouseover="document,getElementById('myDiv').scro llBy(200,0)"

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2

P: n/a
Thanks, but I cant get this to work.

I believe there should be a . after the document, but this didn't work either.

Laurie

"Evertjan." <ex**************@interxnl.net> wrote in message news:Xn********************@194.109.133.29...
laurie wrote on 08 feb 2004 in comp.lang.javascript:
I have a DIV section that has many thumbnail images inside it. I have
a DIV so all images can fit in a row and the horizontal scroll bar is
used to move the thumbnails from left to right.

Does anyone know any code to have the DIV scroll from left to right
when I use an onmouseover on two images either side of the DIV?


onmouseover="document,getElementById('myDiv').scro llBy(200,0)"

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jul 20 '05 #3

P: n/a
"laurie" <la****@hotmail.com> wrote in
news:aW******************@newsfep4-glfd.server.ntli.net:
I believe there should be a . after the document, but this didn't work
either.


Maybe you should put *yours* "DIV name" instead of myDiv. Let us see your
piece of code.

--
pozdr. Dygi [GG 1027078]
dygimail(at)poczta(dot)fm
Jul 20 '05 #4

P: n/a
I did.
This is what I tried from the suggestion:

<div id="myDiv" nowrap class='thumbnails'>
// my code to list thumbnails images.
</div>

<img src="right_arrow.gif" onmouseover="document.getElementById('myDiv').scro llBy(200,0)">

Since then I have found a much more detailed method, which seems quite complicated. I am on the verge of getting it to work except
I cant get the following code to work:

if (direction == "rt" && x_pos > max_posn)
{
page.left = (x_pos - (speed));
}

Where max_posn is the maximum position to scroll a div layer to then stop. It works if I enter an actual value, but when assigned
to a variable (and even parseInt() the variable) it doesn't work. I assign it to a variable because the max_posn variable is
calculated from the number of thumbnails so I cant just put a value in there.

Here's the full (very long) code. A shorter version would be great.

<head>
<SCRIPT LANGUAGE="JavaScript">
function horScroll(dir, spd, loop, max_posn)
{
max_posn = -1*max_posn; // to produce an integer in case it thinks its a string. I have also used parseInt();
loop = true;
direction = "lt";
speed = 10;
scrolltimer = null;
if (document.layers)
{
var page = eval(document.contentLayer);
}
else
{
if (document.getElementById)
{
var page= eval("document.getElementById('contentLayer').styl e");
}
else
{
if (document.all)
{
var page = eval(document.all.contentLayer.style);
}
}
}
direction = dir;
speed = parseInt(spd);
var x_pos = parseInt(page.left);
if (loop == true)
{
if (direction == "rt" && x_pos > max_posn) // THIS DOES NOT WORK WITH max_posn BUT DOES WORK WITH A NUMBER
{
page.left = (x_pos - (speed));
}
else
{
if (direction == "lt" && x_pos < 0)
{
page.left = (x_pos + (speed));
}
else
{
if (direction == "left")
{
page.left = 10;
}
}
}
scrolltimer = setTimeout("horScroll(direction,speed)", 1);
}
}

function stopScroll()
{
loop = false;
clearTimeout(scrolltimer);
}

</script>
</head>
<div nowrap class='thumbnails'>
<div id="contentLayer" style="position:absolute; width:300px; z-index:1; lt: 39px; left: 51px">
// code to show thumbnails here
</div>
</div>
<div id="scrollmenu" style="position:top;width:200px;height:30px;z-index:1; lt:400px; left: 40px">
<table border=1><tr><td>
<table>
<tr>
<td align=lt>Left</td>
<td></td>
<td align=right>Right</td>
</tr>
<tr>
<td colspan=3>
<a href="#" onMouseOver="horScroll('lt','25','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()"><<<</a>
<a href="#" onMouseOver="horScroll('lt','5','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()"><<</a>
<a href="#" onMouseOver="horScroll('lt','1','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()"><</a> |
<a href="#" onMouseOver="horScroll('rt','1','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()">></a>
<a href="#" onMouseOver="horScroll('rt','5','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()">>></a>
<a href="#" onMouseOver="horScroll('rt','25','true', '<? echo $max_pos; ?>')" onMouseOut="stopScroll()">>>></a>
</td>
</tr>
</table>
</td></tr></table>
</div>

"Mr Dygi" <dy********@SPAMpoczta.fm> wrote in message news:Xn*****************************@127.0.0.1...
"laurie" <la****@hotmail.com> wrote in
news:aW******************@newsfep4-glfd.server.ntli.net:
I believe there should be a . after the document, but this didn't work
either.


Maybe you should put *yours* "DIV name" instead of myDiv. Let us see your
piece of code.

--
pozdr. Dygi [GG 1027078]
dygimail(at)poczta(dot)fm

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.