Question

I looked around internet and was always looking like from previous 6 months for a script that could load flash content/game while showing an actual loading screen But I always received a few answers:

1. It is not possible to show an actual loading with Javascript.
2. You can do it only by adding action script to the flash file maybe they are talking about FLA
3. Why Don’t you show a fake loading screen that appears and show some
   seconds and then disappears (the most annoying this of such screen
   is that they first make user load 15 seconds then the flash starts
   loading, if it starts loading those 15 seconds still it is worth
   something it is good BUT making them wait double is really bad)

But at last I found something that I was looking forever. A Jquery based script that shows actual loading (shows ad too) and uses swf Object to talk to flash content too. It is really awesome as it doesn’t require you to do changes to the FLA, it is just pure outer environment dealing. So now the question arises what’s the issue then. Well the issue is that this script was made for pixels, it works if you are using width and height for flash in pixels, while I can’t use pixels as I am using %ages (this way user have ability to go full screen optionally by pressing f11).

So as you can see I want that script to work with %ages that is my problem, but as I mentioned earlier I didn’t came here right away I have been asking for help (Actually Begging) in over 14 forums from previous few months and of course some good people still exists some people helped me to reach a certain point (but it didn’t solve the problem) So now I will provide some Markup:

Here is link to the script that I am talking about http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html (It is the link to the creator of this script)

Here is a link to working example (flash based on Pixels) http://www.balloontowerdefense.net/jquery-preloader/example.html

Some one helped me here but it didn’t work 1 month ago. The person told me that I should change the plugin Named as Preroll the changes preferred were these

Modify the plugin to use user-supplied units instead of pixels. To do this, you will need to modify two functions in the plugin, applygameiframe and showgame.

applygameiframe should be changed to:

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 should be changed to:

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

Once those changes are made, the inline CSS should be set to whatever you supply as parameters (i.e., 100%, 50em, etc.).

I did the changes told to be done as described above to the Preroll plugin and after that this is what I get http://files.cryoffalcon.com/MyFootPrint/fullscreen.html

Now if you let the game load (as loading screen appears) all is well done except that in the end, the game doesn’t appear, it loads but when it should skip and make the game appear at that time something goes wrong. (For reference you can see this link http://www.balloontowerdefense.net/jquery-preloader/example.html here when the loading finishes then game appears)

Can Someone Fix this problem?

Note: Sorry for not providing JsFiddle but as I live in Afghanistan with 5KBps speed it is not possible for me.

I didn’t provided the HTML, CSS and JS that makes up the whole demo page as I thought it will make the question very long but still if you think I should provide Please let me know in comments.

I tried my best to make the question more relevant with Relevant Markups BUT still If I am missing something I would try my best by editing it and providing it you again.

Being an accountant, I tried my best to use programmers terms, coding is my passion but I am still in learning stage of JS

UPDATE: After solving the problem here you can see now everything is fine. http://files.cryoffalcon.com/MyFootPrint/newfullscreen.html
Credit: Goes to the one who answered this question.

Answer 1

This seems to be just a pure css problem. You’re trying to set the width to 100% while the parent of div.gamewrapper has no width or height. That’s why the size is 0 and it will not show up.

The trick you need to apply is add the following to your style:

html, body, .gamecontent {
    height: 100%;
    width: 100%;
}

Update:
Also, remove float: left; from .gamecontent .game, and add a width and height of 1px such that it becomes:

.gamecontent .game {
    margin:0px auto 0px auto;
    padding:0px;
    overflow:hidden;
    width : 1px;
    height : 1px;
}