How to set 100% height of HTML iFrame in all browsers
after searching over the google and spending some time me and my friend ali got this code working for us. I want to set the height of an iFrame 100% in all major browsers like IE,Mozzila,Chrome,Safari and Opera. It can be done with the support of javascript. Here goes the code.
HTML iFrame Code:
<iframe align="center" id="iframe_id" name="iframe_id" src="http://www.paksmile.com/" scrolling="yes" width="100%" height="200px" frameborder="0" style="position:relative; bottom:0; left:0; top:0px;" onload="resize_iframe()">
The JavaScript Code:
<script language="JavaScript">
window.onresize = resize_iframe;
function resize_iframe() {
var viewportwidth;
var viewportheight;
var header = document.getElementById("iframe_id").offsetTop;
// the more standards compliant browsers (mozilla/netscape/opera) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
viewportheight = viewportheight - header;
}
// IE6,IE7 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
viewportheight = viewportheight - header;
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
viewportheight = viewportheight - header;
}
//document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
var header = document.getElementById("iframe_id").offsetTop;
document.getElementById("iframe_id").style.height=viewportheight+"px";
}
</script>
The CSS Code: (Optional)
<style type="text/css">
html, body{
overflow:hidden;
}
iframe {height:100%;}
</style>
Comments
Post a Comment