¿Cómo hago un div a pantalla completa?
Estoy usando Flot para graficar algunos de mis datos y estaba pensando que sería genial hacer que este gráfico aparezca a pantalla completa (ocupar todo el espacio en el monitor) al hacer clic en un botón. Actualmente, mi div
es el siguiente:
<div id="placeholder" style="width:800px;height:600px"></div>
Por supuesto, el atributo style es solo para probar. Moveré esto a CSS
después durante el diseño real. ¿Hay de todos modos podría hacer este div a pantalla completa y aún preservar todo el manejo de eventos?
9 answers
Cuando dices "pantalla completa", ¿quieres decir como pantalla completa para el ordenador, o para ocupar todo el espacio en el navegador?
No puedes forzar al usuario a una pantalla completa F11
; sin embargo, puedes hacer tu div a pantalla completa usando el siguiente CSS
div {width: 100%; height: 100%;}
Esto por supuesto asumirá que su div es hijo de la etiqueta <body>
. De lo contrario, deberá agregar lo siguiente además del código anterior.
div {position: absolute; top: 0; left: 0;}
Puede usar la API de pantalla completa HTML5 para esto (que es la forma más adecuada que creo).
La pantalla completa debe activarse a través de un evento de usuario (clic, tecla), de lo contrario no funcionará.
Aquí hay un botón que hace que la pantalla completa div al hacer clic. Y en el modo de pantalla completa, el botón clic saldrá del modo de pantalla completa.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
element = $('#container').get(0);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});
#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
</p>
I will be fullscreen, yay!
</div>
También tenga en cuenta que la API de pantalla completa para Chrome no funciona en páginas no seguras. Ver https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins para más detalles.
Otra cosa a tener en cuenta es el selector CSS :fullscreen. Puede agregar esto a cualquier selector css para que las reglas se apliquen cuando ese elemento esté a pantalla completa:
#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
width: 100vw;
height: 100vh;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-05 16:19:05
CSS way:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 14:06:08
Para la pantalla completa del área de representación del navegador hay una solución simple soportada por todos los navegadores modernos.
div#placeholder {
height: 100vh;
}
La única excepción notable es el Android por debajo de 4.3 - pero ofc solo en el navegador del sistema/elemento webview (Chrome funciona bien).
Tabla de soporte del navegador: http://caniuse.com/viewport-units
Para pantalla completa del monitor por favor utilice HTML5 Fullscreen API
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 14:03:06
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-08 10:58:25
Puedes probar esto..
<div id="placeholder" style="width:auto;height:auto"></div>
El ancho y la altura dependen de su flotador o gráfico..
Espero que quieras esto...
O
Haciendo clic, u puede usar esto por jquery
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-20 08:19:32
Use altura del documento si desea mostrarlo más allá del área visible del navegador(área desplazable).
Porción CSS
#foo {
position:absolute;
top:0;
left:0;
}
Porción de jQuery
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 14:03:47
Este es el más simple.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 14:04:30
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-11 13:08:31