Setting the whole window to be fullscreen in recent browsers

Question

I wanted to allow users to click a link to make my webpage entirely full screen, using the RequestFullScreen function that browsers are deploying. You can see the page here. As suggested here, I'm calling requestFullScreen method of document.documentElement. The code looks like this:

var el = document.documentElement
    , rfs = el.requestFullScreen
         || el.webkitRequestFullScreen
         || el.mozRequestFullScreen
         || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
}

The thing is, I get really strange artifacts doing this, in my case the background is mostly black (you can see if you click the link). Am I doing something wrong? Manually setting fullscreen in the browser works just fine in all the browsers I've tested, which made me think maybe documentElement is somehow not inclusive enough.

In other words:

it seems like document.documentElement.mozRequestFullScreen doesn't do the same thing as the user manually setting fullscreen. What's the difference? Why is this difference causing problems?

Answer 1

Got this done with this function.

// Launch full screen
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();
  }
}

Full article

Answer 2

I've checked the site and confused, code seems fine but you may try this http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/