Estoy usando Flot la gráfica de algunos de mis datos y yo estaba pensando que sería genial hacer este gráfico aparecen a pantalla completa (ocupar un espacio lleno en el monitor) al hacer clic en un botón. Actualmente, mi div es como sigue:

<div id="placeholder" style="width:800px;height:600px"></div>

De curso, el atributo de estilo es sólo para pruebas. Voy a mover este a CSS después de que durante el diseño real. Existe de todos modos yo podría hacer de este div pantalla completa y conservar el control de eventos?

InformationsquelleAutor Legend | 2011-08-20

9 Comentarios

  1. 71

    Cuando usted dice «pantalla completa», ¿te refieres a como la pantalla completa para el equipo, o para tomar todo el espacio en el navegador?

    Usted no puede obligar al usuario a pantalla completa F11; sin embargo, usted puede hacer su div pantalla completa mediante el siguiente CSS

    div {width: 100%; height: 100%;}

    Por supuesto, esto supone que su div es hijo de la <body> etiqueta. De lo contrario, sería necesario agregar el siguiente en adición al código anterior.

    div {position: absolute; top: 0; left: 0;}
    • Yo personalmente prefiero div {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    • esa es una buena solución, suponiendo que usted no necesita el apoyo de IE 6.
    • Esto no funcionará si el div está contenido dentro de otro div que tiene ‘relativa’ posicionamiento conjunto. En este caso, usted necesita para eliminar posicionamiento relativo de los padres divs, o el uso de jQuery para .anteponer el div para el elemento de cuerpo.
    • Eso es cierto para cualquier tipo de posicionamiento absoluto; sin embargo, se puede suponer con seguridad que cuando un velo está siendo aplicado, existe dentro de la parte superior de la mayoría de los padres; es decir, el cuerpo de la etiqueta.
    • se PUEDE hacer que el navegador vaya real a pantalla completa (por lo menos si tienes una acción del usuario para que se te conceda el derecho) con el HTML5 de la API de pantalla completa! Por favor, mire Tracker1 la respuesta de un poco más abajo de aquí! :-/
  2. 76

    Puede utilizar HTML5 pantalla Completa API para que esto (que es la manera más adecuada, creo).

    La pantalla completa ha de ser activado a través de un suceso de usuario (haga clic en, keypress) de lo contrario no funcionará.

    Aquí es un botón que hace que el div de pantalla completa, haga clic en. Y en modo de pantalla completa, haga clic en el botón salir del modo de pantalla completa.

    JS:

    $('#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();
        }
      }
    });

    CSS:

    #container{
      border:1px solid red;
      border-radius: .5em;
      padding:10px;
    }

    HTML:

    <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>

    Por favor, también tenga en cuenta que la pantalla Completa de la API de Chrome no funciona en la no-páginas seguras. Ver https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins para obtener más detalles.

    Otra cosa a tener en cuenta es el :fullscreen selector CSS. Usted puede añadir a cualquier selector css por lo que el que las reglas se aplicarán cuando el elemento es de pantalla completa:

    #container:-webkit-full-screen,
    #container:-moz-full-screen,
    #container:-ms-fullscreen,
    #container:fullscreen {
        width: 100vw;
        height: 100vh;
        }
    • Esta es la verdadera respuesta (buscaba)
    • A mí también – esta es definitivamente la forma correcta de hacerlo! A veces estoy perplejo por lo que la gente acepta como un derecho de respuesta. 🙁 jugando con la anchura y la altura pueden hacer que el div llenar toda la ventana, pero que de ninguna manera lo mismo que ir a pantalla completa! 🙁
    • Por alguna razón esto no funciona cuando se ejecuta el fragmento aquí – pero mover el código a un JSFiddle funciona bien: jsfiddle.net/352cg8bv
    • Definitivamente esta es la mejor respuesta. Finalmente empató con el aceptado respuesta para upvotes!
    • amigo, que son lugares a los que ir… alleluyah !
  3. 22

    CSS manera:

    #foo {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
    }

    JS manera:

    $(function() {
        function abso() {
            $('#foo').css({
                position: 'absolute',
                width: $(window).width(),
                height: $(window).height()
            });
        }
    
        $(window).resize(function() {
            abso();         
        });
    
        abso();
    });
    • esta solución funciona a la perfección. Tuve que crear un contenedor div que he aplicado este estilo, y es hijo de los elementos de seguir trabajando como anteriormente deseado! Saludos!
    • Acabo de escribir esto: {position:absolute; top:0; right:0; bottom:0; left:0;} y ahora funciona muy bien. Gracias!
  4. 19

    Para pantalla completa de la representación en el explorador de área hay una solución sencilla soportado por todos los navegadores modernos.

    div#placeholder {
        height: 100vh;
    }

    La única excepción notable es el de Android por debajo de 4.3 pero ofc sólo en el explorador del sistema/webview elemento (Chrome funciona bien).

    Navegador gráfico de soporte: http://caniuse.com/viewport-units

    Para pantalla completa del monitor por favor utilice HTML5 pantalla Completa API

    • este es el trabajo como un encanto en un WebView android, gracias, señor! #gráfico { width: 100vw; altura: 100vh; }
  5. 10
    .widget-HomePageSlider .slider-loader-hide {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10000;
        background: white;
    }
    • Observar que la mayoría de las respuestas contienen una explicación y discusión, no sólo el código.
    • Esta fue la única solución que funcionó para mí porque mi cuadro de diálogo modal del html dentro de otro div que era la posición relativa. Gracias.
  6. 3

    u puede probar esto..

    <div id="placeholder" style="width:auto;height:auto"></div>

    la anchura y la altura depende de su flot o gráfica..

    espero que u quieres esto…

    o

    Por clic, u puede utilizar esta por jquery

    $("#placeholder").css("width", $(window).width());
    $("#placeholder").css("height", $(window).height());
  7. 2

    Uso de documento de altura, si usted quiere mostrar que más allá del área visible de navegador(área desplazable).

    CSS Parte

    #foo {
        position:absolute;
        top:0;
        left:0;
    }

    JQuery Porción

    $(document).ready(function() {
       $('#foo').css({
           width: $(document).width(),
           height: $(document).height()
       });
    });
  8. 0
    <div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
    • Esto ya está en la respuesta por Daryl y su respuesta no aporta nada nuevo

Dejar respuesta

Please enter your comment!
Please enter your name here