How can I size a .swf to full screen with .js

My application is built in Flash Builder. I want to embed a small Flash login form inside an HTML page. The login form is in the 'login' state of code and is a few hundred pizxels wide/ tall. The 'default' state is set to height and width of 100%. I have a resize function that is executed once the login receives the appropriate credentials.

private function resizeApplication():void {
            if(ExternalInterface.available) {
                ExternalInterface.call("resizeApplication");
            } 

The javascript that does the resizing is this:

function resizeApplication() {
  var app = document.getElementById('app');
  app.style.height = '100%';
  app.style.width = '100%';
  app.style.left = '0';
  app.style.top = '0';}

#app is the div and overflow is set to auto in the body. This works just fine开发者_C百科 except that I am left with some visable portion of the webpage near the bottom. I want to be able to either resize the webpage to match the swf or hide everything except the swf. I have tried a few different things with the js including setting the bottom attribute to 0 and using variations of the document.body.clientHeight.

You can't make it "Full Screen" but you can make it fill the browser. First the app element should have the position style pre-set to either fixed or absolute(depending on your page) since setting it from the script will reload the flash object.

And then use this one if the position is fixed:

app.style.top = '0';
app.style.left = '0px';
app.style.top = '0px';
app.style.right = '0px';
app.style.bottom = '0px';

And this for absolute find out the position of the viewport and it's size and just move and resize your app element.

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Either way wouldn't it be a lot easier for you if you just made the flash fullscreen from ActipnScript?

fscommand("fullscreen", "true"); // ActionScript 2
stage.displayState = StageDisplayState.FULL_SCREEN; // ActionScript 3

You have to set the height of the div manually to consistently get the effect you are looking for. This is the same trick used to make a background image always fill the screen.

Something like this:

function resizeMain(){
$("#wrapper").height(window.innerHeight);
$("#background").height(window.innerHeight);
$("#background").width(window.innerWidth);
}
window.onresize = resizeMain;
$(document).ready(function(){resizeMain();});

Why not simply enter real full screen mode using

StageDisplayState.FULL_SCREEN