Community discussion forum

Back to discussion

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

Last post was 16 Jul 2009 at 14:59
Tags: javascript, scrolling div Exeter, United Kingdom
  • 6 months 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

    Post was edited on 22/05/2009 11:57:21 Report abuse
  • 4 months ago

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

    Report abuse
  • 4 months 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
  • 4 months 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).

Ask a question

Related discussion

Related articles

Quick links

Recent activity

Languages

Web Development

Frameworks & Architecture

Other major sections

Cancel
Want to stay in touch with what's going on? Follow us on twitter!