Back to discussion

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

Last post was 16 Jul 2009 at 14:59
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

    Report abuse
  • 11 years ago

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

    Report abuse
  • 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

    Report abuse
  • 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

    Report abuse

Post a reply

Enter your message below

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

JavaScript forum discussion

JavaScript tutorials

Quick links

Recent activity

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!

Web Development

Developer Jobs

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.

Cancel
“An expert is a man who has made all the mistakes that can be made in a very narrow field” - Niels Bohr