Advanced Search

Results 1 to 7 of 7

Thread: iFrame SSI script II doesn't resize with tab panels

  1. #1
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default iFrame SSI script II doesn't resize with tab panels

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Your script works perfectly! Thank you very much!

  4. #4
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Try:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jscheuer1; 10-30-2013 at 03:24 AM. Reason: unnecessary quoting

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. IFrame SSI script II Resize?
    By cveile in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-16-2010, 06:48 PM
  2. Resize problem with Iframe Script II
    By D72 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-25-2007, 12:51 PM
  3. Iframe SSI script II will not resize...
    By pcoles in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-05-2006, 07:45 AM
  4. IFrame SSI script II Resize?
    By meebix in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-05-2006, 08:30 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •