The content of the IFrame content load after the current page is loaded or after the “src” attribute change. So we are not able to have the IFrame content height or width until the data is rendered. It exist an event handler called “onload” that trigger once the content is loaded, but it is not possible to get the content body height, in fact it will alway’s return 0. By googling, I’ve found a lot of solutions, but none of them was working properly or at least working like I wanted. Because of that, I’ve written my own solution.

My solution is to use a “setTimeout” until the IFrame content is fully rendered on the page and after that, we are able to get the iframe content height and set it to the IFrame itself. In the following solution I actually use JQuery. If you need to convert it to normal JavaScript, it should be pretty easy.

Write this into your HTML:

1
2

<iframe id="iframeId" name="iframeId" onload="sizeIFrame(this.id)" style="width:100%">
</iframe>

Write this in your javascript (header or JS file):

1
2
3
4
5
6
7
8
9
10
11
12

function sizeIFrame(frameId) {
	var myIFrame = $("#" + frameId);
	var innerDoc = (myIFrame.get(0).contentDocument) ? myIFrame.get(0).contentDocument : myIFrame.get(0).contentWindow.document;
 
	try {// will throw an exception if the body is not fully loaded.
		myIFrame.height(innerDoc.body.scrollHeight + 35);
	} catch (e) { }
 
	if (innerDoc.body && innerDoc.body.scrollHeight == 0) {
		setTimeout(function() { sizeIFrame(frameId); }, 100);
	}
}

If you are having any problem please leave a comment.

This solution have only been tested on Internet Explorer 6/7

Example of doing a little animation with 3 divs (the 3 boxes under the code):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

	$(document).ready(function(){
		$("#beat1").heartBeat(
			{
			delayBetweenAnimation:2000,  
			delay:1000 
			});
		setTimeout(function(){
			$("#beat2").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 200);
		setTimeout(function(){
			$("#beat3").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 500);
	});

My 3 divs are made like this:

1
2
3
4
5

<div>
	<div id="beat1" style="float:left;margin-left:5px;background-color:#AABBCC; width:10px; height:10px;"></div>
	<div id="beat2" style="float:left;margin-left:5px;background-color:#AABBCC; width:20px; height:20px;"></div>
	<div id="beat3" style="float:left;margin-left:5px;background-color:#AABBCC; width:30px; height:30px;"></div>
</div>

Note that, you can use class or whatever you want inside the selector instead of the id (I recommend it).

Heart Beat 0.1

Description:
This plugin is used to enhence the actual checkbox in pages. Depending on OS and Theme, people actually have different check box look and feel. The one in Windows XP is actually looking good, but compared to Vista, Vista is even more beautiful. I wanted to create a more standard check box that you can use everywhere (code behind, etc.).

Sample:

1
2
3
4
5
6
7

$(document).ready(function(){
 $("#cbwt1")
  .CheckboxMod({
      ImageUrlChecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/checked.jpg', 
      ImageUrlUnchecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/unchecked.jpg'
   });
});

To know more about that plugin, you can go in JQuery Plugins section.

Download Checkbox Modfier Version 0.2