/    Sign up×
Community /Pin to ProfileBookmark

Controlling an Iframe scroll or anchor without affecting the parent window

Copy linkTweet thisAlerts:
Aug 10.2007

I have an iframe on my site. I need the frame to display its “child” page at a specific point. I can do this by setting an anchor, but it makes the parent window go there, too. I was thinking of just using java script to make the iframe scroll bars go to a specific point when the page loads. Is that feasible, and do you know what script might accomplish this?

Here is the site: [url]http://ludwig.squarespace.com/home/[/url]

The iframe window doesn’t really display efficient content because the header “Foundation” is so large. I need the page to scroll past the header so that people can see the content I am trying to “point” to.

Much thanks for any help you can provide

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@gomisuteAug 10.2007 — try this on the source page of the iframe...


this.scrollTo(0,0);

where (0,0) is the coordinates to scroll to...

or something along those lines...
Copy linkTweet thisAlerts:
@LudwigWrulesauthorAug 10.2007 — ... I can't get the code to work. I've tried everything. The only way I can force a scroll in the iframe is with a link:

<a href="javascript:parent.internal.scrollTo(120,120)">Scroll Up</a>

... but I cannot get it to scroll AUTOMATICALLY.

I've tried:

<script type = text/javascript">

parent.internal.scrollTo(120,120);

</script>

and

<SCRIPT LANGUAGE="JavaScript">

parent.internal.location.scrollTo(120,120).href = 'http://ludwig.squarespace.com/rightspage/'

</SCRIPT>

but none of these seem to work.
Copy linkTweet thisAlerts:
@LudwigWrulesauthorAug 10.2007 — ... for some reason a smiley with a tounge appeared in my post.

I think it is because the word "javasript:" ended with a colon and then the next character was "p" for parent, causing ":" + "P," which turned into :p

anyways, sorry

:eek:
Copy linkTweet thisAlerts:
@slaughtersAug 10.2007 — ... but I cannot get it to scroll AUTOMATICALLY.

I've tried:

<script type = text/javascript">

parent.internal.scrollTo(120,120);

</script>

and

<SCRIPT LANGUAGE="JavaScript">

parent.internal.location.scrollTo(120,120).href = 'http://ludwig.squarespace.com/rightspage/'

</SCRIPT>

but none of these seem to work.[/QUOTE]Throw the first one into a function and call it with an onload event from the BODY tag.

You are trying to scroll something before it has been created further down in the page. It will only work if you wait until the page has finished fully loading.
Copy linkTweet thisAlerts:
@p_phreshAug 10.2007 — in your source for the page within the iframe add the anchor:

<a name="content">

and have the iframe src:

src="pageUrl.html#content"

and if you have a link on the parent page of the iframe add a target attribute.

Maybe that will work for you?
Copy linkTweet thisAlerts:
@gomisuteAug 11.2007 — when you write a function or even a line of script, it has to get called upon somehow...it won't start on its own...

try this

<i>
</i>
&lt;script type = text/javascript"&gt;
function gotodesiredplace(){

parent.internal.scrollTo(120,120);

}
&lt;/script&gt;



and in the body tag of the iframe's source page use onload to call it

good luck
Copy linkTweet thisAlerts:
@LudwigWrulesauthorAug 15.2007 — ... hey thanks for all of your help. Suggestions were great! I solved the problem, but I cheated. I just put scroll commands directly into the child pages, because they don't need to show their foreheads either. But I do see that calling the function on the parent page is a solution also. Once again, thanks so much for very helpful advice.
×

Success!

Help @LudwigWrules 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.17,
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,
)...