2009-12-11 3 views
0

J'ai le code HTML suivant, ce que je veux faire est de diviser la page en deux divs, et placez l'objet sur le côté gauche. Cependant, le fichier swf couvre toute la page, pas seulement le côté gauche. Quel pourrait être le problème?SWFObject et redimensionnement Div

Merci,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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"><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> 

Répondre

1

Changez vos styles à ceci:

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

puis changer votre corps html à ce (de sorte que vous remplacez une division dans votre gauche « case » :

<div id="container" > 

<div class="box"> 

    <div id="left"> 
     <p> 
      <a href="http://www.adobe.com/go/getflashplayer"> 
      <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> 

Cela a fonctionné comme je l'imaginais vous pensiez dans Firefox pour moi de toute façon

+0

Wow, je ne peux pas vous dire combien j'apprécie. Vous ne me croirez pas mais j'ai passé plus de 5 heures à réparer ce code. Je suis un novice javascript et codeur HTML (j'ai de l'expérience dans d'autres langues). BTW, j'ai dû changer cette ligne html, body, {height: 100%; largeur: 100%; } à ce html, body, #container {height: 100%; largeur: 100%; } Il n'a pas montré de fichier SWF. Merci encore .. vraiment .. – deniz

0

Quelles sont les dimensions natives du fichier SWF? Je pense que les pourcentages se réfèrent au% des dimensions inhérentes du fichier, pas à l'espace disponible de l'élément conteneur. Une autre chose pourrait être que, étant donné qu'un swf est un "objet" et que le rendu d'objet est effectué par le système, il utilise les dimensions du port de visualisation, pas l'élément conteneur.

En bref, si vous avez besoin d'avoir des dimensions dynamiques je voudrais calibrer les dimensions nécessaires. Vous pouvez le faire avec jQuery assez facilement:

<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> 
+0

Merci pour la réponse. Cela pourrait marcher aussi, je vais essayer, merci .. Il n'y a pas de dimension native pour le fichier swf, c'est pourquoi je dois le mettre dans un fichier CSS liquide. Il aura une taille dynamique. Merci encore, – deniz

2

Lorsque vous spécifiez un ID dans la variable attributes de SWFObject, le <object> généré par SWFObject remplace la div cible (dans ce cas, #left) par un objet utilisant l'ID que vous avez spécifié (dans ce cas, #player). Donc, votre CSS pour #left ne fonctionnera pas, car il n'y a plus d'élément avec cet ID.

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

devient

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

La solution est soit de ne pas spécifier un ID dans les attributs, dans ce cas, l'objet hérite de l'ID utilisé par la div cible ou modifier votre CSS pour reconnaître que l'objet utilise l'ID #player et non #left