SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Orlando, FL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically resize iFrame launched via Shadowbox?

    Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. 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? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox.

    Consider me a JavaScript newbie! You're help is greatly appreciated!!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was poking at the dimensions of #sb-wrapper & #sb-container using Firebug and I see you're changing values in those places too. You look to be heading in the right direction.

    My other half is also an editor/motion graphics person looking for work in West Michigan, so I feel like I should sabotage his site in some way, but give me a shout if you don't figure it out
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Orlando, FL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, yes...those are elements of the Stylesheet that I got with the latest version of Shadowbox. By no means did I purposely use those values.

    But for all I know, there could be an easy way to do this already built into Shadowbox. There is a Shadowbox.js and Shadowbox.css file that came with it, and endless lines of code that I don't pretend to fully understand. If someone thinks it may be beneficial for me to post them here, let me know and I will..

    Best of luck to your other half, Michigan's film industry (or lack there-of) is why I moved to Orlando!


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
  •