iFrame SSI script II doesn't resize with tab panels

[Marnix26]

1) Script Title: :: Iframe SSI script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iframessi2.htm

3) Describe problem: I've created a homepage in Dreamweaver with an iFrame. I have made another webpage with three tab panels in it and each panel has a different height. This webpage with the tabs appears in the iFrame correctly and the iFrame resizes directly thanks to your Iframe SSI script II.
So far no problem after the first appearance of that webpage inside the iFrame.

But here is the problem: when I select on that page with the three panels (within the iFrame) another tab of which the content panel is less high or higher, the iFrame doesn't resize any longer. The size of the iFrame freezes - stays the same after each click on a tab! So the resizeCaller function of your script in the homepage (the parent page) doesn't listen to the click on a tab of the page inside the iFrame. So is there a solution for this problem? I remark the same behaviour of the iFrame when there is a page with Spry accordion panels in it. Thank you very much for your help!

[jscheuer1]

The iframe resizes on its load event, not on changing the tab. You haven't mentioned what triggers a tab change though. Is it a click event or something else? If it's a click event, putting this script in the head of the page with the tabs on it (the page in the iframe) has a good chance of working:

<script type="text/javascript">
(function(){
	var pframes = parent.window.frames,
	piframes = parent.document.getElementsByTagName('iframe'),
	i = pframes.length, frameid;
	while(--i > -1){
		if(pframes[i] === this){
			frameid = piframes[i].id;
			break;
		}
	}
	function resizeIframe(){
		setTimeout(function(){parent.resizeIframe(frameid);}, 100);
	}
	if (document.addEventListener){
		document.addEventListener('click', resizeIframe, false);
	}
	else if (document.attachEvent){
		document.attachEvent('onclick', resizeIframe);
	}
})();
</script>

But without seeing the pages, there's so much I cannot be certain of. And:

The browser cache may need to be cleared and/or the page refreshed to see changes.

If the event that changes the tabs isn't a click event, or if there's any problem . . . In any case:

If you want more help, please include a link to the page (the top page in this case, the one with the iframe ssi script on it) on your site that contains the problematic code so we can check it out.

[Marnix26]

Your script works perfectly! Thank you very much!

[Marnix26]

Tablets - October 2013

Dear John,

Your script still works perfectly on a desktop/laptop computer but not on a tablet with Android. For desktop mode I use the 'mousedown' and 'onmousedown' events in your code but what do I have to write in your code that replaces the mouse or click events with a finger tap on the screen of a tablet? Perhaps the script can't be used any longer for tablets on Android (4 in my case).
Thank you in advance (again) for your help!
Marnix

[jscheuer1]

Try:

<script type="text/javascript">
(function(){
	var pframes = parent.window.frames,
	piframes = parent.document.getElementsByTagName('iframe'),
	i = pframes.length, frameid;
	while(--i > -1){
		if(pframes[i] === this){
			frameid = piframes[i].id;
			break;
		}
	}
	function resizeIframe(){
		setTimeout(function(){parent.resizeIframe(frameid);}, 100);
	}
	if (document.addEventListener){
		document.addEventListener('click', resizeIframe, false);
		document.addEventListener('touchstart', resizeIframe, false);
	}
	else if (document.attachEvent){
		document.attachEvent('onclick', resizeIframe);
	}
})();
</script>

[Marnix26]

Dear John,

I've changed the code on the page in the iFrame according to your suggestions but on the tablet the page with the iFrame doesn't shrink after a click on a tab which is on a the page within the iFrame.

It's important that the visitor can click with the mouse using a desktop/laptop ('mousedown') and that he can also tap with his finger on the same (let us say) tab on the page within the iFrame with the same result: the iFrame shrinks depending on the height of the content of the page in the iFrame. Now the footer area stays "frozen" below the page in which is the iFrame.

So no problem with 'mousedown' for the desktop.
Still a problem with 'touchstart' for the tablet.

Hopefully you can send me another suggestion.

Thank you very much!

Marnix

[jscheuer1]

I don't have anything to test this on. And I'm not aware of anything else to use other than touchstart.

I am wondering:

1. Is the old page still cached on the touch device? This often happens in browsers with pages in iframes, the cache should be emptied on the touch device.
   
   
2. Is it too soon? If so, we can add more delay.
   
   
3. Do you think anything is happening on the touch device? Like is it doing an incomplete resizing when a tab is touched, or is nothing happening to resize at that point?