amitamberker Posted October 15, 2011 Share Posted October 15, 2011 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 15, 2011 Share Posted October 15, 2011 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2011 Share Posted October 15, 2011 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. http://w3schools.invisionzone.com/index.php?showtopic=25211&hl=frame+height&fromsearch=1 Link to comment Share on other sites More sharing options...
amitamberker Posted October 16, 2011 Author Share Posted October 16, 2011 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 17, 2011 Share Posted October 17, 2011 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 Link to comment Share on other sites More sharing options...
amitamberker Posted October 17, 2011 Author Share Posted October 17, 2011 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted October 17, 2011 Share Posted October 17, 2011 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. Link to comment Share on other sites More sharing options...
amitamberker Posted October 18, 2011 Author Share Posted October 18, 2011 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 18, 2011 Share Posted October 18, 2011 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> Link to comment Share on other sites More sharing options...
amitamberker Posted October 18, 2011 Author Share Posted October 18, 2011 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 19, 2011 Share Posted October 19, 2011 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> Link to comment Share on other sites More sharing options...
amitamberker Posted October 19, 2011 Author Share Posted October 19, 2011 Hi dsonesuk,1. The Scrollbar is not displaying from the top.2. The Bottom Google Adv is not displaying.Click This Link to comment Share on other sites More sharing options...
dsonesuk Posted October 19, 2011 Share Posted October 19, 2011 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." Link to comment Share on other sites More sharing options...
amitamberker Posted October 20, 2011 Author Share Posted October 20, 2011 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.