I'm very close, using PHP and Javascript to resize an .swf file to fit container div

**trigger** · Sep 27, 2006 08:55

Alright, I'm a bit of a noob in Javascript, so forgive me. What I'm trying to do is resize a flash file to fit a container div, called 'center'. I want it to scale proportionally to fit the width of 'center' which is liquid/jello sized. I am able to get the dimensions right, and resize a dummy .jpg image right, but I'm trying to apply this to a flash file.

I'm using SWFobject to apply the .swf, it seems to be the best solution.

Code:

<?php $header = "images/example.swf";
$headerDims = getimagesize($header);
$headerWidth =  $headerDims[0];
$headerHeight = $headerDims[1];?>
<script type="text/javascript">
onResize="document.location.href = document.location.href"
if ("<?php echo $header;?>" != ""){
	dwidth = document.getElementById('center').offsetWidth;
	var width = <?php echo $headerWidth;?>;
	var height = <?php echo $headerHeight;?>;
	if (width > height) {
		var percentage = (dwidth / width);
	}
	else {
		var percentage = (dwidth / height);
	}
	var width= Math.floor(width * percentage);
	var height= Math.floor(height * percentage);
//these are the variables I want to plug into SWFobject below
</script>
<script type="text/javascript" src="swf.js"></script>
<div id="flashcontent">
	  Here is my dummy text
</div>
<script type="text/javascript">
var so = new SWFObject("images/example.swf", "mymovie","<<<this is where I want to put my width from above>>>","<<<this is where I want to put my height from above>>>", "7", "#336699");
so.write("flashcontent");
</script>

As you can see, my weakest skill is javascript. I can get the width and height right, but I want to use those variables to apply a width and height to my SWFobject.

Any ideas of how I can do this? I feel like I'm close! Also, if anyone has ideas on how to clean this up, please tell me, you won't hurt my feelings.

Also, I just noticed that

Code:

if ("<?php echo $header;?>" != ""){

isn't closed, but I've never had a problem with that before.

**trigger** · Sep 27, 2006 14:00

Even with SWFobject, I'm able to get what I want with,

Code:

var so = new SWFObject("images/example.swf", "mymovie","100%","100%", "7", "#336699");

, but only in Firefox, in IE it doesn't work at all, it displays the backup text.

**trigger** · Sep 28, 2006 11:28

Well, I finally figured it out. I wanted to shrink a flash to fit the container div with SWFObject, even if I didn't know the width of the container div.
Put in header

Code:

<script type="text/javascript" src="js/swfobject.js"></script>

of course have the SWFobject installed.
Change body tag to

Code:

<body onResize="document.location.href = document.location.href">

Code:

$header = "swf/example.swf";
$headerDims = getimagesize($header);
$headerWidth =  $headerDims[0];
$headerHeight = $headerDims[1];?>
<script type="text/javascript">
onResize="document.location.href = document.location.href"
if ("<?php echo $header;?>" != ""){
	dwidth = document.getElementById('center').offsetWidth;
	var width = <?php echo $headerWidth;?>;
	var height = <?php echo $headerHeight;?>;
	if (width > height) {
		var percentage = (dwidth / width);
		}
		else {
			var percentage = (dwidth / height);
		}
	}
</script>
<div id="flashcontent">
Dummy text to fill in for now, like alt text for the .swf in case it doesn't load.
</div>
<script type="text/javascript">
var width = Math.floor(width * percentage);
var height = Math.floor(height * percentage);
var so = new SWFObject("<?php echo $header;?>", "mymovie",width,height, "6", "#fff");
so.write("flashcontent");
</script>

Now it automatically resizes when the window is resized and everything! Great for those who want to fit flash into a liquid design.

User Tag List

Thread: I'm very close, using PHP and Javascript to resize an .swf file to fit container div

Thread Tools

Display

I'm very close, using PHP and Javascript to resize an .swf file to fit container div

Bookmarks

Bookmarks

Posting Permissions