Javascript fullscreen api and window height

Question

I am trying to get $(window).height() after fullscreen api fires up. All other supported browser works just fine but Chrome getting window height wrong (sometimes). Its like it missing the fact that the window size has changed. My code is below:

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

.

launchFullscreen(element);
var windowHeight = $(window).height();

Any idea what am I missing?

Could the `launchFullscreen` function be running asynchronously, and so the height is being calculated before fullscreen is enabled? — Scimonster, May 07 '14 at 11:27
I know you're right. But webkitRequestFullscreen don't have callback function. So how can I resolve it? — Md Nazmoon Noor, May 07 '14 at 11:43

score 1 · Accepted Answer · answered May 07 '14 at 12:46

1

I found out what I was missing here. fullscreen api has a change event.

document.addEventListener("fullscreenchange", function () {
    //do something
}, false);

document.addEventListener("mozfullscreenchange", function () {
    //do something
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    //do something
}, false);

document.addEventListener("msfullscreenchange", function () {
   //do something
}, false);

answered May 07 '14 at 12:46

Md Nazmoon Noor

3,187
1
24
30

may be interesting : http://stackoverflow.com/questions/9454125/javascript-request-fullscreen-is-unreliable – GameAlchemist May 07 '14 at 12:54
Thank you for posting this. – Kohjah Breese Sep 10 '14 at 19:48
it does not help me in chrome , it produces wrong height even in onchange listeners – Oleg May 05 '15 at 19:26

score 0 · Answer 2 · edited May 24 '17 at 03:17

0

In Chrome:

document.addEventListener("fullscreenchange", function () {
    setTimeout(function () {
        //do something
    }, 50);
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    setTimeout(function () {
        //do something
    }, 50);
}, false);

edited May 24 '17 at 03:17

Pang

9,564
146
81
122

answered May 24 '17 at 02:49

xuanhun

46
3

Javascript fullscreen api and window height

2 Answers2