An old chestnut: Scrolling DIVs. Can I use onmouseover/onmouseout?

javascript , scrolling div Exeter, United Kingdom
  • 8 years ago

    I have a DIV called 'main'. I have a DIV within 'main' called 'innerdiv' which has a margin of 5px for neatness' sake, and a height of 385px. Within 'innerdiv' is a lot of text, extending well beyond the 385px. I don't want to scroll using scrollbars; I'd like to use an area above and below the text along with an onmouseover event for each that scrolls the text up/down and an onmouseout event that stops the scrolling.

    I've tried a lot of different stuff and relentlessly searched for a solution, trying many examples along the way, but with no success at all. The most common problem I get is the error 'object does not support this property or method' if I try to 'getElementById('inner_div')'.

    Please, can someone help me?

    The page I'm testing can be found here http://johnchiverton.com/fhdtest/index.php.

    The end of my tether is in sight, and I'm showing no signs of stopping.

    Regards John

  • 8 years ago

    Look at this: http://www.vicsjavascripts.org.uk/ContinuousScroll/ContinuousScroll.htm

  • 8 years ago

    Well hello again.

    Right, thanks to Skunk I've made some good progress and have almost achieved what I set out to achieve. But, I'm stuck.

    Here's the url of the page I'm stuck on:

    http://johnchiverton.com/fhd/body.php

    What I'd like to see is when I hold the mouse over UP or DOWN the text CONTINUES to scroll. At present it just scrolls one line, then stops, then scrolls another line if I move the mouse out and then over the div.

    The code for the whole page, including functions, is:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <script type="text/javascript">
    var scrollPos=0; // current scroll position
    
    function scrollUp() {
    //  window.alert ("UP");
     scrollPos=scrollPos-1;
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
    }
    
    function scrollDown() {
    //  window.alert ("DOWN");
     scrollPos=scrollPos+1;
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
    }
    
    function scrollStop() {
    //  window.alert ("STOP");
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
    }
    
    </script>
    </head>
    <body>
    <div align=center>
    
    <div id="up" onmouseover="scrollUp()" onmouseout="scrollStop()" style="width: 100px; background-color: #999;">UP</div>
    <div class="scrollBox">
     <div id="scrollTxt" class="scrollTxt">
      <?php include 'lorem.txt';?>
     </div>
    </div>
    <div id="down" onmouseover="scrollDown()" onmouseout="scrollStop()" style="width: 100px; background-color: #999;">DOWN</div>
    

    Hopefully I've not done anything wrong with posting the code here! Any help would be hugely appreciated, especially well before the end of this week!

    MZ

  • 8 years ago

    YES!

    If anyone's interested, here's how I did it in the end.

    JS: var scrollPos=0; // current scroll position

    function scrollUp() {
     scrollPos=scrollPos+1;
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
     scrollTimer = setTimeout('scrollUp()',1);
    }
    
    function scrollDown() {
     scrollPos=scrollPos-1;
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
     scrollTimer = setTimeout('scrollDown()',1);
    }
    
    function scrollStop() {
     document.getElementById('scrollTxt').style.top = scrollPos+'px';
     clearTimeout(scrollTimer);
    }
    

    Page can be viewed here: http://johnchiverton.com/fhd/body.php.

    Rockin'! Well happy.

    Cheers all. MZ

Post a reply

Enter your message below

Sign in or Join us (it's free).

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“XML is like violence - if it's not working for you, you're not using enough of it.”