Tengo un elemento <div> que está oculto. Después de un evento de clic, el elemento se abre en pantalla completa.
Cuando un usuario hace clic en ESC para salir de la pantalla completa, me gustaría que <div> vuelva automáticamente a ocultarse en la vista normal.
El siguiente código permite que ESC oculte el <div> en la vista normal, pero se ignora cuando está en modo de pantalla completa. Esto significa que se necesitan 2 clics de ESC para ocultar el <div> . El primer clic sale de la pantalla completa según la funcionalidad normal del navegador y vuelve a la vista normal con <div> visible. Luego se requiere un segundo clic de ESC para activar el <div> para que se oculte
$(document).keyup(function(e) { if (e.keyCode === 27) { $('#Box').hide(); }})¿Es posible incorporar mi código en la respuesta inicial del navegador a la tecla ESC que se presiona para que el elemento nunca sea visible en la vista normal? ¿O hay otra solución?
Puede escuchar eventos de cambio de pantalla completa y luego ejecutar su código cuando ese evento se activa y es un cambio de pantalla completa -> normal.
Por ejemplo:
$(document).on('fullscreenchange', function(e) { if (document.fullscreenElement) { // Entered fullscreen } else { // Left fullscreen; run your code here $('#Box').hide(); } });Logré resolver mi propia pregunta extendiendo la solución de ps4star. Para permitir la compatibilidad entre navegadores, agregué variaciones de moz y webkit, pero posiblemente aún deba probar y modificar errores para cubrir tantos navegadores como sea posible.
function isFullScreen() { $('#Box').show(); } function notFullScreen() { $('#Box').hide(); } document.addEventListener("fullscreenchange", function () { if (document.fullscreen) { isFullScreen(); } else { notFullScreen(); } }, false); document.addEventListener("mozfullscreenchange", function () { if (document.mozFullScreen) { isFullScreen(); } else { notFullScreen(); } }, false); document.addEventListener("webkitfullscreenchange", function () { if (document.webkitIsFullScreen) { isFullScreen(); } else { notFullScreen(); } }, false);