473,411 Members | 2,080 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,411 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 13927
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: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
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
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

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.