Scrollable iFrame Script: Can the 'Up' & 'Down' Buttons Be Moved?

**Naisey** · 08-01-2006, 06:48 PM

Scrollable iFrame
http://www.dynamicdrive.com/dynamici...ramescroll.htm

Thanks for this great script. I've gotten it to work very well in all major browsers, but I'd like to tweak the placement of the 'Up' and 'Down' links. Is this possible? I'd like to put the links on the side of the frame instead of at the bottom.

Thanks for your help.

**mburt** · 08-01-2006, 06:58 PM

Put this in the page that has the up and down links:

Code:

<html>
<head>
</head>
<body>
<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<table>
<tr>
<td width="50">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a>
<a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</td>
<td>
<iframe id="datamain" src="external.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
</td>
</tr>
</table>
</body>
</html>

**Naisey** · 08-01-2006, 07:34 PM

Thanks, mburt but that's not exactly what I was looking for. The code you wrote places the 'Up' and 'Down' links one on top of the other. I already changed it myself to do this, but what I need to do now is move those links to the upper-right side of the iFrame. I've attached a drawing of what I want to do.

**mburt** · 08-01-2006, 07:55 PM

In that case, you don't have to worry about scripting on the main page, you can script it all within the iframe src itself. All that is, is scrolling the page up and down using document.body.scrollTop. I suggest using a completely different script in that case.

page_scroller.htm

Code:

<html>
<head>
<script language="javascript">
var i=0
var speed=3
function scrollUp() {
i=i-speed
var newDoc = document.getElementById("body")
newDoc.scrollTop=i
if (i < 0) {i=0}
t1=setTimeout("scrollUp()",0)
}
function scrollDown() {
i=i+speed
var newDoc = document.getElementById("body")
newDoc.scrollTop=i
if (i > window.screenTop) {i=window.screenTop}
t2=setTimeout("scrollDown()",0)
}
</script>
<style type="text/css">
body {
margin:0px;
overflow:hidden
}
#msg {
position:absolute;
text-align:center;
font:20px arial;
top:0%;
right:10%
}
#body {
height:100%;
width:100%;
overflow:hidden;
padding:15px
}
</style>
</head>
<body>
<div id="msg">
<a href="#" onmouseover="scrollUp()" onmouseout="clearTimeout(t1)"><img src="up.bmp" border="0"></a>
<br><a href="#" onmouseover="scrollDown()" onmouseout="clearTimeout(t2)"><img src="down.bmp" border="0"></a>
</div>
<div id="body">
The body of your document
<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test
<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test
</div>
</body>
</html>

scroller_index.htm

Code:

<html>
<head>
</head>
<body>
<iframe src="page_scroller.htm" width="300" height="300"></iframe>
</body>
</html>

the images are attached

**mburt** · 08-01-2006, 08:04 PM

Online example:

http://www40.brinkster.com/mburt/scr...ller_index.htm

**jscheuer1** · 08-01-2006, 10:14 PM

That doesn't seem to work too well in Opera. Anyways, the up down controls are represented on Dynamic Drive's demo page as:

HTML Code:

<layer visibility=hide>
<div style="width:150px;" align="right">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a> | <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</div>
</layer>

As you can see, they are separate markup. You can put them wherever you want them. If you had a table with no border and two cells, the iframe could go in the first cell and the controls, without their division, could go in the second cell:

HTML Code:

<table border="0"><tr><td>iframe goes here</td><td align="left" valign="top"><layer visibility=hide>
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a> | <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</layer></td></tr></table>

You would probably want to keep the archaic <layer> tag, as that will hide them from NS 4, which cannot display an iframe. There are tons of ways to lay out a page, that is just one way that will put the controls where you say you want them.

**mburt** · 08-01-2006, 10:32 PM

Read this:

Twey:

The <layer> element has been obsolete since about Netscape 4 :-\ Nowadays we use <div>, or a more semantically-appropriate block-level element if one is available.

**jscheuer1** · 08-02-2006, 04:13 AM

Absolutely. That is why it is so well suited to (in this case) hiding things from NS 4. A division might work as well but, that isn't certain. In any case, it does no harm and should be ignored by modern browsers.

**Naisey** · 08-03-2006, 04:17 PM

Thank you both for the help. Using John's code, I was able to make the changes I wanted. I didn't realize it was as easy as putting the code into different cells.

Much appreciated.

**mburt** · 08-04-2006, 01:07 AM

John:

Absolutely. That is why it is so well suited to (in this case) hiding things from NS 4. A division might work as well but, that isn't certain. In any case, it does no harm and should be ignored by modern browsers.

Wow.. That's genius. I never thought about using it like that.

Thread: Scrollable iFrame Script: Can the 'Up' & 'Down' Buttons Be Moved?

Thread Tools

Search Thread

Scrollable iFrame Script: Can the 'Up' & 'Down' Buttons Be Moved?

Bookmarks

Bookmarks

Posting Permissions