Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post

    div horizontal scroll...

    I have this code

    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!!

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This doesn't work in Opera, unless scrollbars are present, but...

    Code:
    <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...

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by neofibril
    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....

    Code:
    function scrollX(eyeD, ext)
     {
    	do
    	{
    		
    		document.getElementById(eyeD).scrollLeft += ext;
    	} 
    	while (!event.mouseup)
    	
    
     }
    thanks

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    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

    Code:
    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!!!

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    var timer;
    function scrollX(eyeD, ext)
     {
    	timer=setInterval(function() { document.getElementById(eyeD).scrollLeft += ext },1);
     }
    ...
    onmousedown="scrollX('elId', 300)" onmouseup="clearInterval(timer)"

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    perfect!!

    thanks glenngv.....

    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!!

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by homerUK
    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.

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    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?

  • #9
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •