...

View Full Version : div horizontal scroll...



homerUK
06-29-2004, 03:14 PM
I have this code



<table>
<tr><td>
<a href="#" onclick="scroll('left')">&lt;</a>
</td>
<td>
<div style="width:300px;overflow:hidden;border:1px solid #CCCCCC;">3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01, 3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01</div>
</td>
<td><a href="#" onclick="scroll('right')">&gt;</a>
</td></tr></table>


and I need to be able to use the hyperlinks to scroll the div field left and right - ie: I dont want to use the default scroll bar like when the overflow is set to "auto" etc...

I basically dont know where to start in order to make the div scroll!! I've put a function for scroll(where) but obviously at the mo it's empty!!

can anyone give me some clues as to how to go about solving this?!

thanks!! :thumbsup:

neofibril
06-29-2004, 11:03 PM
This doesn't work in Opera, unless scrollbars are present, but...



<script>
function scrollX(eyeD, ext)
{
document.getElementById(eyeD).scrollLeft += ext;
}
</script>
<table>
<tr><td>
<a href="#" onclick="scrollX('elId', -300);return false">&lt;</a>
</td>
<td>
<div id="elId" style="width:300px;overflow:hidden;border:1px solid #CCCCCC">
3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01, 3.01,3.01,3.01,3.01,3.01,3.01,3.01,3.01
</div>
</td>
<td><a href="#" onclick="scrollX('elId', +300);return false">&gt;</a>
</td></tr></table>


If you want actual scrolling, use onmousedown & setInterval, then clear the interval onmouseup...

homerUK
06-30-2004, 01:52 PM
If you want actual scrolling, use onmousedown & setInterval, then clear the interval onmouseup...

thanks! it worked perfectly... but I'd like it to smoothly scroll.... i've tried the following, but it crashes the browser... and I am not sure where to put the settimeout or setinterval....



function scrollX(eyeD, ext)
{
do
{

document.getElementById(eyeD).scrollLeft += ext;
}
while (!event.mouseup)


}


thanks :thumbsup:

homerUK
07-01-2004, 02:25 PM
I've managed to get the div to scroll "smoothly" by changing the values to +1 and -1 in the functions... and by changing the actual function to this



function scrollX(eyeD, ext)
{
setInterval(function() { document.getElementById(eyeD).scrollLeft += ext },1)
}


but I need to stop the thing from scrolling also!!

I dont think this is the best way of doing it - as the text just seems to cycle through itself! it never stops!!

help!!! :eek: :thumbsup:

glenngv
07-01-2004, 02:48 PM
var timer;
function scrollX(eyeD, ext)
{
timer=setInterval(function() { document.getElementById(eyeD).scrollLeft += ext },1);
}
...
onmousedown="scrollX('elId', 300)" onmouseup="clearInterval(timer)"

homerUK
07-01-2004, 03:00 PM
perfect!!

thanks glenngv..... :thumbsup:

changed the setInterval thing to ,50 (is that .05 of a second?)

and the onmouse down to -30 and +30 to scroll and it works perfectly!!!!

many thanks!! :thumbsup: :D

glenngv
07-01-2004, 03:04 PM
changed the setInterval thing to ,50 (is that .05 of a second?)

That's correct. The delay argument in setInterval/setTimeout methods is in milliseconds.

homerUK
07-01-2004, 03:19 PM
cool..

I've actually changed the code now to not use a DIV - now it uses a textfield (basic text input set to readonly)....

i've set the default width to 300..... some fields value doesnt require the scroller.... as it doesnt over flow....

is there any way to tell if the scroller is required?? Is there a function or something that will detect if the text is running over the edge or something?

emehrkay
11-14-2005, 01:25 AM
wow thanks, i've searched the boards maybe twice seeing if someone else had asked about this, i've spent hours and hours on google. thanks, works great.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum