Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Iframe auto resize, expands but does not contract in IE/Safari.

    http://isensors.com.sg/isensors-GJ/

    That's the page I'm working on now, the script I'm using from here: http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

    It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.

    <script type="text/javascript">

    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids=["contentframe", "newsframe"]

    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide="no"

    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

    function resizeCaller() {
    var dyniframe=new Array()
    for (i=0; i<=iframeids.length; i++){
    var iframeid = iframeids[i];
    if (document.getElementById)
    resizeIframe(iframeid)
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
    tempobj.style.display="block"
    }
    }
    }

    function resizeIframe(frameid){
    var currentfr=document.getElementById(frameid)
    if (currentfr && !window.opera){
    currentfr.style.display="block"
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
    currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50;
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight+50;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)
    }
    }
    }

    function readjustIframe(loadevt) {
    var crossevt=(window.event)? event : loadevt
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
    if (iframeroot)
    resizeIframe(iframeroot.id);
    }

    function loadintoIframe(iframeid, url){
    if (document.getElementById)
    document.getElementById(iframeid).src=url
    }

    if (window.addEventListener)
    window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", resizeCaller)
    else
    window.onload=resizeCaller

    </script>

    Could someone kindly help me find the problem? Thanks.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It contracts, but only after some background process ends. It might be related with the fact that you have a JavaScript error in your documents. You call a YAHOO object which is not defined. Maybe you miss a file from the Yahoo API.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Kod, thanks for the reply.

    Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

    What about in I.E, do you know why it isn't working at all?

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by gjkung View Post
    Hi Kod, thanks for the reply.

    Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

    What about in I.E, do you know why it isn't working at all?
    You said IE and safari. I have no Safari (I work on Win7), but I have tested in IE. In IE it works, but only after a considerable period (several seconds). Meanwhile the windows wait cursor shows that a process (I don't know which) works in background. Only after that process ends, the iframe is re-sized.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for pointing out. I don't have IE myself, so I only got a short glimpse at it. Will try again.

    I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by gjkung View Post
    I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.
    news.asp is trying to load the following files, which do not exist:

    <script type="text/javascript" src="./js/yahoo-min.js" ></script>
    <script type="text/javascript" src="./js/dom-min.js" ></script>
    <script type="text/javascript" src="./js/event-min.js" ></script>

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks.

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The code you're using seems to be installing event handlers twice for the same function. I also notice that one iframe has two different IDs, so it's not certain which frame is the target.

    I would scrub that code and just use the much simpler code below, which I'm sure will work.

    The event handler could be installed unobtrusively, but in the case of iframes, I.E. requires setAttribute to be used, so I just simplified it for now.
    Code:
    <script type='text/javascript'>
    
    function setIframeHeight( iframeId )
    {
     var ifDoc, ifRef = document.getElementById( iframeId );
    
     try
     {   
      ifDoc = ifRef.contentWindow.document.documentElement;  
     }
     catch( e )
     { 
      try
      { 
       ifDoc = ifRef.contentDocument.documentElement;  
      }
      catch(ee)
      {   
      }  
     }
     
     if( ifDoc )
     {
      ifRef.height = ifDoc.scrollHeight;  // Enable / disable
      // ifRef.width = ifDoc.scrollWidth; // required lines
     }
    }
    
    </script>
    
    <iframe onload='setIframeHeight( this.id )' id="newsframe" name="newsframe" src="news.asp" width="100%" scrolling="no" frameborder="0" class="contentframe"></iframe>
    Last edited by Logic Ali; 03-08-2011 at 06:28 AM.

  • #9
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Logic All, the new code works on firefox, but not on Internet Explorer still, I just tried it and the page just doesn't resize.

    I have no idea why I have 2 id, I didn't even write that, I think Dreamweaver added it in on it's own when I opened the file with it and made a few changes.

    The code works on Safari for expanding, but it still doesn't contract when the loaded page becomes smaller.

    I've also fixed the missing JS files.

    Thanks, have a look again.
    http://isensors.com.sg/isensors-GJ/

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The reason it doesn't work in I.E. is because the framed documents don't have a doctype. Just give them the same doctype as the paent pages:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    I don't see a problem in (Windows) Safari.
    Last edited by Logic Ali; 03-08-2011 at 05:49 PM.

  • #11
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks Logic Ali!

    It's working now, such a simple mistake on my part!

    Thanks for all the help guys!
    Last edited by gjkung; 03-09-2011 at 03:26 AM.


  •  

    Posting Permissions

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