FullScreen with jQuery


The thing is, for security reasons, fullscreen could only be triggered by mouse and keyboard events. Trying it out in console alone would be vain.

toggleFullScreen = (ele) ->
  if !document.fullScreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement
    # doesn't have full screen element yet
    if document.documentElement.requestFullscreen
      # important: it's Fullscreen, not FullScreen for webkit! Though the two both exist in Chrome and Safari, only the low-case one works for safari
    # some element is already full-screened
    if document.exitFullscreen

# jquery plugin
$::toggleFullScreen = ->

# usage

And, don’t forget that the webkits don’t automatically full size the full-screen element. Instead, it hangs the element right in the middle of the screen. Therefore,

  width: 100%;
  height: 100%;

Further read: