webentwicklung-frage-antwort-db.com.de

Wie erstelle ich ein Div-Vollbild?

Ich benutze Flot , um einige meiner Daten grafisch darzustellen, und ich dachte, es wäre großartig, wenn dieser Graph im Vollbildmodus erscheinen würde (auf dem Monitor den gesamten Speicherplatz belegen), wenn Sie auf eine Schaltfläche klicken. Derzeit lautet meine div wie folgt:

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

Natürlich dient das style-Attribut nur zum Testen. Ich werde dies während des eigentlichen Entwurfs nach CSS verschieben. Gibt es überhaupt eine Möglichkeit, dieses Div-Vollbild zu erstellen und trotzdem die gesamte Ereignisbehandlung beizubehalten?

javascriptjqueryhtmlcss3flot
42
Legend

Wenn Sie "Vollbild" sagen, meinen Sie damit Vollbild für den Computer oder für die Belegung des gesamten Speicherplatzes im Browser?

Sie können den Benutzer nicht in den Vollbildmodus zwingen F11; Sie können Ihr Div jedoch mit dem folgenden CSS als Vollbild anzeigen

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

Dies setzt natürlich voraus, dass Ihr div dem <body>-Tag untergeordnet ist. Andernfalls müssen Sie zusätzlich zum obigen Code Folgendes hinzufügen.

div {position: absolute; top: 0; left: 0;}
63
user888750

Sie können dafür die HTML5-Vollbild-API verwenden (dies ist die am besten geeignete Methode, die ich denke).

Der Vollbildmodus muss über ein Benutzerereignis (Klick, Tastendruck) ausgelöst werden, sonst funktioniert es nicht.

Hier ist eine Schaltfläche, mit der das Div-Vollbild beim Klicken angezeigt wird. Im Vollbildmodus wird der Vollbildmodus durch Klicken auf die Schaltfläche beendet.

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

Bitte beachten Sie auch, dass die Vollbild-API für Chrome nicht auf nicht sicheren Seiten funktioniert. Weitere Informationen finden Sie unter https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins .

Zu beachten ist auch der: Fullscreen-CSS-Selektor. Sie können dies an jeden CSS-Selektor anhängen, sodass die Regeln angewendet werden, wenn das Element Vollbild ist:

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }
66
1.44mb

CSS Weg:

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

JS Weg:

$(function() {
    function abso() {
        $('#foo').css({
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        });
    }

    $(window).resize(function() {
        abso();         
    });

    abso();
});
22
daryl

Für den Vollbildbereich des Browser-Rendering-Bereichs gibt es eine einfache Lösung, die von allen modernen Browsern unterstützt wird.

div#placeholder {
    height: 100vh;
}

Die einzige nennenswerte Ausnahme ist das Android unter 4.3 - aber ofc nur im Systembrowser/webview-Element (Chrome funktioniert ok).

Browser-Support-Diagramm: http://caniuse.com/viewport-units

Für den Vollbildschirm des Monitors verwenden Sie bitte die HTML5-Vollbild-API

16
Tomek Kobyliński
.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}
9
Denis

Verwenden Sie die Dokumenthöhe, wenn Sie sie außerhalb des sichtbaren Bereichs des Browsers anzeigen möchten (scrollbarer Bereich).

CSS-Teil

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

JQuery-Teil

$(document).ready(function() {
   $('#foo').css({
       width: $(document).width(),
       height: $(document).height()
   });
});
2
Dasun

du kannst es versuchen ..

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

breite und Höhe hängen von Ihrem Flot oder Diagramm ab.

hoffe du willst das ...

oder 

Durch Anklicken können Sie dies durch Jquery verwenden

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

Dies ist der einfachste.

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
1
Varadha31590
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
0
Aaron