{"id":556,"date":"2014-06-13T20:28:42","date_gmt":"2014-06-13T20:28:42","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=556"},"modified":"2014-06-13T23:39:35","modified_gmt":"2014-06-13T23:39:35","slug":"chromium-full-screen-javascript-control-lose-after-f11-pressed","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=556","title":{"rendered":"chromium &#8211; full screen javascript control lose after F11 pressed"},"content":{"rendered":"<p>During my work I&#8217;ve came across a strange issue in chrome (the situation is the same strange in other browsers&#8230;). Here is the <a href=\"https:\/\/code.google.com\/p\/chromium\/issues\/detail?id=350077\" title=\"issue ticket\" target=\"_blank\">ticket<\/a> for the chromium team.<\/p>\n<p>The story is: I try to use the full screen from javascript code. It&#8217;s working but we need to say this is like marshland in every browser.<\/p>\n<p>to activate the full screen mode (without full screen support check!)<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  function goToFullScreen(){\r\n    var el = document.documentElement,\r\n        fsfn = el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;\r\n    fsfn ? fsfn.call(el) : null;\r\n  };\r\n  function exitFullScreen(){\r\n    document.webkitCancelFullScreen ? document.webkitCancelFullScreen() : null;\r\n    document.mozCancelFullScreen ? document.mozCancelFullScreen() : null;\r\n    document.msExitFullscreen ? document.msExitFullscreen() : null;\r\n  };\r\n<\/pre>\n<p>This code working in the following browsers: chrome, firefox, ie, opera<br \/>\ntry it yourself <a href='javascript:void(0);' class=\"fsclick\">enter full screen<\/a> | <a href='javascript:void(0);' class=\"fsexclick\">exit full screen<\/a>.<\/p>\n<p>Just click the links it&#8217;s working nicelly (pure javascript), but push the F11 button and it will hit everything&#8230; the javascript control seemingly working but in the reality is not the same. It&#8217;s peter-out.<\/p>\n<p><strong class=\"red\">Chrome 35.0.1916.153<\/strong><br \/>\nAll the links functioning until F11 appears!<\/p>\n<p><strong class=\"red\">Opera 22.0<\/strong><br \/>\nAll the links functioning until F11 appears!<\/p>\n<p><strong class=\"red\">Internet Explorer 9<\/strong><br \/>\nAbsolutely nothing!<\/p>\n<p><strong class=\"red\">Internet Explorer 11<\/strong><br \/>\nAll the links functioning until F11 appears! But extra strange thing: the full screen mode is without scroll bars!<\/p>\n<p><strong class=\"red\">FireFox 30.0<\/strong><br \/>\nAlmost good.<br \/>\n1. try the links: <a href='javascript:void(0);' class=\"fsclick\">enter full screen<\/a> | <a href='javascript:void(0);' class=\"fsexclick\">exit full screen<\/a> &#8211; it&#8217;s working<br \/>\n2. press F11 to go fullscreen mode again<br \/>\n&nbsp;&nbsp;&nbsp;a. click the link <a href='javascript:void(0);' class=\"fsexclick\">exit full screen<\/a> &#8211; nothing<br \/>\n&nbsp;&nbsp;&nbsp;b. click the link <a href='javascript:void(0);' class=\"fsclick\">enter full screen<\/a> and after <a href='javascript:void(0);' class=\"fsexclick\">exit full screen<\/a> &#8211; working!<\/p>\n<p><script>\n(function($){\n  function goToFullScreen(){\n    var el = document.documentElement,\n        fsfn = el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;\n    fsfn ? fsfn.call(el) : null;\n  };\n  function exitFullScreen(){\n    document.webkitCancelFullScreen ? document.webkitCancelFullScreen() : null;\n    document.mozCancelFullScreen ? document.mozCancelFullScreen() : null;\n    document.msExitFullscreen ? document.msExitFullscreen() : null;\n  };\n  $(document).ready(function(){\n    $('.fsclick').click(function(){\n      goToFullScreen();\n      return false;\n    });\n    $('.fsexclick').click(function(){\n      exitFullScreen();\n      return false;\n    });\n  });\n})(jQuery);\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>During my work I&#8217;ve came across a strange issue in chrome (the situation is the same strange in other browsers&#8230;). Here is the ticket for the chromium team. The story is: I try to use the full screen from javascript code. It&#8217;s working but we need to say this is like marshland in every browser. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-556","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=556"}],"version-history":[{"count":29,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/556\/revisions"}],"predecessor-version":[{"id":594,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/556\/revisions\/594"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}