/    Sign up×
Community /Pin to ProfileBookmark

function to adjust iframe dimensions

Copy linkTweet thisAlerts:
Apr 07.2007

I’m trying to make a function that’ll adjust the dimensions of a named iframe when the user clicks an image. Basically, I’m trying to make an iframe that’ll only populate with information when the user clicks a link (i.e. it’s a drop down frame). Obviously, I’m a newbie, but I thought I could do this by simply adjusting the dimensions of the iframe. The code is…

<script>
function populate{
document.getElementById(“equip”).width = 680;
}
</script>

<table>
<tr>
<td><a href=”#” onClick=populate><img src=”../images/arrows.gif”></a>
</td>
</tr>
</table>
<table width=”680″ height=”104″>
<tr>
<td>
<iframe id=”equip” width=”0%” height=”0%”></iframe>
</td>
</tr>
</table>

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@cyber1Apr 07.2007 — Try this:

document.getElementById("equip").style.width="680";
Copy linkTweet thisAlerts:
@digitalentropyauthorApr 07.2007 — Didn't work, but I appreciate the effort.
Copy linkTweet thisAlerts:
@digitalentropyauthorApr 07.2007 — I also tried setting a variable for the width and then writing that into the iframe tag, but that didn't want to work either.

...

var win_wide = '10%';

...



<iframe id="equip" width=<script>document.write(win_wide)</script></iframe>
Copy linkTweet thisAlerts:
@digitalentropyauthorApr 07.2007 — Still going...I can set the initial table width and height using...

<script>document.write('~'+win_wide+'~'+win_high+'~')</script>


However, I cannot change the variables that hold the height and width in a function and have that change show up in the table. Do I need to call the function and then return values for width and height or having declared them as global simply change them within the function?
Copy linkTweet thisAlerts:
@cyber1Apr 07.2007 — You should be using the JS console as you would have spotted the problem real quick.

You're function is not properly formatted.

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Test</title>
<meta name="generator" content="BBEdit">
<script>
function populate(){
document.getElementById("equip").width = 680;
}
</script>
</head>

<body>
<input type="button" value="Set Width" onClick="populate()"><br>
<iframe name="equip" id="equip" src="http://google.com" border="0" frameborder="0" marginwidth="1" marginheight="1" style="border: 1px dotted #C0C0C0" width="300" height="300"></iframe>


</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@digitalentropyauthorApr 07.2007 — JS console is not something I've heard of, but I'll search the web for it. Right now I'm using skEdit, which is nice for .html and .asp and not quite as nice for js.

I'll change my code. Thanks.
Copy linkTweet thisAlerts:
@cyber1Apr 07.2007 — It is in your Tools Menu in FireFox. If not install as an extension.
Copy linkTweet thisAlerts:
@ricpApr 07.2007 — When setting the width (or height for that matter) remember to use the correct metric.

Bad: whatever.style.width = 680;

Good: whatever.style.width = 680 +"px";

As for the task, I am guessing you have an error elsewhere as simply setting the width (with the "px") will resize the element.

[code=html]
<input type="button" onclick="document.getElementById('myIframe').style.width='680px';" value="click me" />
<iframe id="myIframe" style="width:200px;" src="http://mozilla.org"></iframe>
[/code]
Copy linkTweet thisAlerts:
@cyber1Apr 07.2007 — When setting the width (or height for that matter) remember to use the correct metric.

Bad: whatever.style.width = 680;

Good: whatever.style.width = 680 +"px";

As for the task, I am guessing you have an error elsewhere as simply setting the width (with the "px") will resize the element.

[code=html]
<input type="button" onclick="document.getElementById('myIframe').style.width='680px';" value="click me" />
<iframe id="myIframe" style="width:200px;" src="http://mozilla.org"></iframe>
[/code][/QUOTE]

Point well taken. However neither of us specified an inline style to set width.
Copy linkTweet thisAlerts:
@digitalentropyauthorApr 07.2007 — thanks, guys. cyber's suggestion worked well. I wonder, was it the fact that I didn't have populate() or was it because I didn't have the name="equip" set within the iframe tag?
Copy linkTweet thisAlerts:
@cyber1Apr 07.2007 — Theres an easy way to find out.

Take your working code and eliminate the parenthesies.

You'll have your answer.

<iframe id="equip" width="0%" height="0%"></iframe>

You had id specified in your original example.

The name does not cause it to malfunction as you called it using getElementById
×

Success!

Help @digitalentropy 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.3,
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,
)...