/    Sign up×
Community /Pin to ProfileBookmark

How do i control iframe Scroll from a parent window using javascript

Copy linkTweet thisAlerts:
Jan 17.2003

Hi guys,

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

Thanks in advance
tanveer

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — 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?
Copy linkTweet thisAlerts:
@tanveerauthorJan 17.2003 — I wanted to make the scroll in iframe to move right, using javascript which is present in parent window.
Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — 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?
Copy linkTweet thisAlerts:
@tanveerauthorJan 17.2003 — Correct.

regards

tanveer
Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — 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>
Copy linkTweet thisAlerts:
@wrighty05Dec 23.2005 — 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 [URL=http://www.domainedupindelalegue.info/external/lancre]my website[/URL]. Feel free to view the source and edit it if you need to.

Thanks in advance!!!!!
Copy linkTweet thisAlerts:
@DZWDec 08.2009 — 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>[/QUOTE]
×

Success!

Help @tanveer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...