как сделать это 100% ширины и высоты в javascript

еще раньше я попросил сценарий, который может загружать игру, которая показывает какой-то баннер до загрузки игры, и ход загрузки, который он показывает, это не должно быть подделкой, многие люди сказали, что вам нужна вспышка, но я нашел сценарий, который может сделать это для меня. НО есть проблема, когда я начал использовать скрипт в скрипте, ширина и высота могут быть в px, как ширина 500, но не могут быть сделаны на ширину 100%, когда я делаю это на 100%, скрипт перестает работать. Я не могу использовать px или любую другую вещь, кроме 100%, поскольку я хочу, чтобы вспышка увеличивала свою ширину и высоту с изменением разрешения экрана.как сделать это 100% ширины и высоты в javascript

Вот сценарий, вы можете сделать из него демонстрационный html-файл для тестирования, если вы не хотите его делать, я готов предоставить демонстрационную страницу, пожалуйста, оставьте комментарий для него. Спасибо^_^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Pre-roll Example page</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script> 
    <style> 
     .gamecontent    {width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;} 
     .gamecontent .gamewrapper {margin:0px auto 0px auto;} 
     .gamecontent .game   {float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px} 
     .gamecontent .ad   {display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px} 
     .gamecontent .ad #progress {width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;} 
     .gamecontent .ad #pbar  {width:0px;height:10px;background-color:#CCC;} 
     .gamecontent .ad #pskip  {text-align:center;}  
     .medrectangle    {width:300px;height:250px;border:none} 
    </style> 
</head> 

<body> 
<div class="gamecontent"> 
    <div class="gamewrapper" style="height:640px;width:640px;"> 
     <div class="game" id="gameframe"></div> 
     <div id="adframe" class="ad"> 
      <div>Advertisement</div> 
      <div id="plad"></div> 
      <div id="progress"></div> 
     </div> 
     <noscript> 
      <div> 
       <!--Game embed code should be placed here here--> 
      </div> 
     </noscript> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
var af = 'adframe'; 
var gf = 'gameframe'; 
var gid = 'gameswf'; 
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>'; 

function skipad() { 
    $('#plad').html('<div></div>'); 
    $('#'+af).hide(); 
    $('#'+gf).css('width','640px'); 
    $('#'+gf).css('height','640px'); 
} 
$('#gameframe').preloadad(
    { // calls the init method 
     swf  : 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf', 
     width  : 640, 
     height : 640, 
     gameid : gid, 
     gameframe : gf, 
     adframe : af, 
     adcode : adinvoke, 
     pltime : 10000, 
     gametype : 'swf', 
     base  :'http://games.balloontowerdefense.net/b/', 
     skiptxt : 'Click here to show the game', 
     showad :'1' 
    }); 
</script> 

</body> 
</html>

в приведенном выше коде 640 ширина и высота является проблемой, так как она не работает со 100% значений, мне было интересно, как заставить его работать с шириной и высотой 100% , Я не знаю, что я пропустил или где я ошибся?

источник

2012-03-24 CryOfFaclon

может вы попробуете width: auto; height: auto; – Vimalnath

Извините, брат, но авто не работает – CryOfFaclon

Предполагая, что вы используете этот плагин: http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html, есть два пути, которые я могу увидеть.

Во-первых (тем более гибким из двух):

Изменить плагин использовать предоставленные пользователем единицы вместо пикселов. Для этого вам нужно будет изменить две функции в плагине, applygameiframe и showgame.

applygameiframe должен быть изменен на:

var applygameiframe = function() { 
    var gc = '#'+settings.gameframe; 
    var iframe = $('<iframe />').attr({ 
    "id": settings.gameid, 
    "src": settings.swf, 
    "frameborder": 0, 
    "scrolling": "no", 
    "marginwidth": 0, 
    "marginheight": 0 
    }).css({ 
    "height":'settings.height 
    "width": settings.width 
    }); 
    $(gc).append(iframe); 
    return true; 
};

showgame должен быть изменен на:

var showgame = function() { 
    var ac = '#' + settings.adframe; 
    var game = '#' + settings.gameframe; 
    $(ac).hide(); 
    $(game).css({ 
    "width": settings.width, 
    "height": settings.height 
    }); 
};

После того, как эти изменения сделаны, встроенный CSS должен быть установлен на все, что вы поставить в качестве параметров (т.е. , 100%, 50em, и т.п.).

Второй способ (и менее гибкий), чтобы захватить размер окна (или расчетную высоту/ширину, в зависимости от того вы собираетесь) и к югу, что в течение высоты/ширины:

$('#gameframe').preloadad({ // calls the init method 
    swf: 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf', 
    width: window.screen.availWidth, // or $('div.gamewrapper')[0].clientWidth 
    height: window.screen.availHeight, // or $('div.gamewrapper')[0].clientHeight 
    gameid: gid, 
    gameframe: gf, 
    adframe: af, 
    adcode: adinvoke, 
    pltime: 10000, 
    gametype: 'swf', 
    base: 'http://games.balloontowerdefense.net/b/', 
    skiptxt: 'Click here to show the game', 
    showad: '1' 
});

источник

2012-03-24 16:28:56 pete

Привет, спасибо за быстрый ответ. Ну, я использовал ваш первый метод и изменил плагин, вот как это выглядит после применения изменений, которые вы рекомендовали http://files.cryoffalcon.com/Piecemaker/preroll.dev.js, но это не сработало. Он по-прежнему перестает работать, когда я добавляю значения 100% к этой части вышеприведенного скрипта, здесь вы можете увидеть, что я изменил все значения от 640 до 100% и изменил плагин, но все еще не работает. ТЕПЕРЬ ЭТО НЕ РАБОТАЕТ, ДАЖЕ С ПИКСЕЛЬНЫМИ ЗНАЧЕНИЯМИ. Можете ли вы сказать мне, где я ошибся? вот ссылка на образ измененного скрипта http://screencast.com/t/GTemcaKqE3Ye – CryOfFaclon

Я не пробовал ваш второй метод, так как мне нравится ваш первый^_^ – CryOfFaclon

Я тоже попробовал ваш второй метод, с обоими кодами что вы предоставили, он не работает, он делает ширину фиксированной, ее не эластичной больше плюс она создает странный эффект. Итак, как вы упомянули, второй метод не очень гибкий, но я не знаю, почему первый не работает? – CryOfFaclon

как сделать это 100% ширины и высоты в javascript

ответ

Смежные вопросы