Scrolling an IFRAME sideways with (java)Script

**PeterJansma** · 09-11-2006, 10:51 AM

Hello,

I would like to scroll the content of an IFRAME sideways instead of up and down.

The up and down version I figured out, but how can i adjust the existing script to make it scroll from left to right and vice versa untill it reaches the end of the div or table?

Code:

<script type="text/javascript">

var timer_id;
function scroll_iframe(frm,inc,dir) {
  if (timer_id) clearTimeout(timer_id);
  if (window.frames[frm]) {
    if (dir == "v") window.frames[frm].scrollBy(0, inc);
    else window.frames[frm].scrollBy(inc, 0);
    timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
  }
}

function stopScroll() { if (timer_id) clearTimeout(timer_id); }
</script>

and then the button script:

Code:

<a href="javascript:;" onmouseover="scroll_iframe('scr1', -4, 'v'); window.status='Up.'; return true" onmouseout="stopScroll(); window.status=''; return true">

and

Code:

<a href="javascript:;" onmouseover="scroll_iframe('scr1', 4, 'v'); window.status='Down.'; return true" onmouseout="stopScroll(); window.status=''; return true">

Thanks!

**jscheuer1** · 09-12-2006, 07:36 AM

Code:

<a href="javascript:;" onmouseover="scroll_iframe('scr1', -4, 'v'); window.status='Up.'; return true" onmouseout="stopScroll(); window.status=''; return true">Up</a>
<a href="javascript:;" onmouseover="scroll_iframe('scr1', 4, 'v'); window.status='Down.'; return true" onmouseout="stopScroll(); window.status=''; return true">Down</a>
<a href="javascript:;" onmouseover="scroll_iframe('scr1', -4, 'h'); window.status='Left.'; return true" onmouseout="stopScroll(); window.status=''; return true">Left</a>
<a href="javascript:;" onmouseover="scroll_iframe('scr1', 4, 'h'); window.status='Right.'; return true" onmouseout="stopScroll(); window.status=''; return true">Right</a>

**jscheuer1** · 09-12-2006, 08:00 AM

Here is an even better way to do it:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.scrd {
cursor:pointer;
color:blue;
text-decoration:underline;
}
</style>
<script type="text/javascript">

var timer_id;
function scroll_iframe(frm,inc,dir) {
  if (timer_id) clearTimeout(timer_id);
  if (window.frames[frm]) {
    if (dir == "v") window.frames[frm].scrollBy(0, inc);
    else window.frames[frm].scrollBy(inc, 0);
    timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
  }
}

function stopScroll() { if (timer_id) clearTimeout(timer_id); }
</script>
</head>
<body>
<iframe name="scr1" src="../side/1st.jpg" width="400" height="400" scrolling="no" frameborder="1"></iframe><br>
<span class="scrd" onmouseover="this.style.color='red';scroll_iframe('scr1', -4, 'v'); window.status='Up.'; return true" onmouseout="this.style.color='';stopScroll(); window.status=''; return true">Up</span>
<span class="scrd" onmouseover="this.style.color='red';scroll_iframe('scr1', 4, 'v'); window.status='Down.'; return true" onmouseout="this.style.color='';stopScroll(); window.status=''; return true">Down</span>
<span class="scrd" onmouseover="this.style.color='red';scroll_iframe('scr1', -4, 'h'); window.status='Left.'; return true" onmouseout="this.style.color='';stopScroll(); window.status=''; return true">Left</span>
<span class="scrd" onmouseover="this.style.color='red';scroll_iframe('scr1', 4, 'h'); window.status='Right.'; return true" onmouseout="this.style.color='';stopScroll(); window.status=''; return true">Right</span>
</body>
</html>

Thread: Scrolling an IFRAME sideways with (java)Script

Thread Tools

Search Thread

Scrolling an IFRAME sideways with (java)Script

Bookmarks

Bookmarks

Posting Permissions