473,385 Members | 2,005 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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 13925
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...
7
by: windandwaves | last post by:
Hi Gurus I am trying to make this rather complicated maps with an a huge number of mouseovers and the like. I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for...
2
by: news.west.cox.net | last post by:
I have been writing a practice sliding div navigation script. I am finding myself in the position where I need to force a div into showing the hover behavior defined in css. So my question is...
3
by: drjackk | last post by:
Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg"...
2
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
7
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
2
by: Justin Rowe | last post by:
I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...
1
by: den2005 | last post by:
Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1"...
1
by: find clausen | last post by:
:-) Is that possible, something like: <div onMouseover ........ then the div should scroll up/down to the center of the VP ... but using a function()
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.