Elemente nur bei bestimmter Breite anzeigen

[the_zoker_09]

Hallo zusammen,

Ich habe neben meiner eigentlichen Seite noch ein paar DIVs die mitscrollen.

Nur leider ist bei manchen meiner Nutzer der Bildschirm zu klein und die Elemente setzten sich in die Seite.

Deshalb möchte ich gerne eine Funktion bauen, die die aktuelle Browserbreite überprüft und die DIVs dann angezeigt oder eben nicht..

Ich hab mich mal so probiert:

function boxDisplay() {
    if (screen.width<900) {
        document.getElementById("hilfe").style.display = "none";
        document.getElementById("styleswitcher").style.display = "none";
        document.getElementById("newsletter").style.display = "none";
    }
}

Aber leider funktioniert das ganze nicht.

Was habe ich falsch gemacht?

Vielen Dank
the_zoker_09

 

[Banana_Jones]

Verwende mal "window.innerWidth" anstelle von "screen.width". "Screen" bezieht sich m.W. auf den gesamten Bildschirm, "window" hingegen auf das Browserfenster, und das sollte schließlich das ausschlaggebende Element sein...

 

[Sempervivum]

screen.width liefert die Bildschirmbreite. Du schreibst jedoch:

die aktuelle Browserbreite überprüft

Dafür musst Du innerwidth verwenden:
SELFHTML: JavaScript / Objektreferenz / window
Besser ist es hier, auf jQuery zurückzugreifen:
.width() – jQuery API
Viele Grüße - Ulrich

 

[Sentence]

Moin,
ich würde da kein JS nehmen sondern mir mal die CSS Mediaquerys anschauen.
Das wäre dann so z.B.

@media only screen and (max-device-width:900px) {
#[COLOR=#333333]hilfe, #[/COLOR][COLOR=#333333]styleswitcher, #[/COLOR][COLOR=#333333]newsletter {
display: none;
}[/COLOR][COLOR=#333333]
[/COLOR]}

MfG

 

[spaceCookie]

Richtig. Mach es lieber gleich elegant und verwende dann auch am besten ein Grid Layout. Hier ausführlich dokumentiert: CSS Grid Layout (ist etwas schwere Kost)

Schau dir aber mal das CSS-Framework Skeleton an dass in letzter Zeit sehr populär geworden ist: Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Damit geht das wie von selbst.

Von selbst gebastelten Javascript Lösungen würde ich in dem Fall aber abraten zumal dir das sowieso nichts bringt wenn JS auf dem Client deaktiviert ist.

~cookie