Responding to a switch to full-screen mode (AKA "theater mode") in the browser, with Javascript

On most browsers hitting F11 switches the browser into a mode where there are no toolbars and menus. I'd like to make adjustments to my page layout when the user goes into that mode (specifically - there's a DIV that should cover the entire client area - If the user F11s - then the extra space added to the bottom is uncovered by the big div).

I t开发者_如何转开发ried using onkeydown event and responding to the F11 keycode (122) - but it triggers BEFORE the mode switches (after the key is pressed) - wherein the clientHeight of the documentElement is still as it was before.

I also tried responding to document.onresize and document.documentElement.onresize both of which doesn't seem to trigger when going F11.

Any ideas?

window.onresize seems to work on both FF3 and IE8...

Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. Note that these events/pseudo-classes do not appear to apply when the user hits F11 however.

See this hacks.mozilla.org blog post for details.