JavaScript

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
      ele.requestFullscreen()
    else
      ele.msRequestFullscreen?()
      ele.mozRequestFullScreen?()
      # 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
      ele.webkitRequestFullscreen?(Element.ALLOW_KEYBOARD_INPUT)
  else
    # some element is already full-screened
    if document.exitFullscreen
      document.exitFullscreen()
    else
      document.msExitFullscreen?()
      document.mozCancelFullScreen?()
      document.webkitExitFullscreen?()

# jquery plugin
$::toggleFullScreen = ->
  toggleFullScreen($(this)[0])

# usage
$('.some-element').toggleFullScreen()

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,

:-webkit-full-screen{
  width: 100%;
  height: 100%;
}

Further read:

  • https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
Standard