javascript scrolling on click event

This is the code:

<img src="images/scrolldown.gif"  onClick="frames['iframe'].scrollBy(0,50)"  >

'iframe' is some name of iframe that i want to scroll when image is clicked.

What i need is to scroll iframe when mouse button is pressed and while is pressed it should scroll for 50 px, until mouse is released. When it's released it should stop scroll.

I tried some loop but it doesn't work.
LVL 2
zvuciniAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Sinoj SebastianConnect With a Mentor CTO & OpenERP Project managerCommented:
Iframe scrolling example


<!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;}
</style>
<script type="text/javascript">

function scroll_iframe() {
  if (window.frames["iframe"]) {
    window.frames["iframe"].scrollBy(0, 5);
  }
}

</script>
</head>
<body onmouseup="if(window.sI)clearInterval(sI);">
<img src="http://www.roomforboxing.com/images/down-arrow.gif"  onmousedown="sI=setInterval('scroll_iframe()',10);"/>

<iframe name="iframe" id="iframe" src="page_two.html" width="100%" height="200" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>
0
 
Sinoj SebastianCTO & OpenERP Project managerCommented:
This may Help you. You can get the concept from this small page. You have to use "onmousedown" event from img tag and "onmouseup" from body tag.

<!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>
0
 
zvuciniAuthor Commented:
No, what i need is continuous scrolling od iframe until mouse is released. Now, it's scrolling only once.
0
 
zvuciniAuthor Commented:
Great!
 
Best regards,
Zoran
0
 
zvuciniAuthor Commented:
Perfect!

Best regards
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.