469,275 Members | 1,649 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

Onmouseover to scroll DIV?

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
4 13640
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
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
"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
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.

Similar topics

7 posts views Thread by Richard | last post: by
7 posts views Thread by windandwaves | last post: by
2 posts views Thread by news.west.cox.net | last post: by
3 posts views Thread by drjackk | last post: by
2 posts views Thread by Justin Rowe | last post: by
1 post views Thread by find clausen | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.