tags:

views:

582

answers:

3

Hi,

I have the following HTML code, what I want to do is to split the page into two divs, and place the object to the left side. However, the swf file covers all of the page, not just the left side. What could be the problem?

Thanks,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="language" content="en" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />

 <script src="js/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">
  var flashvars = {
  };
  var params = {
   menu: "false",
   scale: "noScale",
   allowFullscreen: "true",
   allowScriptAccess: "always",
   bgcolor: "#FFFFFF"
  };
  var attributes = {
   id:"player"
  };

  swfobject.embedSWF("player.swf", "left", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

 </script>
 <style>
   html, body { height:100%; width:100%; }
   body  { margin:0; padding:0;  }
   #left {
    float: left;
    width: 50%;
   }

   #right { 
    float: right;
    width: 50%;
   }
 </style>
</head>
<body>
<div id="container" >
<div id="left">

  <p><a href="http://www.adobe.com/go/getflashplayer"&gt;&lt;img 
   src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
   alt="Get Adobe Flash player" /></a></p>
</div>
<div id="right">Test</div>
</div>
</body>
</html>
A: 

What are the native dimensions of the SWF? I think the percentages refer to the % of the inherant dimensions of the file, not the available space of the container element.

Another, thing might be that since a swf is an "object" and object rendring is done by the system it uses the dimentions of the view port, not the container element.

In short if you need it to have dynamic dimensions i would calulate the dimensions needed. You could do so with jQuery pretty easily:

<script src="js/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">
  var left = $('#left');


  var flashvars = {
  };
  var params = {
   menu: "false",
   scale: "noScale",
   allowFullscreen: "true",
   allowScriptAccess: "always",
   bgcolor: "#FFFFFF"
  };
  var attributes = {
   id:"player"
  };

  swfobject.embedSWF("player.swf", "left", ceil(left.width())+'px', ceil(left.height())+'px', "9.0.0", "expressInstall.swf", flashvars, params, attributes);

 </script>
prodigitalson
Thanks for the answer. This might work as well, I will try it, thanks.. There is no native dimension for the swf file, that's why I need to put it in a liquid CSS file. It will have a dynamic size. Thanks again,
deniz
A: 

Change your styles to this:

 <style type="text/css">
   html, body { height:100%; width:100%; }
   body  { margin:0; padding:0;  }
   .box {
     float:left;
     width:50%;
    }
 </style>

then change your body html to this (so that you are replacing a Div inside your left 'box':

<div id="container" >

<div class="box">

    <div id="left">
        <p>
            <a href="http://www.adobe.com/go/getflashplayer"&gt;
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
        </p>
   </div>

</div>

<div class="box">
    Test
</div>

</div>

This worked how I imagined you were thinking in firefox for me anyway

davidsleeps
Wow, I can't tell you how much I appreciate. You won't believe me but I have spend more than 5 hours ti fix this code. I am a novice javascript and HTML coder (I have experience in other languages). BTW, I had to change this line html, body, { height:100%; width:100%; } to this html, body, #container { height:100%; width:100%; }. It did not show any swf file.Thanks again.. really..
deniz
+1  A: 

When you specify an ID in SWFObject's attributes variable, the <object> generated by SWFObject will replace the target div (in this case #left) with an object using the ID you specified (in this case #player). So your CSS for #left won't work, because there is no element with that ID anymore.

<div class="box">
   <div id="left">
      <p> ... </p>
   </div>
</div>

becomes

<div class="box">
   <object id="player" ... >
      <param ... />
   </object>
</div>

The solution is to either not specify an ID in the attributes, in which case the object will inherit the ID used by the target div, or change your CSS to recognize that the object uses the ID #player and not #left

pipwerks