Dynamically resizing SWFObject to fit into a liquid or flexible layout
I have a website with a flexible layout, I guess you would call it jello, so it resizes depending on the size of the window and resolution, making it difficult to determine what to pass as width and height variables. I wanted it to fit well into its containing <div>.
I couldn’t believe that there wasn’t already a solution for this, so I made my own. This solution uses a bit of php, javascript, and of course, flash. Please keep in mind that I cannot guarantee the reliability and/or quality of this solution, all I know is that it works for me, with IIS and PHP 5 (also works with PHP 4).
I tried to make this flexible, so the code that I inserted in the page that contains the page is:
<div id="container"><?php $flash_file = "flash_file.swf"; include("insert_flash.php");?></div>
And then I made an file called ‘insert_flash.php’. The code I put in was:
<div id="flashcontent">
<p>My alternate text in case the reader doesn't have flash.</p>
</div>
<script type="text/javascript">
if ("<?php echo $flash_file;?>" != ""){
dwidth = document.getElementById('container').offsetWidth;
var width = <?php $headerDims = getimagesize($flash_file);$headerWidth = $headerDims[0];echo $headerWidth;?>;
var height = <?php echo $headerHeight = $headerDims[1];$headerHeight;?>;
if (width > height) {
var percentage = (dwidth / width);
}
else {
var percentage = (dwidth / height);
}
}
var width = Math.floor(width * percentage)-2;
var height = Math.floor(height * percentage)-2;
var so = new SWFObject(”<?php echo $flash_file;?>”, “mymovie”,width,height, “6″, “#ffffff”);
so.addParam(”wmode”, “opaque”);
so.write(”flashcontent”);
window.onresize = function(){ //this is if the window gets resized by the user, so you don’t have to reload the page on every reload
dwidth = document.getElementById(’container’).offsetWidth;
var width = <?php $headerDims = getimagesize($flash_file);$headerWidth = $headerDims[0];echo $headerWidth;?>;
var height = <?php echo $headerHeight = $headerDims[1];$headerHeight;?>;
if (width > height) {
var percentage = (dwidth / width);
}
else {
var percentage = (dwidth / height);
}
var width = Math.floor(width * percentage)-2;
var height = Math.floor(height * percentage)-2;
var so = new SWFObject(”<?php echo $flash_file;?>”, “mymovie”,width,height, “6″, “#ffffff”);
so.addParam(”wmode”, “opaque”);
so.write(”flashcontent”);
}
</script>
Try it out and play with it, the only thing I really experimented with was the ‘-2′ when setting the width and height variables. I’m sure this could be adjusted by setting the properties of the container and flashcontent divs.
Any improvements to suggest? I did try to put the ‘window.onresize’ function into a separate function, so I wouldn’t have to reuse code, but it didn’t work, for some reason.
