javascript - Fullscreen option -
i trying provide full screen option in web-page when user presses "space" , "enter" keys simultaneously. have following code. have following code. not working. going wrong? working if give single key.
<!doctype html> <html> <head> <title>full screen example</title> <style type="text/css"> :-webkit-full-screen #myimage { width: 100%; height: 100%; } </style> </head> <body> <p>press "space" , "enter" enter full screen</p> <p><strong>to use full-screen mode, need firefox 9 or later or chrome 15 or later.</strong></p> <img src = "./3.jpg" width="640" height="360" id="myimage"> </body> <script> var imageelement = document.getelementbyid("myimage"); function togglefullscreen() { if (!document.mozfullscreen && !document.webkitfullscreen) { if (imageelement.mozrequestfullscreen) { imageelement.mozrequestfullscreen(); } else { imageelement.webkitrequestfullscreen(element.allow_keyboard_input); } } else { if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } else { document.webkitcancelfullscreen(); } } } document.addeventlistener("keydown", function(e) { if ((e.keycode == 13) && (e.keycode == 32)) { togglefullscreen(); } }, false); </script>
remove current addeventlistener() call , augment script i've provided below. note won't work in ie8 (but considering you're using moz , webkit functions imagine aren't targeting anyway).
var keys = []; function keyisdown(keycode) { return (keys.indexof(keycode) > -1); } document.addeventlistener("keydown", function(e) { // remember key being pressed keys.push(e.keycode); // check if enter , space both being pressed if (keyisdown(13) && keyisdown(32)) { togglefullscreen(); } }, false); document.addeventlistener("keyup", function(e) { // remember key no longer being pressed var keyindex = keys.indexof(e.keycode); if (keyindex > -1) keys.splice(keyindex, 1); }, false); credit parjun basic idea; worked out without jquery.
Comments
Post a Comment