Computing Staff
  • 0

Adapting Chrome Fullscreen API To Onload & Link

  • 0

Hi, collaborators !!

I found this Fullscreen API script for opening Google Chrome fullscreen :

function () {
var viewFullScreen = document.getElementById(“view-fullscreen”);
if (viewFullScreen) {
viewFullScreen.addEventListener(“click”, function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}

var cancelFullScreen = document.getElementById(“cancel-fullscreen”);
if (cancelFullScreen) {
cancelFullScreen.addEventListener(“click”, function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}

var fullscreenState = document.getElementById(“fullscreen-state”);
if (fullscreenState) {
document.addEventListener(“fullscreenchange”, function () {
fullscreenState.innerHTML = (document.fullscreen)? “” : “not “;
}, false);

document.addEventListener(“mozfullscreenchange”, function () {
fullscreenState.innerHTML = (document.mozFullScreen)? “” : “not “;
}, false);

document.addEventListener(“webkitfullscreenchange”, function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? “” : “not “;
}, false);
}

var marioVideo = document.getElementById(“mario-video”)
videoFullscreen = document.getElementById(“video-fullscreen”);

if (marioVideo && videoFullscreen) {
videoFullscreen.addEventListener(“click”, function (evt) {
if (marioVideo.requestFullscreen) {
marioVideo.requestFullscreen();
}
else if (marioVideo.mozRequestFullScreen) {
marioVideo.mozRequestFullScreen();
}
else if (marioVideo.webkitRequestFullScreen) {
marioVideo.webkitRequestFullScreen();
/*
*Kept here for reference: keyboard support in full screen
* marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
*/
}
}, false);
}
})();

The script works ( see http://robnyman.github.com/fullscreen/ and try it with Chrome ); however, my question is, how could I set up the script to open….

1. on body onload,
2. activating it from a link

Once again, let me express my thanks for your collaboration to this newbie !!

Share

1 Answer

  1. In both cases, you should probably remove the nested anonymous function from the anonymous function that assigns an event handler. I’m not sure why the author did it that way, but I don’t really do any web programming, so I’m not aware of the pitfalls.

    function goFull() {
      var docElm = document.documentElement;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
    }
    
    function goHome() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      }
      else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }

    How To Ask Questions The Smart Way

    • 0