I have a <div> which is very wide and it's inside of a <div> which is
somewhat thin and has overflow:hidden--I use this as a like a viewport
to just show part of the wide div. I have a left and a right arrow and
what I want is that when the user puts the mouse on the arrow, then
the inner div will slide in that direction, until he takes it off.
Many Flash sites work like this.
I tried this:
$("a#left_arrow").mouseover(function() {
nl = widediv.css('left');
nl = nl.substr(0,nl.length-2);
nl = parseInt(nl)-1;
nl = widediv.css('left',nl+'px');
clearTimeout(timer);
timer = setTimeout('$("a#left_arrow").mouseover()',120)
});
which actually works BUT it keeps scrolling to the left after they
remove the mouse from the arrow. I tried to use clearTimeout to fix
this, but it doesn't work.
I know I must add a line when it should STOP scrolling, meaning once
it gets to the far edge, but anyhow, I don't yet even have the basic
idea working. Can anyone enlighten me how to approach this?
Thank you so much.
I also tried using:
staffdiv.animate({left:nl+'px'},{queue:false,duration:110});
instead of
nl = widediv.css('left',nl+'px');
but that doesn't help. The problem is with my setTimeout it seems.
