www.webdeveloper.com
Results 1 to 7 of 7

Thread: on mouse over: scroll text

  1. #1
    Join Date
    Apr 2008
    Posts
    59

    on mouse over: scroll text

    Hello,

    I'm hoping to get a code that works something like this:

    I would like to have two arrows on the left and right on the side of a box (no border on the box) and when the mouse is put over the arrows, the text between the two arrows (in the box) moves in the direction of the arrows. Between the two arrows (the scrolling text) I'd have links. With this I can have many links at a small place on the page.

    If been trying to find this kind of a script on the web with no luck.

    Any ideas?

  2. #2
    Join Date
    Oct 2008
    Posts
    349
    I hacked this together in 5 minutes, the code is not terribly kosher. The doctype is important for it to work on IE.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script type="text/javascript">
    var UpdateInterval = 1;
    var PixelPerInterval = 10;
    var scorllerInterval;
    
    function start_scroll_left()
    {
    	scorllerInterval = setInterval(scroll_left, UpdateInterval);
    }
    
    function scroll_left()
    {
    	document.getElementById('scroller').scrollLeft -= PixelPerInterval;
    } 
    
    function start_scroll_right()
    {
    	scorllerInterval = setInterval(scroll_right, UpdateInterval);
    }
    
    function scroll_right()
    {
    	document.getElementById('scroller').scrollLeft += PixelPerInterval;
    }
    
    function stop_scrolling()
    {
    	clearInterval(scorllerInterval);
    }
    </script>
    
    <p><span id="left" onmouseover="start_scroll_left()" onmouseout="stop_scrolling();">left</span> 
    <span id="right" onmouseover="start_scroll_right()" onmouseout="stop_scrolling();">right</span></p>
    
    <div id="scroller" style="overflow: hidden; white-space: nowrap;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  3. #3
    Join Date
    Apr 2008
    Posts
    59
    That's what I ment, thanks!

    But is it possible to control the speed of the scrolling?

  4. #4
    Join Date
    Oct 2008
    Posts
    349
    change the values of "UpdateInterval" and "PixelPerInterval"

  5. #5
    Join Date
    Apr 2008
    Posts
    59
    One more thing.

    Would it be possible to have a bookmark next to a word that would make that word be the word that appears first?

  6. #6
    Join Date
    Oct 2008
    Posts
    349
    Wrap the word you want in an element (anchor link, span, whatever), add an ID to the element, and the call the following function on that ID.
    PHP Code:
    function scrollToObj(id)
    {
        
    // send the scroller to the end, so that any scrolling call would cause it to scroll back instead of forward
        
    document.getElementById('scroller').scrollLeft document.getElementById('scroller').scrollWidth;
        
    // store page scroll
        
    var temp document.documentElement.scrollTop
        
    // scroll to the position of the ID
        
    document.getElementById(id).scrollIntoView(true);
        
    // restore page scroll
        
    document.documentElement.scrollTop temp

    The word should be in the horizontal scroller. And if the entire document has a scrollbar, and the horizontal scroller is not in view, then user will experience a momentary scrollbar movement when this function is called.

  7. #7
    Join Date
    Feb 2011
    Posts
    2
    Thanks voidvector, worked like a charm. what would I have to study to learn how to write my own scripts?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles