PDA

Click to See Complete Forum and Search --> : How do i control iframe Scroll from a parent window using javascript

tanveer
01-17-2003, 08:59 AM
Hi guys,

I just want to know how do i control an iframe scroll property from a parent window.

Thanks in advance
tanveer
mawood
01-17-2003, 09:04 AM
Do mean something more than:

<iframe frameborder="0" name="content" id="content" width="400" height="400"scrolling="auto" src="xxxxxx.html"></iframe>

Maybe more details?
tanveer
01-17-2003, 09:18 AM
I wanted to make the scroll in iframe to move right, using javascript which is present in parent window.
mawood
01-17-2003, 09:30 AM
So, if I understand you correctly, you want to have the ability to make the page in the iframe scroll to the right through a function that is outside of the iframe?
tanveer
01-17-2003, 10:25 AM
Correct.

regards
tanveer
mawood
01-17-2003, 11:01 AM
Ok, here ya go. Two parts:

Part 1 - the main page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function verScroll(dir, spd, loop) {
loop = true;
direction = "left";
speed = 10;
scrolltimer = null;
if (document.layers) {
var page = eval(window.content.contentLayer);
}
else {
if (document.all) {
var page = eval(window.content.contentLayer.style);
}
else {
if (document.getElementById) {
var page= eval("document.getElementById('window.content.contentLayer').style");
}
}
}
direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.left);
if (loop == true) {
if (direction == "right") {
page.left = (y_pos - (speed));
} else {
if (direction == "left" && y_pos < 3) {
page.left = (y_pos + (speed));
} else {
if (direction == "left") {
page.left = 1;
}
}
}
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}
function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}
// End -->
</SCRIPT>

</head>

<body>


<TABLE BORDER=0>
<TR>
<TD><A HREF="#" onMouseOver="verScroll('left','5','true')" onMouseOut="stopScroll()"><<<</A></TD>
<TD><A HREF="#" onMouseOver="verScroll('right','5','true')" onMouseOut="stopScroll()">>>></a></A></TD>
</TR>
</TABLE>

<iframe frameborder="0" name="content" id="content" width="400" height="400" scrolling="auto" src="test_frame.html"></iframe>

</body>
</html>






Part 2 - the iframe page:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<DIV ID="contentLayer" STYLE="position:absolute; width:137px; z-index:1; left: 0px; top: 0px">
<table width="600"><tr><td>
Xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx x
</td></tr></table>
</div>
</body>
</html>
wrighty05
12-23-2005, 09:47 AM
I have the same problem - an iframe within a parent page that I want to be scrolled by javascript from the parent page and not from within the iframe content.

Only, this scroll command needs to scroll the iframe both up and down and NOT horizontally. Possibly using the onMouseover method and two images???

My current setup can be found at my website (http://www.domainedupindelalegue.info/external/lancre). Feel free to view the source and edit it if you need to.

Thanks in advance!!!!!
DZW
12-08-2009, 03:08 PM
Hi

Apologies for coming across this quite late after the fact, but this method works beautifully for IE when I tried to incorporate it, but not for any other browsers. Did you have this problem?

I've tried loads of different ways of targetting the contentLayer object in the iframe, but still can't get it to work. Any ideas to help would be appreciated.

Cheers,
DZM


Ok, here ya go. Two parts:

Part 1 - the main page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function verScroll(dir, spd, loop) {
loop = true;
direction = "left";
speed = 10;
scrolltimer = null;
if (document.layers) {
var page = eval(window.content.contentLayer);
}
else {
if (document.all) {
var page = eval(window.content.contentLayer.style);
}
else {
if (document.getElementById) {
var page= eval("document.getElementById('window.content.contentLayer').style");
}
}
}
direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.left);
if (loop == true) {
if (direction == "right") {
page.left = (y_pos - (speed));
} else {
if (direction == "left" && y_pos < 3) {
page.left = (y_pos + (speed));
} else {
if (direction == "left") {
page.left = 1;
}
}
}
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}
function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}
// End -->
</SCRIPT>

</head>

<body>


<TABLE BORDER=0>
<TR>
<TD><A HREF="#" onMouseOver="verScroll('left','5','true')" onMouseOut="stopScroll()"><<<</A></TD>
<TD><A HREF="#" onMouseOver="verScroll('right','5','true')" onMouseOut="stopScroll()">>>></a></A></TD>
</TR>
</TABLE>

<iframe frameborder="0" name="content" id="content" width="400" height="400" scrolling="auto" src="test_frame.html"></iframe>

</body>
</html>






Part 2 - the iframe page:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<DIV ID="contentLayer" STYLE="position:absolute; width:137px; z-index:1; left: 0px; top: 0px">
<table width="600"><tr><td>
Xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx xxxxx x xx xxx x xx xx xx x xxxx xx xxx xx xx xxxx xx xxxx x xx xxxx xxx x xxxx x x xxx xx x
</td></tr></table>
</div>
</body>
</html>