www.webdeveloper.com
Results 1 to 3 of 3

Thread: Code for dynamically resizing iframes

  1. #1
    Join Date
    Mar 2010
    Posts
    701

    Code for dynamically resizing iframes

    Code:
    document.getElementById('myframe').style.height = document.getElementById('myframe').contentWindow.document.body.offsetHeight;
    This doesn't work for some reason. Is it because the parent and the child are in different domains?

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by narutodude000 View Post
    Code:
    document.getElementById('myframe').style.height = document.getElementById('myframe').contentWindow.document.body.offsetHeight;
    This doesn't work for some reason. Is it because the parent and the child are in different domains?
    Yes - the console must be showing an 'access denied' error.
    Y_U U_G_A_E_U_ B_S_A_D_

  3. #3
    Join Date
    Aug 2010
    Location
    Orlando, FL
    Posts
    2
    I'll piggy back off this topic to avoid starting unnecessary threads.

    How could I apply this to an iFrame launched via Shadowbox within the same domain? For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'.

    Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen here:
    http://www.mikegermond.com/demo.html

    Here is the code that I use in 'demo.html' to launch the iFrame:

    Head
    Code:
    <script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script>      
          <script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
          
          <script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script>
    <script type="text/javascript">
    function moveCloseLink(){ 
        var cb=document.getElementById('sb-nav-close'); 
        var tb=document.getElementById('sb-title'); 
        if(tb) tb.appendChild(cb); 
    } 
    Shadowbox.init({
    	onOpen: moveCloseLink,
    flvPlayer: '/shadowbox/player.swf',
    language: 'en',
    players: ["flv","iframe"],
    flashParams: {allowfullscreen:'true'},
    flashVars: {
    skin: '/shadowbox/modieus.swf',
    image: '/upload/demo-poster.jpg',
    autostart: true
    }
    });
    </script>
    Body
    HTML Code:
    <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A>
    What do I need to do in 'gallery/archive_iframe.html' if anything? And what do I need to do in 'demo.html'? Consider me a JavaScript newbie! You're help is greatly appreciated!!

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