PDA

View Full Version : 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/dynamicindex17/iframescroll_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:

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

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

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:


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


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


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


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

fleshvictim
01-10-2007, 12:44 AM
That did it. Thanks a bunch for the help