www.webdeveloper.com
Results 1 to 5 of 5

Thread: iFrame resizing js not working in FireFox

  1. #1
    Join Date
    Jul 2010
    Posts
    10

    Thumbs down iFrame resizing js not working in FireFox

    Hello All,

    I'm really having a running issue with this code. The reason I went with iframe is because of my flash header, I can't have it reloading with every page. This iFrame resizing code works in IE and Chrome, but not in Firefox or Opera. The purpose of this piece of code is to make the frame length exact every time.

    Can someone please tell me why?

    <script type="text/javascript">
    <!--
    function resize_iframe(){
    document.getElementById("main").height=100

    document.getElementById('main').height=window.frames["main"].document.body.scrollHeight
    }
    // -->
    </script>

    <iframe id="main" name="main" src="main.html" frameborder="0" scrolling="no" width="918" height="400" marginwidth="0" marginheight="0" allowtransparency="true" onload=resize_iframe();>
    </iframe>

    The site is halcyon-hotsprings.com if anyone would care to have a look at it in action.

    If anyone has a better solution than the iFrame I would be interested to hear.

    Thanks so much!

  2. #2
    Join Date
    Feb 2010
    Posts
    184
    Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      
      <head>
        <title>
          Conforming XHTML 1.0 Transitional Template
        </title>
      </head>
      
      <body>
        <script type="text/javascript">
          <!--
    
          function resize_iframe() {
            var main = document.getElementById("main");
            main.style.height = document.getElementById('main').contentWindow.document.body.scrollHeight + "px";
          }
          // -->
        </script>
    
        <iframe id="main" name="main" src="index.html" frameborder="0" scrolling="no"
        width="918" height="400" marginwidth="0" marginheight="0" allowtransparency="true" onload="resize_iframe()">
        </iframe>
      </body>
    
    </html>
    A quick look at your site tells me that you are using flash when html and some javascript could do the same thing and have combined size of less than 1.3mb.

    You may also consider using frames instead.

  3. #3
    Join Date
    Jul 2010
    Posts
    10
    Thank-you, I will look into a js solution, however, this still does not resolve my problem.

    And I would use frames if I had a way of framing the site to look like it does now, something which I have as yet been unable to achieve.

    The biggest problem is the way the backgrounds are set together in order to achieve the seamless look.

    But I am open to suggestion.

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    If you alert the value that you're assigning, you'll see that it is reported as 0, possibly due to the doctype.

    Read:
    Code:
    window.frames['main'].document.documentElement.scrollHeight

  5. #5
    Join Date
    Jul 2010
    Posts
    10
    Weird... have any idea why this would be?

    And why it still works in Chrome, IE and Safari?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles