PDA

View Full Version : How to make it 100% heigh and width in javascript



cryoffalcon
03-24-2012, 03:22 PM
Hi,
well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me.
BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working.
I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution.

Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. Thank you ^_^


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


in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. I don't know what did i miss or where did i go wrong?