JavaScriptを100％の幅と高さにする方法

私は、ゲームがロードされ、ロード進捗状況が表示されるまで、いくつかのバナーを表示するゲームをロードできるスクリプトを尋ねました。人々はあなたがそれのためにフラッシュが必要だと言ったが、atlast私は私のためにそれを行うことができるスクリプトを見つけた。しかし、私はスクリプトでスクリプトを使用し始めたときに幅と高さは幅500のようにpxであることができますが、100％にするとスクリプトが機能しなくなります。画面解像度の変更に合わせてフラッシュの幅と高さを増やしたいので、100％以外のpxやその他のものは使用できません。JavaScriptを100％の幅と高さにする方法

ここにスクリプトがあります。デモ用のhtmlファイルをテスト目的で作成することができます。デモページを提供する準備ができていない場合は、コメントを残してください。それは100％の値では動作しないよう上記のコード640の幅と高さが

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

が、問題です^ _ ^ありがとう、私はそれが100％の幅と高さを動作させるためにどのように思っていました。何が欠けていたのか、どこが間違っていたのか分かりません。

出典

2012-03-24 CryOfFaclon

することができますあなたは幅を試してみましょう：auto; height：auto; – Vimalnath

申し訳ありませんが、兄弟は自動で動作していません。 – CryOfFaclon

このプラグインを使用しているとします：http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html、これについては、私が見ることができる2つの方法があります。

まず（両者のより柔軟な）

ユーザ供給ユニットの代わりにピクセルを使用するプラグインを変更します。これを行うには、プラグインの2つの関数、applygameiframeとshowgameを変更する必要があります。これらの変更が行われると、インラインCSSを使用して、パラメータ（すなわちとして供給するものにセットする必要があります

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

：に変更する必要があります

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：

applygameiframeに変更する必要があります、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

私はあなたの最初のものが好きなので私はあなたの2番目の方法を試していませんでした^ _ – CryOfFaclon

私は両方のコードあなたが提供した、それは動作しません、それは幅を固定し、それ以上の弾性は奇妙な効果を作成します。だから、あなたは2番目の方法は非常に柔軟ではないが、私はなぜ最初の1つは動作していないのか分からないと述べた？ – CryOfFaclon

JavaScriptを100％の幅と高さにする方法

答えて

関連する問題