Dynamically resize iFrame launched via Shadowbox?

JavaScript
1

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

<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

<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

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!

3

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 :wink: