Jump to content
amitamberker

Setting Height Of Iframe Dynamically

Recommended Posts

Hi, How do I set the hight of iframe dynamically?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Testing</title></head> <body style="margin:0px"> <div align="center">Google Adv</div><div> </div><div style="height:2600px"><iframe name="I1" id="I1" src="http://www.TESTING.com" title="Testing" border="0" frameborder="0" scrolling="auto" style=";height:100%;width:100%"> </iframe></div><div> </div><div align="center">Google Adv</div><div> </div><div align="center">Google Adv</div><div style="background-color:navy"> </div> </body> </html>
Please suggest. Thank you.

Share this post


Link to post
Share on other sites

Get a reference to the element with Javascript, and use the same techniques you use for any other element. You can set the CSS width and height values in element.style.width and element.style.height.

Share this post


Link to post
Share on other sites
Get a reference to the element with Javascript, and use the same techniques you use for any other element. You can set the CSS width and height values in element.style.width and element.style.height.
Hi justsomeguy, 1. From where do I get the reference to the element with Javascript?2. How do I use the techniques?3. How do I set the CSS width and height values in element.style.width and element.style.height? Please suggest.
If you mean find the height of source page, and adjust iframe to match look at this post, its a fews year old but it still should be still usable.
Hi dsonesuk, Nope. I do not mean to find the height of source page. Anyways, thanks for your reply.

Share this post


Link to post
Share on other sites

If the iframe has an ID, you can use document.getElementById to get a reference to it. You can also use document.getElementsByTagName to get all iframe elements and loop through them to find the one you're looking for if there is more than one iframe on the page. This page describes the properties specific to iframe elements: http://www.w3schools.com/jsref/dom_obj_frame.asphttp://www.w3schools.com/jsref/prop_iframe_height.asp Here is the reference for the document object: http://www.w3schools.com/jsref/dom_obj_document.asp

Share this post


Link to post
Share on other sites

Hi justsomeguy,Please find the attached "2 Scroll Bars.png" file. Could you please tell me how do I fix that Scrolling thingy? I referred the 2nd link (http://www.w3schools...rame_height.asp) among those 3 links. So, the code looks like this.

<html><head><script type="text/javascript">function changeSize(){document.getElementById("myframe").height="100%";document.getElementById("myframe").width="100%";}</script></head><body style="margin:0px"><iframe id="myframe" src="http://www.w3schools.com" height="100%" width="100%" border="0" frameborder="0"><p>Your browser does not support iframes.</p></iframe><br /><br /></body></html>

Share this post


Link to post
Share on other sites

The iframe is too large, or something else on the page is making the body larger than the window. You can use the overflow CSS property if you want to hide scrollbars when the content is larger than the container.

Share this post


Link to post
Share on other sites
The iframe is too large, or something else on the page is making the body larger than the window. You can use the overflow CSS property if you want to hide scrollbars when the content is larger than the container.
Hi justsomeguy,I want that scrollbar but not 2 scrollbars. Just one. How do I use the overflow CSS property to hide the unwanted scrollbar? I had sent you a Private Message. Did you get a chance to see that?

Share this post


Link to post
Share on other sites

The two <br /> element causes a extra line to be added to the height of 100% of iframe, resulting in the vertical scroll bar to appear, either remove these or use overflow:hidden; for the body element of the page.

<body style="margin:0; overflow:hidden;">

or place styling in <head>..</head>

<html><head><script type="text/javascript">function changeSize(){document.getElementById("myframe").height="100%";document.getElementById("myframe").width="100%";}</script><style type="text/css">body {margin:0; overflow:hidden;}</style></head><body><iframe id="myframe" src="http://www.w3schools.com" height="100%" width="100%" frameborder="0" scrolling="yes"><p>Your browser does not support iframes.</p></iframe></body></html>

Share this post


Link to post
Share on other sites

Hi dsonesuk, I have removed the <br /><br /> elements and used "overflow:hidden;" for the body element of the page instead of placing styling in <head>.....</head>. It looks PERFECT now! :) I would like to add "<p>.....</p>" for Google Adv CODE above and below the <iframe> tag.

