✔ Div Element ab einer bestimmten Browser Breite ausblenden lassen

[Hardliner]

Hi, ich habe eine kleines Problem wofür ich eure Hilfe gebrauchen könnte. Ich möchte ein Div Container, der für das scrollen auf der Website nach oben und unten zuständig ist, ausblenden lassen ab einer bestimmen Browser Breite.

Bisher habe ich es mit diesem Code versucht, der aber leider nicht funktioniert:

function elementResize() {
var browserWidth = $(window).width();
if ((browserWidth) < '1096'){
$('.scrolldown').hide();
$('.scrollup').hide();
} else {
$('.scrolldown').show();
$('scrollup').show();
}
}

elementResize();

$(window).bind("resize", function(){
elementResize();
});

Gibt es dafür eine bessere Lösung oder kann mir jemand sagen woran es liegen könnte das es nicht funktioniert?

 

[jeipack]

Mit CSS Media Queries kannst du das ganz einfach lösen.

@media  (max-width: 1096px) {
.scrollup, .scrolldown {
display: none;
}
}

 

[SpiceLab]

Mit CSS Media Queries kannst du das ganz einfach lösen.

@media  (max-width: 1096px) {
.scrollup, scrolldown {
display: none;
}
}

Nur bitte nicht den Punkt vor dem Klassenbezeichner "scrolldown" vergessen

 

[jeipack]

danke

 

[SpiceLab]

Bitte Teamwork

 

[Hardliner]

Danke leider funktioniert das auch nicht die Buttons werden weiterhin angezeigt. Ich poste den Code mal, hoffe das mir jemand meinen Fehler erklären kann.

@media only screen and (max-width: 1024px) {
    .scrolldown        { display: none !important }
    .scrollup                { display: none !important }
    .ficon            { display: none !important }
    }

.scrollup {
    position: fixed;
    width: 93px;
    height: 93px;
    bottom: 30px;
    right: 200px;
    display: none;
    cursor: pointer;
    background: url(totop.png) 0 0 no-repeat;
}

.scrolldown {
    width: 93px;
    height: 93px;
    position: fixed;
    bottom: 30px;
    right: 200px;
    cursor: pointer;
    background: url(toup.png) 0 0 no-repeat;
}

 

[SpiceLab]

Die Media Queries funktionieren tadellos - selbst ohne !important-Regel

Lediglich für .scrollup haben sich zwei Fehler eingeschlichen:

.scrollup {
    ...
    bottom: 30px; /* hier dürfte top erwünscht sein */
    ...
    display: none; /* versteckt grundsätzlich das Element */
}

 

[Hardliner]

Danke für die schnelle Antwort. Leider bringt mir ein top leider auch nichts und das display Attribut brauche ich für die Funktion, nehme ich an. Ich poste lieber noch als Zusatz den jQuery Code für die Funktion der Buttons. Vielleicht enthalten diese einen Fehler der die Funktion der CSS Media Queries verhindert.

$(window).scroll(function(event) {
        var y = $(this).scrollTop();
        var top = 1;
        if (y >= top) {
            $('.scrolldown').hide();
        } else {
            $('.scrolldown').fadeIn(200);
        }
    });

    $('.scrolldown').click(function() {
        $('html,body').animate({
            scrollTop : 300
        }, 800);
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() > 280) {
            $('.scrollup').fadeIn(200);
        } else {
            $('.scrollup').hide();
        }
    });

    $('.scrollup').click(function() {
        $("html, body").animate({
            scrollTop : 0
        }, 600);
        return false;
    });

 

[SpiceLab]

Leider bringt mir ein top leider auch nichts

Wenn die Scrollbuttons an selber Stelle übereinander liegen sollen, hab ich nix gesagt

Ich poste lieber noch als Zusatz den jQuery Code für die Funktion der Buttons. Vielleicht enthalten diese einen Fehler der die Funktion der CSS Media Queries verhindert.

Auch in der Kombination greifen weiterhin die Media Queries.

Zeig doch bitte mal, wie du sie in das Dokument einbindest.

 

[Hardliner]

Die Buttons sollen tatsächlich an der gleichen Stelle angezeigt werden und jeder an einer bestimmten Scrollposition. Das funktioniert auch einwandfrei.

Eingebunden sind sie so:

<div class="scrolldown"></div>
<div class="scrollup"></div>