code ausblenden wenn Bildschirm kleiner ist als ... | Html

Question

1

code ausblenden wenn Bildschirm kleiner ist als ... | Html

Frage von

norman2 01.11.2011 - 22:43

Mit welchem Code kann ich einen beliebigen Code ausblenden wenn das Browser Fenster kleiner ist als __ px? Kennt vielleicht jemand die Antwort oder ein Forum wo ich sie finden kann?

Fragen zu gleichen Themen finden: html; CSS; JavaSkript

Answer 1

Deine Antwort

Hallo!

Bitte beachte, dass Deine Antwort ein wirklich hilfreicher Rat für den Fragesteller ist.
Einer Antwort kann nur maximal ein Link beigefügt werden.
Antworten mit mehreren Links werden als Spam interpretiert und nicht veröffentlicht.

Vielen Dank, auch im Namen des Fragestellers,
Dein gutefrage.net-Team

answer

Answer 2 · 2011-11-02T09:29:53

1

RatgeberHelden Antwort von

MEGACHELTERRARMEGACHELTERRAR 02.11.2011 - 9:29

<script type="text/javascript">
    var maxBreite = 1200;
    var maxHoehe = 800;
    var id_des_objekts = "meine_id";
    if(screen.height>maxHoehe||screen.width>maxBreite){document.getElementById(id_des_objekts).style.display = "none";}
</script>

Musst die Werte oben nur anpassen ;)

Kommentar von

KiraBiancaKiraBianca 02.11.2011 - 13:23

Hallo MEGACHELTERRAR,

im Ansatz hast Du die Frage von norman2 schon ganz richtig beantwortet. Jedoch sollten im Script nicht die Werte vom screen verwendet werden (height bzw. width), sondern die von window (innerHeight bzw. innerWidth). Denn screen gibt die komplette Bildschirmgröße zurück und nicht die Größe des Browserfensters. Außerdem hast Du > und < verwechselt.

Somit ergibt sich folgende Scriptlösung:

var maxBreite = 1200;
var maxHoehe = 800;
var id_des_objekts = "meine_id";
if (window.innerHeight < maxHoehe || window.innerWidth < maxBreite){
    document.getElementById(id_des_objekts).style.display = "none";}

Gruß Kira-Bianca

Kommentar von

MEGACHELTERRARMEGACHELTERRAR 02.11.2011 - 13:51

Außerdem hast Du > und < verwechselt.

Hast recht, habe ich nicht beachtet.

Den Unterschied zwischen innerHeight und Height kenne ich ganz bestimmt. Nur innerHeight gibt den verfügbaren Platz für die Webseite zurück und nicht die Größe des Browserfensters. Zudem ist es nicht so gut einmal den verfügbaren Platz zur Überprüfung zu nehmen, da man auch das Fenster verkleinern kann, und dann auch wieder maximieren. Um das auszuschließen müsste man es jede Sekunde kontrollieren. Das erschien mir als überflüssig ;)

Kommentar von

norman2 03.11.2011 - 21:20

... Ich fände es besser wenn es sich an der Browser Größe orientiert. Wo ich die Größe eingebe sehe ich bei beiden Codes, aber wo kommt mein Code rein der nur dann ausgeführt werden soll?

Kommentar von

MEGACHELTERRARMEGACHELTERRAR 03.11.2011 - 22:29

Am besten direkt unter das Objekt, das du evtl. verschwinden lassen willst. Ein Beispiel:

<body>
    <div id="mein_div" style="display:block;">Hallo</div>

    <script type="text/javascript">
        var maxBreite = 1200;
        var maxHoehe = 800;
        var id_des_objekts = "mein_div";
        if(window.innerHeight<maxHoehe||screen.innerWidth<maxBreite){document.getElementById(id_des_objekts).style.display = "none";}
    </script>
</body>

Answer 3 · 2011-11-02T09:29:53

1

RatgeberHelden Antwort von

MEGACHELTERRARMEGACHELTERRAR 02.11.2011 - 9:29

<script type="text/javascript">
    var maxBreite = 1200;
    var maxHoehe = 800;
    var id_des_objekts = "meine_id";
    if(screen.height>maxHoehe||screen.width>maxBreite){document.getElementById(id_des_objekts).style.display = "none";}
</script>

Musst die Werte oben nur anpassen ;)

Kommentar von

KiraBiancaKiraBianca 02.11.2011 - 13:23

Hallo MEGACHELTERRAR,

im Ansatz hast Du die Frage von norman2 schon ganz richtig beantwortet. Jedoch sollten im Script nicht die Werte vom screen verwendet werden (height bzw. width), sondern die von window (innerHeight bzw. innerWidth). Denn screen gibt die komplette Bildschirmgröße zurück und nicht die Größe des Browserfensters. Außerdem hast Du > und < verwechselt.

Somit ergibt sich folgende Scriptlösung:

var maxBreite = 1200;
var maxHoehe = 800;
var id_des_objekts = "meine_id";
if (window.innerHeight < maxHoehe || window.innerWidth < maxBreite){
    document.getElementById(id_des_objekts).style.display = "none";}

Gruß Kira-Bianca

Kommentar von

MEGACHELTERRARMEGACHELTERRAR 02.11.2011 - 13:51

Außerdem hast Du > und < verwechselt.

Hast recht, habe ich nicht beachtet.

Den Unterschied zwischen innerHeight und Height kenne ich ganz bestimmt. Nur innerHeight gibt den verfügbaren Platz für die Webseite zurück und nicht die Größe des Browserfensters. Zudem ist es nicht so gut einmal den verfügbaren Platz zur Überprüfung zu nehmen, da man auch das Fenster verkleinern kann, und dann auch wieder maximieren. Um das auszuschließen müsste man es jede Sekunde kontrollieren. Das erschien mir als überflüssig ;)

Kommentar von

norman2 03.11.2011 - 21:20

... Ich fände es besser wenn es sich an der Browser Größe orientiert. Wo ich die Größe eingebe sehe ich bei beiden Codes, aber wo kommt mein Code rein der nur dann ausgeführt werden soll?

Kommentar von

MEGACHELTERRARMEGACHELTERRAR 03.11.2011 - 22:29

Am besten direkt unter das Objekt, das du evtl. verschwinden lassen willst. Ein Beispiel:

<body>
    <div id="mein_div" style="display:block;">Hallo</div>

    <script type="text/javascript">
        var maxBreite = 1200;
        var maxHoehe = 800;
        var id_des_objekts = "mein_div";
        if(window.innerHeight<maxHoehe||screen.innerWidth<maxBreite){document.getElementById(id_des_objekts).style.display = "none";}
    </script>
</body>

code ausblenden wenn Bildschirm kleiner ist als ... | Html

Antworten (1)

Verwandte Fragen

Noch nicht den richtigen Rat gefunden?

Diese Frage teilen

Ähnliche Fragen