Mi problema es el siguiente: Lo que he logrado hacer con Jquery es que cuando hago clic en un icono cuyo ID es Icon-FullScreen, la web se pone en modo Full Screen y desaparezco algunos divs que no necesito en ese modo, osea todo Ok hasta aquí. Haciendo clic nuevamente ese mismo icono con ID: Icon-FullScreen, la web vuelve al modo normal y los divs se acomodan es decir todo vuelve a su lugar, también todo ok hasta aquí.
El verdadero problema es cuando presion la tecla "ESC" en lugar de hacer clic sobre el Icono con ID: Icon-FullScreen. Cuando presiono la tecla "ESC" la web efectivamente sale del modo full screen pero los divs no se acomodan es decir conserva la estructura que le di a la web para el modo full screen.
Mi código Jquery es el siguiente:
/*FUNCION PARA FULL SCREEN Y ACOMODAR LOS DIVS QUE QUIERO QUE APAREZCAN Y EN LA FORMA QUE QUIERO*/
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
$(".form-login").css("display","none");
$(".contenedor").css("justify-content","center");
$(".logo > p:nth-child(2)").css("text-align","center");
$("#col-1").css({
"position":"absolute",
"left":"0px",
"width":"250px",
"display":"none",
"z-index":"5"
});
$(".icon-menu-responsive").css({
"display":"block",
"z-index":"4"
});
$(".base-modal").css("z-index","2");
$("#col-2").css("width","80%");
$("html").css("font-size","17px");
}
/*FUNCION PARA CANCELAR EL MODO FULLSCREEN Y VOLVER AL MODO NORMAL ACOMODANDO LOS DIVS EN LUGAR NORMAL QUE ESTABAN (SOLO FUNCIONA SI HAGO CLIC EN EL #ICON-FULLSCREEN NO FUNCIONA SI PRESIONO LA TECLA "Esc"*/
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
$("html").css("font-size","13px");
$(".form-login").css("display","flex");
$(".contenedor").css("justify-content","space-between");
$(".logo > p:nth-child(2)").css("text-align","right");
$("#col-1").css({
"position":"relative",
"width":"25%",
"display":"flex"
});
$(".icon-menu-responsive").css("display","none");
$(".base-modal").css("z-index","1000");
$("#col-2").css("width","70%");
}
/*FUNCION PARA SABER SI EL DOCUMENT ESTA FULL SCREEN.
function estarFullScreen(){
if (document.fullscreenElement)
return document.fullscreenElement;
if (document.webkitFullscreenElement)
return document.webkitFullscreenElement;
if (document.mozFullScreenElement)
return document.mozFullScreenElement;
if (document.msFullscreenElement)
return document.msFullscreenElement;
return null;
}
/*CON ESTO CONTROLO LOS CLICS EN EL ICON-FULLSCREEN.
$("#icon-fullscreen").click(function(){
if(estarFullScreen()){
cancelFullscreen();
}
else{
launchFullScreen(document.documentElement); // la página entera
}
});
CUANDO PRESIONO LA TECLA ESC, LA WEB SALE DEL MODO FULL SCREEN PERO LA ESTRUCTURA NO VUELVE A LA NORMALIDAD SI NO QUE SE QUEDA CON LA ESTRUCTURA QUE LE DI PARA EL MODO FULLSCREEN.
ALGUNA IDEA,AYUDA, ALGUIEN QUE HAYA TENIDO ESTE PROBLEMA Y LO HAYA PODIDO SOLUCIONAR.
Muchas gracias....
