www.webdeveloper.com
Results 1 to 3 of 3

Thread: How can I get my Show/Hide Effect to resize my iFrame? (Example Inside)

  1. #1
    Join Date
    Jun 2012
    Posts
    7

    How can I get my Show/Hide Effect to resize my iFrame? (Example Inside)

    I've got an Iframe displaying my html page that contains
    a Show/Hide element javascript effect.

    Problem is the iFrame is loading the child page but not adjusting it's size upon using the show/Hide Div effect.

    See my example: http://www.taskmotivator.com/Iframe_test.html

    Notice that when "page 2" is clicked the parent page isn't resizing to account for the longer paragraph of the child.

    I've used relative positioning, but their seems to-be a lack of communication.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    "auto" is invalid for the height setting of the <iframe> tag (and HTML tags in general). <iframe>s do not rely on the content of the page they show. They require explicit width and height settings - either in pixels or as a percentage.

    My advice would be to use another mechanism to show the content. Off the top of my head, I'd use AJAX to load the external page into memory, extract whatever content you want to display and insert it into a normal <div>, which would automatically expand vertically to accommodate the content, using the innerHTML property. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2012
    Posts
    7
    I had thought that their would be a way of connecting the Iframe script up with the Show/Hide javascript:


    Code:
    <script type="text/javascript">
    function showonlyone(thechosenone) {
          var newboxes = document.getElementsByTagName("div");
                for(var x=0; x<newboxes.length; x++) {
                      name = newboxes[x].getAttribute("name");
                      if (name == 'newboxes') {
                            if (newboxes[x].id == thechosenone) {
                            newboxes[x].style.display = 'block';
                      }
                      else {
                            newboxes[x].style.display = 'none';
                      }
                }
          }
    }
    
    </script>

    ...so it's triggered when the Div is clicked?

    Code:
    if (document.getElementById(id).style.display == "block") {
            document.getElementById("main").height +=20) + "px";
        else
            document.getElementById("main").height -=20px;
    }
    }
    Doesn't really work?
    I'll look into an Ajax alternative to iFrames, but it's sorta crucial that i use Iframes.

    Thanks

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