/    Sign up×
Community /Pin to ProfileBookmark

JS to change iframe height

Copy linkTweet thisAlerts:
May 02.2003

OK, I have an iframe and wish the height of it to be, say 650px if the resolution of the users’ screen is higher than 800×600. Can anyone help me?
cheers

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@AdamGundryMay 02.2003 — How about using this JS to generate the iframe?

if (screen.height > 600){

document.write('<iframe height="650px">');

} else {

document.write('<iframe height="300px">');

}

Remember this will fail if Javascript is disabled, so setup appropriate <noscript> tags.

Adam
Copy linkTweet thisAlerts:
@rellikauthorMay 02.2003 — cheers, where do i put the <noscript></noscript> tags?

within the <script>? or after?

cheers
Copy linkTweet thisAlerts:
@pyroMay 02.2003 — After... This is the syntax:

<script language="javascript" type="text/javascript">

//your script here

</script>

<noscript>You need to enable javascript</noscript>
Copy linkTweet thisAlerts:
@rellikauthorMay 02.2003 — Can't i put

<script language="javascript" type="text/javascript">

if (screen.height > 600){

document.write('<iframe height="650px">');

} else {

document.write('<iframe height="300px">');

}

</script>

<noscript><iframe height="300px"></noscript>

so that it would create the 'default' sized iframe?
Copy linkTweet thisAlerts:
@pyroMay 02.2003 — Here's now I'd do it, and it won't break for those without javascript -- it just will simply not resize the iframe.

&lt;html&gt;
&lt;head&gt;
&lt;script language="javascript" type="text/javascript"&gt;

function setvals() {
if (screen.height &gt; 600) {
document.getElementById("myiframe").style.height = "600px";
}
else {
document.getElementById("myiframe").style.height = "300px";
}
}

&lt;/script&gt;

&lt;/head&gt;
&lt;body onload="setvals()"&gt;

&lt;iframe id="myiframe" style="height:300px;"&gt;&lt;/iframe&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rellikauthorMay 02.2003 — cheers fellas..wrked a treat ?
×

Success!

Help @rellik 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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