jQuery: fullScreen [plugin]

more at: http://jsdo.it/okomeworld/81jo

by Marc Chehab

HTML

<div id="caution">
  <p>Your browser doesn't support fullscreen-API!</p>
</div>
<div id="one" class="contents">
  One
</div>
<div id="two" class="contents">
  Two
</div>
<button id="fullscreen">body-fullscreen</button>
<button href="#" id="two_fullscreen">element-fullscreen</button>

CSS

body {
  background-color: white;
}

div#caution {
  display: none;
}

div.contents {
  font-size: 26px;
  width: 260px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  color: white;
  background-color: lightgray;
  margin: 20px;
}

JavaScript

(function($) {
  $.fn.fullscreen = function() {
    var goFullscreen, isFullscreen, exitFullscreen;
    if ((new Image)['requestFullScreen']) {
      goFullscreen = 'requestFullScreen';
      exitFullscreen = 'exitFullscreen';
      isFullscreen = 'fullscreenElement';
    } else {
      var prefixes = ['webkit', 'moz', 'ms'];
      for (var i = 0; i < prefixes.length; i++) {
        var test = prefixes[i] + 'RequestFullScreen';
        if ((new Image)[test]) {
          goFullscreen = prefixes[i] + 'RequestFullScreen';
          exitFullscreen = prefixes[i] + 'ExitFullscreen';
          isFullscreen = prefixes[i] + 'FullscreenElement';
        }
      }
    }
    if (document[isFullscreen]) {
      document[exitFullscreen]();
    } else {
      console.log("check3");
      this[0][goFullscreen]();
    }
  };
})(jQuery);

$(function() {
  $('#fullscreen').click(function(e) {
    $('body').fullscreen();
    e.preventDefault();
  });
  $('#two').click(function(e) {
    $('#two').fullscreen();
    e.preventDefault();
  });
});