Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post

    How to make it 100% height and width in javascript

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

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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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".

  • #3
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    @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

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    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/9...-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

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You changed the code for the iframe initialization, and it has an error you should have detected using basic debugging
    Code:
      }).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
    Code:
      }).css({
        "height":settings.height,
        "width": settings.width
      });

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    You changed the code for the iframe initialization, and it has an error you should have detected using basic debugging
    Code:
      }).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
    Code:
      }).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.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    still when i make the values as 100% the script stops working
    Please show us the code for the changed .preloaded() call

  • #11
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    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%...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 ^_^

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    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
    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 ^_^

  • #14
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Yes, exactly. And it is like I expected :-)
    Code:
    $('#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)!
    Code:
    $('#gameframe').preloadad(
    	{...
    	  width  	: '100%',
    	  height 	: '100%',
              ...

  • #15
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by devnull69 View Post
    Yes, exactly. And it is like I expected :-)
    Code:
    $('#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)!
    Code:
    $('#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

    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://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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •