/    Sign up×
Community /Pin to ProfileBookmark

Dynamically Extending an Iframe

Copy linkTweet thisAlerts:
Jan 31.2010

[url=http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm]http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm[/url]

This is the tutorial I followed. I did everything it said to do and it worked on my index page where the iframe is located. The only problem is when I try to load a new page into that iframe the iframe doesn’t extend and scroll bars appear. On the tutorial there is an example of what i’m talking about. Does anybody know why the other page doesn’t extend? Here is an exmaple: [url=http://www.dejavulifestyle.com/dvsite/example.html]http://www.dejavulifestyle.com/dvsite/example.html[/url] It’s the video page that i’m trying to open in the iframe.

to post a comment
HTML

17 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 31.2010 — It's [COLOR="Blue"]resizeIframe(frameid)[/COLOR] not: onload='[COLOR="Red"]resize_iframe[/COLOR]()'>
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — I'm still having the same problem. I found two places to replace that code is that correct?
Copy linkTweet thisAlerts:
@FangJan 31.2010 — No, you need to pass the [I]id[/I] of the frame to resize and call the function after loading the new document.
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — So I should take out <iframe name="blog" and make it <iframe id="blog"? I've never done anything like this so it's difficult.
Copy linkTweet thisAlerts:
@FangJan 31.2010 — Both&lt;iframe name="blog" id="blog"
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — I did that but it still doesn't seem to work. Does anybody know what i could be doing wrong?
Copy linkTweet thisAlerts:
@FangJan 31.2010 — &lt;a href="http://www.dejavulifestyle.com/video/show_news.php" onclick="loadintoIframe('blog', this.href); return false;"&gt;Video&lt;/a&gt;
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — What do i put for this.href? Thanks for helping me figure this out
Copy linkTweet thisAlerts:
@FangJan 31.2010 — You have it incorrectly coded here: &lt;td align="center" valign="top"&gt;&lt;p&gt;&lt;a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','nav/news1.gif',1)"&gt;&lt;img src="nav/news.gif" alt="News" name="Image3" width="282" height="15" border="0" id="Image3" /&gt;&lt;br /&gt;

<i> </i> &lt;br /&gt;
<i> </i> &lt;/a&gt;&lt;a href="http://dejavulifestyle.com/video/show_news.php" target="blog" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','nav/video1.gif',1)"&gt;&lt;img src="nav/video.gif" alt="Video" name="Image4" width="282" height="15" border="0" id="Image4" /&gt;&lt;/a&gt;[COLOR="Red"]&lt;a href=""javascript:loadintoIframe('blog', 'http://www.dejavulifestyle.com/video/show_news.php')"&gt;[/COLOR]&lt;br /&gt;
<i> </i> &lt;br /&gt;
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — What do i need to change to make it correct? I wasn't sure what to put for this.html
Copy linkTweet thisAlerts:
@FangJan 31.2010 — &lt;a href="http://dejavulifestyle.com/video/show_news.php" target="blog" onclick="loadintoIframe('blog', this.href); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','nav/video1.gif',1)"&gt;&lt;img src="nav/video.gif" alt="Video" name="Image4" width="282" height="15" border="0" id="Image4" /&gt;&lt;/a&gt;
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — Still no luck ?
Copy linkTweet thisAlerts:
@FangJan 31.2010 — Replace this: &lt;td align="center" valign="top"&gt;&lt;p&gt;&lt;a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','nav/news1.gif',1)"&gt;&lt;img src="nav/news.gif" alt="News" name="Image3" width="282" height="15" border="0" id="Image3" /&gt;&lt;br /&gt;

<i> </i> &lt;br /&gt;
<i> </i> &lt;/a&gt;&lt;a href="http://dejavulifestyle.com/video/show_news.php" target="blog" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','nav/video1.gif',1)"&gt;&lt;img src="nav/video.gif" alt="Video" name="Image4" width="282" height="15" border="0" id="Image4" /&gt;&lt;/a&gt;&lt;a href=""javascript:loadintoIframe('blog', 'http://www.dejavulifestyle.com/video/show_news.php')"&gt;&lt;br /&gt;
<i> </i> &lt;br /&gt;with this: &lt;td align="center" valign="top"&gt;&lt;p&gt;&lt;a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','nav/news1.gif',1)"&gt;&lt;img src="nav/news.gif" alt="News" name="Image3" width="282" height="15" border="0" id="Image3" /&gt;&lt;br /&gt;

<i> </i> &lt;br /&gt;
<i> </i> &lt;/a&gt;&lt;a href="http://dejavulifestyle.com/video/show_news.php" target="blog" onclick="loadintoIframe('blog', this.href); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','nav/video1.gif',1)"&gt;&lt;img src="nav/video.gif" alt="Video" name="Image4" width="282" height="15" border="0" id="Image4" /&gt;&lt;/a&gt;&lt;br /&gt;
<i> </i> &lt;br /&gt;
Copy linkTweet thisAlerts:
@Harry_ChristyauthorJan 31.2010 — http://www.dejavulifestyle.com/dvsite/example.html

I don't get why this isn't be working. Should I try to follow a different tutorial?
Copy linkTweet thisAlerts:
@FangFeb 01.2010 — Change this line:function resizeIframe(frameid){
[COLOR="Blue"]var currentfr=document.getElementById(frameid)[/COLOR]
Altering the script without knowing what it does is not a good idea.
Copy linkTweet thisAlerts:
@Harry_ChristyauthorFeb 01.2010 — In the tutorial it says,

Configuring the script

To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.

So i figured those were them. What exactly are the variables i need to change? I changed that line and it still didn't resize.
Copy linkTweet thisAlerts:
@Harry_ChristyauthorFeb 03.2010 — Nobody knows how to do this?
×

Success!

Help @Harry_Christy 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.18,
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,
)...