Make fullscreen API code work cross browser

Question

On my page I have following code, which I use for making some object a full screen one

<script>
$(document).ready(function(){
    $('.fs-button').on('click', function(){
        var elem = document.getElementById('fullscreen');
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
        } else {
            elem.webkitRequestFullScreen();
        };
    });
});
</script>

Problem is its working only in Chrome. Can you please give me cross browser version of this code? Cannot do this by myself because of poor JS knowledge.

Answer 1

You can use this. Reference : https://msdn.microsoft.com/en-us/library/dn265028(v=vs.85).aspx

    // Initiated by a user click on an element 

    function makeFullScreen(divObj) {
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }

---

once after writing that function, you just need to call inside click event handler as..

$(document).ready(function(){
    $('.fs-button').on('click', function(){
      var elem = document.getElementById('fullscreen');
        //call that function to make it fullscreen.
        makeFullScreen( elem );
    });
});