Frage von abbrechen, 52

Probleme mit responsive jQuery?

Hi,

ich versuche eine css-Klasse über jQuery nur zu bestimmten Bildschrimbreiten anzeigen zu lassen, aber alle Varianten scheinen nicht zu funktionieren. Es wird weiterhin bei jeder Größe die Funktion ausgelöst.

Variante 1

 if ($(window).width() < 980) {
        $('.programm').click(function() {
            $('.sub').slideToggle(300);
        });
    }

Variante 2

$(window).resize(function() {
    if ($(window).width() < 980) {
        $('.programm').click(function() {
            $('.sub').slideToggle(300);
        });
    }
});
Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Dory1, 39

Variante 1 funktioniert, aber natürlich nur dann wenn das Browserfenster zum Zeitpunkt des Ladens der Seite schon kleiner als 980px ist. Der Event-Handler wird ja nur dann ggf. einmalig registriert. Verkleinerst du das Fenster im Nachhinhein wird die Funktion natürlich trotzdem wieder ausgeführt.

Variante 2 ist äußerst ungünstig. Du musst dir klarmachen, dass die Funktion, die du an $(window).resize übergibst u.U. hunderte oder sogar tausende male ausgeführt wird während der User das Browserfenster verändert. Der Event-Handler wird also ebenso oft registriert (und ausgeführt).

Ich denke das ist es was du willst:

$('.programm').click(function() {
if ($(window).width() < 980) {
$('.sub').slideToggle(300);
}
});
Kommentar von abbrechen ,

Kompetent wie immer, danke. =)

Deine Variante erscheint mir vom Aufbau sehr logisch.
Und funktioniert einwandfrei.

Für Variante 1 müsste die Funktion dann wohl permanent abgefragt werden?

Kommentar von Dory1 ,

Mein Vorschlag ist ja im Grunde deine Variante 1, mit dem einzigen Unterschied, dass die Abfrage der Fenstergröße innerhalb der Funktion stattfindet, nicht einmalig außerhalb. 

Antwort
von MonkeyKing, 22

Viel eleganter, und ohne jeglichen Javascript Code kann man das mit CSS media queries machen. Schau dir da mal an!

Kommentar von abbrechen ,

Im Prinzip richtig, aber hier nicht nötig, da man in css nicht ohne weiteres das Auftauchen einer Klasse beim Klick, nicht beim Hovern, animieren kann. Der Umweg mit dem Tilde-Selektor ist vom Code dann doch umständlicher als ein jQuery-Vierzeiler.

Ich wollte mit dem Versuch oben die Animationsart ändern.

Trotzdem danke. =)

Kommentar von MonkeyKing ,

Stimmt. Zum Hinzufügen der Klasse lässt sich nur mit JS realisieren. Die Animation würde ich aber mit CSS machen.

Antwort
von perhp, 26

Da dein Problem gelöst ist, brauche ich dazu ja nicht mehr viel sagen. Würde bei der Resize Funktion ein Timeout einbauen, sodass diese nicht jedes mal ausgeführt wird und so weniger Ressourcen in Anspruch genommen werden.

Du solltest dich mit debuggen mehr beschäftigen, da du dann dieses Problem sehr schnell selbst herausgefunden hättest.

Kommentar von abbrechen ,

Da hast du auf jeden Fall recht.

Hättest du einen Tipp zum Debuggen? Benutze momentan jshint, aber dabei werden nur Formfehler entdeckt. Mein Problem ist bei jQuery ist noch oft, dass ich die Logik falsch aufbaue und dann ein technisch funktionierendes, aber anderes Ergebnis erziele wie oben.

Kommentar von perhp ,

Es gibt mehrere Möglichkeiten wie du die Sachen debuggen kannst. Würde dir raten beim Programmieren den Browser Chrome zu verwenden, da dieser für Programmierer einfach am benutzerfreundlichsten ist, im Bezug aufs Debuggen.

- console.log(deine_variable) = Dieser Befehl gibt einfach in der Konsole (F12) deine Variable aus, dann kannst du sehen, ob der Wert gleich ist, welchen du möchtest.

- Dann gibt es noch die gute alte Zeile debugger; dieser stoppt dir das ausführen des Befehls in der Zeile, wo du diese hineinschreibst. Dort siehst du nun, ob die Variablen so sein sollen, wie sie sind. Wenn du sehen willst, wie der Code nachher aussieht, kannst du durch anklicken der jeweiligen Zeile im Browser ein neuen Debugger markieren (dann kommt im Chrome so ein blauer Punkt). So kannst du nun den Code Schritt für Schritt durchgehen und sehen, wo genau dein Problem liegt.

- JSHint gibt dir zwar an, ob die Syntax falsch ist, was auch recht nützlich ist, aber nicht ob du einen Logikfehler drinnen hast.



Keine passende Antwort gefunden?

Fragen Sie die Community