/    Sign up×
Community /Pin to ProfileBookmark

iFrame resizing js not working in FireFox

Copy linkTweet thisAlerts:
Aug 08.2010

Hello All,

I’m really having a running issue with this code. The reason I went with iframe is because of my flash header, I can’t have it reloading with every page. This iFrame resizing code works in IE and Chrome, but not in Firefox or Opera. The purpose of this piece of code is to make the frame length exact every time.

Can someone please tell me why?

<script type=”text/javascript”>
<!–
function resize_iframe(){
document.getElementById(“main”).height=100

document.getElementById(‘main’).height=window.frames[“main”].document.body.scrollHeight
}
// –>
</script>

<iframe id=”main” name=”main” src=”main.html” frameborder=”0″ scrolling=”no” width=”918″ height=”400″ marginwidth=”0″ marginheight=”0″ allowtransparency=”true” onload=resize_iframe();>
</iframe>

The site is halcyon-hotsprings.com if anyone would care to have a look at it in action.

If anyone has a better solution than the iFrame I would be interested to hear.

Thanks so much!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@letmehaveagoAug 08.2010 — Try this:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>
Conforming XHTML 1.0 Transitional Template
</title>
</head>

<body>
<script type="text/javascript">
<!--

function resize_iframe() {
var main = document.getElementById("main");
main.style.height = document.getElementById('main').contentWindow.document.body.scrollHeight + "px";
}
// -->
</script>

<iframe id="main" name="main" src="index.html" frameborder="0" scrolling="no"
width="918" height="400" marginwidth="0" marginheight="0" allowtransparency="true" onload="resize_iframe()">
</iframe>
</body>

</html>
[/CODE]

A quick look at your site tells me that you are using flash when html and some javascript could do the same thing and have combined size of less than 1.3mb.

You may also consider using frames instead.
Copy linkTweet thisAlerts:
@EleytheriaauthorAug 10.2010 — Thank-you, I will look into a js solution, however, this still does not resolve my problem.

And I would use frames if I had a way of framing the site to look like it does now, something which I have as yet been unable to achieve.

The biggest problem is the way the backgrounds are set together in order to achieve the seamless look.

But I am open to suggestion.
Copy linkTweet thisAlerts:
@Sterling_IsfineAug 10.2010 — If you alert the value that you're assigning, you'll see that it is reported as 0, possibly due to the doctype.

Read:[CODE]window.frames['main'].document.documentElement.scrollHeight[/CODE]
Copy linkTweet thisAlerts:
@EleytheriaauthorAug 10.2010 — Weird... have any idea why this would be?

And why it still works in Chrome, IE and Safari?
×

Success!

Help @Eleytheria 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 4.29,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...