Friday, August 27, 2010

Detecting browser height

Here is an example of one way to find out the height of the browser window from inside Flex. It is very easy to find this out if your have your Flex application set to height="100%". But if you use a fixed height like height="300" then stage.stageHeight and app.height both return 300.

This example uses the ExternalInterface to determine the height of the browser by calling the eval javascript function (it is a built-in function).

E.g.
var browserHeight:Number = ExternalInterface.call("eval", "window.innerHeight");

Different browsers (NS, FF, Chrome, IE, Safari) obviously don't all support this call. So far the window.innerHeight property works on all of them except IE. For IE you can use this one (IE 7 and above I think?):
var browserHeight:Number = ExternalInterface.call("eval", "document.documentElement.clientHeight");

And if your browser is older you can try this one:
var browserHeight:Number = ExternalInterface.call("eval", "document.getElementsByTagName('body')[0].clientHeight");

Browsers will also handle errors differently, so if you try to use one of those JavaScript functions in one browser you might get undefined return, and in another browser you might get an error dialog box.

Here is an example of this in action, it opens in a new browser window to show it properly.
If it was embedded on this page using an <iframe> tag then the size returned is that of the iframe, not the browser.

- Browser Height Example -
Click this image to open the real application


Obviously if you were interested in the browser width then you could do exactly the same thing but replace innerHeight with innerWidth and clientHeight with clientWidth.

Comments welcome.

7 comments:

Daniel said...

Hey thanx for this help.. I've been looking for this.. now can you help me out by either showing your coding for the example u have or explaining how u make the values change while u increase or decrease the browser size.. i tried it but no luck

Chris Callendar said...

Hi Daniel,

Did you see the example here?
http://keg.cs.uvic.ca/flexdevtips/flex4/browserheight/BrowserHeight.html

If you right click on the example you can View Source and see what I did.

Chris

Daniel said...

thanks alot... u're of big help.. as u've might noticed I'm kind of new to fb 4.. now im having a bit of a problem and maybe u can help me... I have a shared hosting acct and i had problem with gettin the zend frameworks working... i finally got it to work.. now when i used data grids or forms in flex, here at home works fine but in the hosting it shows up with a blank error.. maybe u know how to fix that.. help or give me some hints.. thanx

Chris Callendar said...

Hi Daniel,

If it works when you run it locally, but it doesn't work when you run it from a remote server, my best guess is that you didn't upload all the required files.

All Flex 3 Projects require these files:
- YourApp.html and YourApp.swf
- AC_OETags.js
-playerProductInstall.swf
- history/history.css, history.js, historyFrame.html

All Flex 4 require these files:
- YourApp.html and YourApp.swf
- framework_4.x.x.x.swf
- osmf_flex_4.x.x.x.swf
- playerProductInstall.swf
- rpc_4.x.x.x.swf
- spark_4.x.x.x.swf
- sparkskins_4.x.x.x.swf
- swfobject.js
- textLayout_1.x.x.x.swf
-history/history.css, history.js, historyFrame.html

Where the x.x.x will be the appropriate version number.

Usually when you want to put your Flex project up on a remote server, inside Flex you choose Project > Export Release Build from the main menu. This will create a release version of your application under the bin-release folder. Then upload ALL the files inside that bin-release folder onto your remote server. When you do this subsequent times, you only need to upload your html and swf files, the other framework files stay the same.

Also note that when you do a release build, the framework swfs become .swz files.

Hope this helps.
Chris

Daniel said...

Thanx for the quick response.. well I have all those files, plus additional ones such as amf_config.ini and gateway.php.. and everything works correctly.. before when i didnt have the zend fw installed i recieved some error messages, now im gettin the same error box message but no error in it, its just blank.. and no data is shown.. wat else could it be?

Chris Callendar said...

Hmm, I'm really not sure. If you're communicating with a server (e.g. using amfphp) then you might try using a tool like Firefox's Firebug plugin. There is also the FlashBug plug-in which has some nice features too.

I find it very useful to be able to see what is being sent from Flex to the Server, and what is sent back.

There might also be a security issue, as some things are allowed on your local machine, but not in the real environment.
Chris

Daniel said...

Thanx, I installed this FlashBug and another one to see.. but I'm not sure wat to look for.. the only thing i see different in the amf response is the targetURL, the one in the hosting is onStatus, and the one in my PC is onResult and besides Im getting the the data I needed.. wat else can i do