scrollable iframe inside iframe

**fleshvictim** · 01-08-2007, 07:49 AM

1) Script Title: Scrollable content III

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...scroll_dev.htm

3) Describe problem: im trying to load an iframe that contains another iframe that i want to be scrollable.

**djr33** · 01-08-2007, 08:38 AM

Well, the code would work just as is, but should go inside the first iframe, so it affects the iframe in that. It won't work form the main page.

Just a guess, but I'm pretty sure that is how to do it.

**fleshvictim** · 01-08-2007, 03:10 PM

regardless of where the script is - it doesn't scroll.

**jscheuer1** · 01-08-2007, 04:57 PM

It works here, save these three files to a directory and load over.htm into the browser -

over.htm source:

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

</head>
<body>
<iframe src="top.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>

top.htm source:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

<body>

<!--Scrollable content III (iframe)- 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>
</div>
</layer>

</body>
</html>

external.htm source:

Code:

MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>
MY CONTENT HERE<br>


<!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT-->

<script language="JavaScript1.2">

//Scrollable content III- By http://www.dynamicdrive.com

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

**fleshvictim** · 01-08-2007, 11:17 PM

Hey, thanks for the response, but its still not working. I think the problem is that i have the controls for the scroller on my main page (in your example it would be over.htm)

index.html:

HTML Code:

<iframe src="main.htm" width="291" height="265" frameborder="0" name="iframe" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="auto"></iframe>
			
			
<map name="Map"><area shape="rect" coords="3,5,35,37" href="#" onMouseover="scrollspeed=-4" onMouseout="scrollspeed=0"></map>
<map name="Map2"><area shape="rect" coords="7,-1,37,32" href="#" onMouseover="scrollspeed=4" onMouseout="scrollspeed=0"></map></body>
</html>

news.htm:

HTML Code:

<body STYLE="background-color:transparent">

<iframe src="news2.htm" width="291" height="245" frameborder="0" name="iframe2" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</body>

news2.htm ( the frame i want to control ):

HTML Code:

<body STYLE="background-color:transparent">

<table align=center width="250" height="280" border="0" cellpadding="0" cellspacing="0" valign=top>
  <tr valign="top"> 
    <td valign="top"><p><img src="news.jpg" width="272" height="480" /></p>
    </td>
  </tr>
</table>


<script language="JavaScript1.2">

//Scrollable content III- By http://www.dynamicdrive.com

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

**djr33** · 01-09-2007, 12:06 AM

Yeah. That is the issue. The script is designed for one level, not two. It is likely possible to convert, but I'll let John do that, since I probably wouldn't get you anywhere with it.

My guess is that you just need to add a layer to all the commands, like dosomething().iframe1.iframe2, etc.

**fleshvictim** · 01-09-2007, 12:12 AM

Alright, thanks for the heads up.

**jscheuer1** · 01-09-2007, 05:02 AM

Not sure why you would want to do that but, it is pretty easy. Just move the controls 'as is':

Code:

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

from (in my example) top.htm to over.htm - Then on external.htm do a global search and replace of the word parent with top. This is a little confusing due to my unfortunate choice of calling the middle file top.htm - The use of 'top' instead of 'parent' on external.htm has nothing to do with the name of the file in the middle.

**djr33** · 01-09-2007, 11:56 AM

Ah, good to know, John. I assumed it would be more like child.child structure, not that you could just skip to the inner iframe.

**jscheuer1** · 01-09-2007, 05:03 PM

Going for the child of anything is generally a bad idea in javascript. Sometimes it is unavoidable but, less often than one might think. The reason being that a parent may have many children but a child has only one parent so, it is easier to go from the bottom-up than from the top-down. Here we are going from the 'child' to the 'top', a riskier proposition as, there could always be yet another parent above the over.htm page. In which case we would change parent on external.htm to parent.parent instead of top.

Thread: scrollable iframe inside iframe

Thread Tools

Search Thread

scrollable iframe inside iframe

Bookmarks

Bookmarks

Posting Permissions