PDA

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



Naisey
08-01-2006, 06:48 PM
Scrollable iFrame
http://www.dynamicdrive.com/dynamicindex17/iframescroll.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:


<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



<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 (http://www40.brinkster.com/mburt/scripts/scroller_index.htm)



<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/scripts/scroller_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:


<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:


<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.