SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Dynamic Iframes

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Denton, Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Iframes

    Here is what I am trying to do:

    http://www.carbonfour.com/god/dev/c4v5/dev/c4v5.htm

    Works great on my PC with IE 6...doesn't work with anything else.

    You can click on the first 2 options of the top of menu 1 and the top option on menu 2 to get a feel of how it works.

    Here is the code that I am using:

    function getIFRAMEdocheight(theiframe, def_height) {
    var IFRAMEref = frames[theiframe];
    if (IFRAMEref)
    return (typeof IFRAMEref.document.body != 'undefined' &&
    typeof IFRAMEref.document.body.scrollHeight != 'undefined') ?
    IFRAMEref.document.body.scrollHeight :
    (typeof IFRAMEref.document.height != 'undefined') ?
    IFRAMEref.document.height :
    def_height;
    }

    and

    <iframe name="f1" frameborder="0" id="f1" width="143" height="100" scrolling="no" onload="f1.resizeTo(143,getIFRAMEdocheight('f1',600))" src="c4v5_f1.htm"></iframe>

    I am a graphic designer and don't even know where to begin on this. I would like it to work in other browsers and on the mac.

    I am also very open to suggestions of how to do this type of menu navigation without javascript. The 3 columns will be loading in php pages that will vary in lenght which is why I need them to dynamically resize, but I don't want the page to reload every click.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, in the parent page:
    Code:
    <script type="text/javascript" language="javascript">
    
    function getIFRAME_doc_height(IFrameDoc)
    {
    	return (typeof IFrameDoc.height != 'undefined') ? 
    		IFrameDoc.height + 16 : 
    	(IFrameDoc.body && typeof IFrameDoc.body.scrollHeight != 'undefined') ? 
    		IFrameDoc.body.scrollHeight + 30 :
    	null;
    }
    
    function IFRAME_size_to_content(iframe_ref, def_height)
    {
    	var IFrameDoc, oIframe = document.getElementById(iframe_ref);
    	if (typeof oIframe != null)
    	{
    		if (oIframe.contentDocument) 
    			IFrameDoc = oIframe.contentDocument; 
    		else if (oIframe.contentWindow)
    			IFrameDoc = oIframe.contentWindow.document;
    		else if (oIframe.document)
    			IFrameDoc = oIframe.document;
    
    	var hgt = getIFRAME_doc_height(IFrameDoc);
    	if (hgt != null)
    		oIframe.style.height = String(hgt + 'px');
    	else oIframe.style.height = String(def_height + 'px');
    	}
    }
    
    </script>
    Call it - from the iframe pages - like so:

    <html>
    <head>
    ..............
    </head>
    <body.........onload="if(parent.IFRAME_size_to_content)parent.IFRAME_size_to_content('f1', 600)">

    Be sure to id the iframe. A little fudging on the numbers there. Feel free to edit.
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Denton, Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! It works with everything I have tried with the exception of Safari on Mac which is good enough for me.


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
  •