http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
My name pritom
jQuery code
$(document).ready(function () { var fullScreenCheck = $("div#main-body").checkFullScreen(); if (fullScreenCheck.enter && fullScreenCheck.exit && fullScreenCheck.fullscreen && fullScreenCheck.change && fullScreenCheck.error) { $(document).bind(fullScreenCheck.change, fullScreenChangeHandler); $(document).bind(fullScreenCheck.error, fullScreenErrorHandler); $(".fsmode").html("Full screen would work..."); $("div#main-body .fullscreen").click(function () { if(document[fullScreenCheck.fullscreen]) { console.log("Going to normal screen..."); document[fullScreenCheck.exit](); } else { console.log("Going to full screen..."); $("div#main-body")[0][fullScreenCheck.enter](); } }) $("div#main-body").click(function () { $(document).trigger("fullscreenchange"); }) $(document).bind("fullscreenchange", function() { if (document[fullScreenCheck.fullscreen]) { $(".fsmode").html("Window is now full screen..."); } else { $(".fsmode").html("Window is now normal screen..."); } }); } else { $(".fsmode").html("Full screen would not work..."); $("div#main-body .fullscreen").remove(); } function fullScreenChangeHandler(event) { $(document).trigger(new $.Event("fullscreenchange")); } function fullScreenErrorHandler(event) { console.log(event.originalEvent); } }) jQuery.fn.checkFullScreen = function () { var enter, exit, fullscreen // support for entering fullscreen var dom = document.createElement('div'); if ('requestFullscreen' in dom) { enter = 'requestFullscreen' // W3C proposal } else if ('requestFullScreen' in dom) { enter = 'requestFullScreen' // mozilla proposal } else if ('webkitRequestFullScreen' in dom) { enter = 'webkitRequestFullScreen' // webkit } else if ('mozRequestFullScreen' in dom) { enter = 'mozRequestFullScreen' // firefox } else if ('msRequestFullscreen' in dom) { enter = 'msRequestFullscreen' // ms } else { enter = null // not supported in this browser } // support for exiting fullscreen if ('exitFullscreen' in document) { exit = 'exitFullscreen' // W3C proposal } else if ('cancelFullScreen' in document) { exit = 'cancelFullScreen' // mozilla proposal } else if ('webkitCancelFullScreen' in document) { exit = 'webkitCancelFullScreen' // webkit } else if ('mozCancelFullScreen' in document) { exit = 'mozCancelFullScreen' // firefox } else if ('msExitFullscreen' in document) { exit = 'msExitFullscreen' // ms } else { exit = null // not supported in this browser } // support for detecting when in fullscreen if ('fullscreen' in document) { fullscreen = 'fullscreen' // W3C proposal } else if ('fullScreen' in document) { fullscreen = 'fullScreen' // mozilla proposal } else if ('webkitIsFullScreen' in document) { fullscreen = 'webkitIsFullScreen' // webkit } else if ('mozFullScreen' in document) { fullscreen = 'mozFullScreen' // firefox } else if ('msFullscreenElement' in document) { fullscreen = 'msFullscreenElement' // ms } else { fullscreen = null // not supported in this browser } if (document["webkitCancelFullScreen"]) { change = "webkitfullscreenchange"; error = "webkitfullscreenerror"; } else if (document["msExitFullscreen"]) { change = "MSFullscreenChange"; error = "MSFullscreenError"; } else if (document["mozCancelFullScreen"]) { change = "mozfullscreenchange"; error = "mozfullscreenerror"; } else { change = "fullscreenchange"; error = "fullscreenerror"; } return { enter: enter, exit: exit, fullscreen: fullscreen, change: change, error: error } };
No comments:
Post a Comment