Forum Moderators: open
I've built a website that involves a scrolling area using nested divs that and javascript to move them around. It works fine using the following:
onmousedown="timerID=setInterval('move_thumbs(7, <? echo $thumbnail_width;?>);', 40);" onmouseup="timerID=clearInterval(timerID); onmouseout="timerID=clearInterval(timerID);"
Basically, when you click on the arrow, it calls setInterval with the function to move the div by the first parameter. When you lift up the mouse button, it cancels it.
Everything is fine, except for if you accidently drag off the arrow. In this case, the onmouseup/onmouseout doesn't seem to fire and the scrolling just carries on forever. How can I make sure that if you drag off the arrow, the clearInterval call is triggered?
Many thanks for any help that someone can give
<body onmouseup="if(window.timerID){timerID=clearInterval(timerID);}">
is that what you meant?
If so, it doesn't appear to work sadly
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
body{background:#dee;}
div#divOne{margin:50px;height:300px;width:400px;background:#000;}
</style>
<script type="text/javascript">
function hi(){
document.getElementById('divTwo').innerHTML+="hi ";
}
</script>
</head>
<body onmouseup="if(window.sI)clearInterval(sI);">
<div id="divOne" onmousedown="sI=setInterval('hi()',10);">
</div>
<div id="divTwo">
</div>
</body>
</html>
Thanks very much