<p align="center">Google Adv CODE</p><iframe id="myframe" src="http://www.w3schools.com" height="100%" width="100%" frameborder="0" scrolling="yes"><p align="center">Google Adv CODE</p>
So, how do I update the entire code now? Please suggest.

Share this post


Link to post
Share on other sites

You will have to allow for the height of both paragraphs of text, and reduce the percentage height of the iframe accordingly. this will cause these line of text show continuously, as the height of window is set at 100% of full browser viewport area, and will not scroll. <html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">function changeSize(){document.getElementById("myframe").height="100%";document.getElementById("myframe").width="100%";}</script><style type="text/css"></style></head><body style="margin:0px; overflow:hidden;"><p align="center" style="position:relative; top:0; height:1em; margin:0;">Google Adv CODE</p><iframe id="myframe" class="myframe" src="http://www.w3schools.com" height="92%" width="100%" frameborder="0" scrolling="yes"></iframe><p align="center" style="position:relative; bottom:0; height:1em; margin:0; ">Google Adv CODE</p></body></html>

Share this post


Link to post
Share on other sites

Hi dsonesuk,1. The Scrollbar is not displaying from the top.2. The Bottom Google Adv is not displaying.Click This

Share this post


Link to post
Share on other sites

1. Well it won't as the top and bottom space is now the occupied by the google ads.2. You did realize you have to compensate for crappy IE, and reduce the percentage height even more for IE....Come on! "you do the box model your way, and I'll do it my way, cause I am God! B.G microsoft IE."

Share this post


Link to post
Share on other sites

Hi dsonesuk, Okie Doke, I gotch you point. So, what should I do now? How do I fix or update my code? Only the top Google Adv is showing-up. Bottom Google Adv does not show-up. How do I make it visible?

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /><title>Dsonesuk</title><script type="text/javascript">function changeSize(){document.getElementById("myframe").height="100%";document.getElementById("myframe").width="100%";}</script></head><body style="margin:0px; overflow:hidden;"><p align="center" style="position:relative; top:0; height:1em; margin:0;"><script type="text/javascript"><!--google_ad_client = "pub-3898155806382466";/* 728x90, created 3/12/11 */google_ad_slot = "2654464930";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></p><iframe id="myframe" class="myframe" src="http://www.w3schools.com" height="92%" width="100%" frameborder="0" scrolling="yes"></iframe><p align="center" style="position:relative; bottom:0; height:1em; margin:0; "><script type="text/javascript"><!--google_ad_client = "pub-3898155806382466";/* 728x90, created 8/29/08 */google_ad_slot = "0674304158";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></p></body></html>
Edited by creative1977

Share this post


Link to post
Share on other sites

If you are linking to external domain, you can't get the height of page to adjust to your requirements because of security issues, the next better option is to find the the height of google ads, add them together, and subtract that height from the total height of browser window, and set the height of the iframe to that value, and as long as the google ads are in div containers at the very top and bottom of the page this will work in all browsers.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">window.onload=function(){var bodyheight = document.body.offsetHeightvar DivTags = document.getElementsByTagName("div");var topad = DivTags[0].style.height;var botad = DivTags[(DivTags.length)-1].style.height;frameHeight = parseInt(bodyheight)-(parseInt(topad)+parseInt(botad))document.getElementById("myframe").style.height=frameHeight+"px";}</script><style type="text/css">body,html {height:100%;}</style></head><body style="margin:0px; overflow:hidden;"><div align="center" style="position:relative; top:0; height:88px; margin:0; background-color:#0033FF;">Google Adv CODE</div><iframe id="myframe" class="myframe" src="http://www.w3schools.com"  width="100%" frameborder="0" scrolling="yes"></iframe><div align="center" style="position:relative;  bottom:0;height:88px;  background-color:#0033FF; margin:0; ">Google Adv CODE</div></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...