...

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



cryoffalcon
03-24-2012, 04:30 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?

devnull69
03-25-2012, 01:28 AM
width and height CSS styles are strongly connected to the "position" setting of the element (or elements higher in the DOM tree). Try to set position:relative or absolute to enable width and height to their "full power".

Mishu
03-25-2012, 03:46 AM
To set a % height on an element, its parent element must have a height specified for it, otherwise the browser won't know what height value to take X% of.

cryoffalcon
03-25-2012, 08:32 AM
Well i tried css on it with relative positions it doesn't work (or maybe i did it wrong) but the result was no different.

cryoffalcon
03-25-2012, 08:34 AM
@Mishu its not the problem that parent doesn't have it or not, the issue is that the script stops working if you make it 100% the percentage value tease the script

devnull69
03-25-2012, 08:41 AM
You mean inside the .preloaded() plug-in initialization? Why didn't you tell us?

Go to the documentation of the plug-in. If width and height parameters can only take integer values, you will have to change the plug-in itself to accomodate your needs.

cryoffalcon
03-25-2012, 11:24 AM
You mean inside the .preloaded() plug-in initialization? Why didn't you tell us?

Go to the documentation of the plug-in. If width and height parameters can only take integer values, you will have to change the plug-in itself to accomodate your needs.

Hi thanks for reply ^_^,
well here someone actually gave me the part of scripts that should be changed within the plugin and then i changed them but due to the change the plugin stopped working, here see the answer two http://stackoverflow.com/questions/9852892/how-to-make-it-100-width-and-height-in-javascript

Now the question that comes to my mind is that either the one who gave me variables is having wrong written script or maybe i added it wrongly to the original script.

Here is the previous plugin http://files.cryoffalcon.com/woro/preroll.dev.js
and this is the one after i did changes to it http://files.cryoffalcon.com/Piecemaker/preroll.dev.js
I don't know if variables are ending properly or not as i have a very little knowledge of javascript, i am still in the learning stage

devnull69
03-26-2012, 07:23 AM
You changed the code for the iframe initialization, and it has an error you should have detected using basic debugging


}).css({
"height":'settings.height
"width": settings.width
});

There is a ' quote before settings.height that needs to be removed, and a comma that needs to be added after settings.height


}).css({
"height":settings.height,
"width": settings.width
});

cryoffalcon
03-26-2012, 03:50 PM
You changed the code for the iframe initialization, and it has an error you should have detected using basic debugging


}).css({
"height":'settings.height
"width": settings.width
});

There is a ' quote before settings.height that needs to be removed, and a comma that needs to be added after settings.height


}).css({
"height":settings.height,
"width": settings.width
});


Hi,
thanks for reply, well i corrected what you told me but still when i make the values as 100% the script stops working and nothing happens or loads. Have you tried at your side by making an html document out of it? if not try and you will see exactly what's going on.

devnull69
03-27-2012, 07:56 AM
still when i make the values as 100% the script stops working

Please show us the code for the changed .preloaded() call

cryoffalcon
03-27-2012, 04:31 PM
Please show us the code for the changed .preloaded() call

Well here is the link to the plugin with the changed values which you described http://files.cryoffalcon.com/Submit%20High%20Score/preroll.dev.js
You can use this file in the bunch of code that i added in my first post here and you will see that it doesn't work, if you add 100% to the width and height in the last part of script.
Just create an html document, you will be able to see at the spot ^_^

devnull69
03-28-2012, 07:21 AM
You don't get me. We need to know how exactly(!) you set the parameter to 100%, because I guess I know what is going on but I cannot know exactly without your code ... so just the new call of the .preloaded() method

cryoffalcon
03-28-2012, 01:03 PM
You don't get me. We need to know how exactly(!) you set the parameter to 100%, because I guess I know what is going on but I cannot know exactly without your code ... so just the new call of the .preloaded() method

Well now i got it, here is the complete code of what i do, so you can see where i made the things go 100% as compare to my first post
here is code


<!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/Submit%20High

%20Score/preroll.dev.js"></script>
<style>
.gamecontent {
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;
}
.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:100%;width:100%;">
<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','100%');
$('#'+gf).css('height','100%');
}
$('#gameframe').preloadad(
{ // calls the init method
swf : 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
width : 100%,
height : 100%,
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>

I hope this is what you were asking for ^_^

devnull69
03-28-2012, 03:19 PM
Yes, exactly. And it is like I expected :-)


$('#gameframe').preloadad(
{...
width : 100%,
height : 100%,
...

100% is illegal code in Javascript. You should have noticed the Syntax Error in the console. As soon as you append units of measure, the parameter will become a string and has to be written using quotes as string delimiters (like you did in the skipad() function)!


$('#gameframe').preloadad(
{...
width : '100%',
height : '100%',
...

cryoffalcon
03-29-2012, 09:15 AM
Yes, exactly. And it is like I expected :-)


$('#gameframe').preloadad(
{...
width : 100%,
height : 100%,
...

100% is illegal code in Javascript. You should have noticed the Syntax Error in the console. As soon as you append units of measure, the parameter will become a string and has to be written using quotes as string delimiters (like you did in the skipad() function)!


$('#gameframe').preloadad(
{...
width : '100%',
height : '100%',
...


Hi, thanks for correcting the error it worked but still i got one issue and that is that after the loading is done, the game doesn't appear at the back side, it stays as white background, i am going to paste the full code so you could make an html document out of it for checking or testing, thanks alot for your quick replies



<!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/Submit%20High%20Score/preroll.dev.js"></script>
<style>
.gamecontent {
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;
}
.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:100%;width:100%;">
<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','100%');
$('#'+gf).css('height','100%');
}
$('#gameframe').preloadad(
{ // calls the init method
swf : 'http://files.cryoffalcon.com/bhgames/sports/bikes/Bike%20Trial.swf',
width : '100%',
height : '100%',
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>

I am completely blank why is it not showing game after the loader disappears?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum