View Full Version : Scrollable IFRAME

01-12-2008, 11:44 PM
1) Script Title: Scrollable IFRAME

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/iframescroll.htm

3) Describe problem: I'm not really even sure exactly what the issue is. It was working fine until I started playing around with my div layers. Here's the full code for the page where the scrollbars actually lie--

<LINK rel="stylesheet" type="text/css" href="css/folio.css">
<TITLE>sarah e keil</TITLE>

<OBJECT width="500" height="225"><param name="movie" value="flash/flash-head.swf"><embed src="flash/flash-head.swf" width="500" height="225"></embed></OBJECT>

<DIV id="ALL">

<DIV id="CELL"></DIV>

<iframe src="main.html" name="content" width="410px" height="300px" scrolling="no" frameborder="no" border="0"></iframe>

<IMG src="images/scroll.gif" usemap="#scroll">


<IMG src="images/foot.gif"><BR>
this is <a href="mailto:trickster@monkeytrick.org">my</a> stuff.

<MAP id="scroll" name="scroll">
<AREA shape ="rect" coords ="0,0,15,29" href="javascript:void(0);" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" alt="upsy">
<AREA shape ="rect" coords ="0,281,15,296" href="javascript:void(0);" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" alt="downsy">


I placed the script unchanged right above the body tag on the page that I want the scrollbars to control. I know I'm using an imagemap, but I've tried individual images & text to test it; nothing works. It has to have something to do with my layers..right? Should I post my CSS code? I'm so confused!

01-13-2008, 03:27 AM
I think I might be missing something but I don't see what it says to add to the page in step 1.

Step 1: Add the following code where you wish the scrollable content to appear on your page:

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

<iframe id="datamain" src="external.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

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