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

javascript , scrolling div Exeter, United Kingdom
  • 11 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

  • 11 years ago

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

  • 11 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

  • 11 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.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint Exupéry