Sunday, April 1, 2012

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>

No comments:

Post a Comment