SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Not another drugstore, not another town
    Tired of the overdrop, I had to put it down
    You know I was the man when I put the Crown down
    Then rolled around the Chemicals to pave the New Sound

  2. #2
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Not another drugstore, not another town
    Tired of the overdrop, I had to put it down
    You know I was the man when I put the Crown down
    Then rolled around the Chemicals to pave the New Sound

  3. #3
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Not another drugstore, not another town
    Tired of the overdrop, I had to put it down
    You know I was the man when I put the Crown down
    Then rolled around the Chemicals to pave the New Sound


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
  •