[jQuery] jQuery Question of the Week! Iframes and Loading!
So I'm building a custom CMS solution for a site that exclusively uses
jQuery, but the cool part is that the CMS is entirely placed in a
single web page. I accomplish this by showing and hiding only the
necessary <divs> required for the respective tab that is clicked AND
using a ton of AJAX to interact with the databases.
However, I am recently stumped as to how to get the following to work.
I need the contentWindow height of an iframe. Sounds easy. No. I
keep a variable set called maxHeight so I know what value to change
the height of the "content" <div> (which holds all other divs)
depending on which tab is clicked (Insert News, Mailing List, etc.).
One of these divs contains an iframe (within the content div) and I
can't seem to get the proper height because it is appears I have wait
for the page to LOAD (and the subsequent iframe to load) before I can
calculate the height. Well this isn't effective because I need to
know this height when the DOM is READY.
Essentially, I am taking the entire structure of the page and cloning
and placing it in a temporary div. Then I show all the divs and then
calculate the height of the iframe to get the maxHeight value.
Unfortunately, this is always zero. Any suggestions?
<head>
<style type="text/css">
iframe { display:block; width:100%; border:none; width:100%; height:
100%;}
</style>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
function resizeFrame(f)
{
alert(f.contentWindow.document.body.offsetHeight + " is the
offsetheight");
f.style.height = f.contentWindow.document.body.offsetHeight + 'px' ;
}
$().ready(function(){
$('iframe').load(function()
{
alert('entered');
resizeFrame(this);
});
});
</script>
</head>
<body>
<iframe src="events.php" scrolling="no" id="x"></iframe>
</body>