javascript - fullscreen not working in firefox in extjs -
i working on full screen in chrome working in mozilla not working properly.pls it.when fullscreen icon changes n when come original screen again icon gets change not working in firefox extjs version 3.4, jquery 1.9
<script> /* native fullscreen javascript api ------------- assumes mozilla naming conventions instead of w3c */ (function() { var fullscreenapi = { supportsfullscreen: false, isfullscreen: function() { return false; }, requestfullscreen: function() {}, cancelfullscreen: function() {}, fullscreenenabled: function() {}, fullscreeneventname: '', prefix: '' }, browserprefixes = 'webkit moz o ms khtml'.split(' '); // check native support if (typeof document.cancelfullscreen != 'undefined') { fullscreenapi.supportsfullscreen = true; } else { // check fullscreen support vendor prefix (var = 0, il = browserprefixes.length; < il; i++ ) { fullscreenapi.prefix = browserprefixes[i]; if (typeof document[fullscreenapi.prefix + 'cancelfullscreen' ] != 'undefined' ) { fullscreenapi.supportsfullscreen = true; break; } } } // update methods useful if (fullscreenapi.supportsfullscreen) { fullscreenapi.fullscreeneventname = fullscreenapi.prefix + 'fullscreenchange'; fullscreenapi.isfullscreen = function() { switch (this.prefix) { case '': return document.fullscreen; case 'webkit': return document.webkitisfullscreen; case 'moz': return document.mozisfullscreen; default: return document[this.prefix + 'fullscreen']; } } fullscreenapi.requestfullscreen = function(el) { return (this.prefix === '') ? el.requestfullscreen() : el[this.prefix + 'requestfullscreen'](); } fullscreenapi.cancelfullscreen = function(el) { return (this.prefix === '') ? document.cancelfullscreen() : document[this.prefix + 'cancelfullscreen'](); } } // jquery plugin if (typeof jquery != 'undefined') { jquery.fn.requestfullscreen = function() { return this.each(function() { var el = jquery(this); if (fullscreenapi.supportsfullscreen) { fullscreenapi.requestfullscreen(el); } }); }; } if (typeof jquery != 'undefined') { jquery.fn.mozrequestfullscreen = function() { return this.each(function() { var el = jquery(this); if (fullscreenapi.supportsfullscreen) { fullscreenapi.requestfullscreen(el); } }); }; } if (typeof jquery != 'undefined') { jquery.fn.mozrequestfullscreen = function() { return this.each(function() { var el = jquery(this); if (fullscreenapi.supportsfullscreen) { fullscreenapi.mozrequestfullscreen(el); } }); }; } if (typeof jquery != 'undefined') { jquery.fn.mozcancelfullscreen = function() { return this.each(function() { var el = jquery(this); if (fullscreenapi.cancelfullscreen) { fullscreenapi.mozcancelfullscreen(el); } }); }; } // export api window.fullscreenapi = fullscreenapi; })(); var fsbutton = document.getelementbyid('fsbutton'); if (window.fullscreenapi.supportsfullscreen) { //fsstatus.innerhtml = 'yes: browser supports fullscreen'; //fsstatus.classname = 'fullscreensupported'; // handle button click fsbutton.addeventlistener('click', function() { console.log("browser supports fullscreen"); document.getelementbyid('exitscreen').style.display='block'; document.getelementbyid('fullscreen').style.display='none'; //window.fullscreenapi.requestfullscreen(fselement); window.fullscreenapi.requestfullscreen(document.documentelement); }, true); } else { console.log ("sorry: browser not support fullscreen"); } var cfullscreen = document.getelementbyid('cfullscreen'); if (window.fullscreenapi.supportsfullscreen) { //fsstatus.innerhtml = 'yes: browser supports fullscreen'; //fsstatus.classname = 'fullscreensupported'; // handle button click cfullscreen.addeventlistener('click', function() { //console.log("exit fullscreen"); document.getelementbyid('exitscreen').style.display='none'; document.getelementbyid('fullscreen').style.display='block'; //window.fullscreenapi.requestfullscreen(fselement); window.fullscreenapi.cancelfullscreen(document.documentelement); }, true); document.documentelement.addeventlistener(fullscreenapi.fullscreeneventname, function() { if (fullscreenapi.isfullscreen()) { document.getelementbyid('exitscreen').style.display='block'; document.getelementbyid('fullscreen').style.display='none'; console.log("whoa, went fullscreen"); } else { console.log("back normal"); document.getelementbyid('fullscreen').style.display='block'; document.getelementbyid('exitscreen').style.display='none'; } }, true); } else { console.log ("sorry: browser not support fullscreen"); }
code of html
<div id="exitscreen" style="display:none;"><a href="#"> <img src="https://cdn1.iconfinder.com/data/icons/icon_for_mealkeeper__s_soft_by_shlyapnikova/full%20screen_16.png" id="cfullscreen"/></a></div>
Comments
Post a Comment