2009-12-11 3 views
0

У меня есть следующий код HTML, что я хочу сделать, это разделить страницу на два div и поместить объект влево. Однако swf-файл охватывает всю страницу, а не только левую сторону. В чем может быть проблема?SWFObject и изменение размера Div

Спасибо,

<!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> 

ответ

1

Изменить свои стили к этому:

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

затем изменить свое тело HTML для этого (так что вы заменяете Div внутри левой «окна» :

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

Это работало, как я воображал вы думали в светлячок для меня все равно

+0

Вау, я не могу сказать, насколько я ценю. Вы не поверите мне, но я потратил более 5 часов, чтобы исправить этот код. Я новичок javascript и HTML-кодер (у меня есть опыт работы на других языках). BTW, мне пришлось изменить эту строку html, body, {height: 100%; ширина: 100%; } в этот html, body, #container {height: 100%; ширина: 100%; }. Он не показывал никакого swf-файла. Еще раз спасибо .. действительно .. – deniz

0

Какие нативные размеры SWF? Я думаю, что проценты относятся к% от наследуемых размеров файла, а не к доступному пространству элемента контейнера.

Другим, может быть, так как swf является «объектом», а переделка объекта осуществляется системой, в которой используются размеры порта представления, а не элемент контейнера.

Короче, если вам нужно иметь динамические размеры, я бы вычислил необходимые размеры. Вы можете сделать это с JQuery довольно легко:

<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

Спасибо за ответ. Это может сработать, я попробую, спасибо .. Для swf-файла нет никакого собственного размера, поэтому мне нужно поместить его в жидкий CSS-файл. Он будет иметь динамический размер. Еще раз спасибо, – deniz

2

Когда вы укажете ID в переменной SWFObject attributes, созданный SWFObject <object> заменит целевой div (в данном случае #left) объектом с использованием указанного вами идентификатора (в данном случае #player). Таким образом, ваш CSS для #left не будет работать, потому что больше нет элемента с этим идентификатором.

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

становится

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

Решение либо не указать идентификатор в атрибутах, в этом случае объект наследует идентификатор, используемый целевой DIV, или изменить CSS, чтобы признать, что объект использует ID #player, а не #left