Bootstrap: Responsive Design - Ausführen von JS, wenn Fenstergröße von 980px zu 979px geändert wird

Ich benutze letzten Twitter Bootstrap. Ich möchte eine bestimmte JS-Funktion ausführen (Tooltip einmal zeigen), wenn meine Fensterbreite niedriger als 980px ist (wie Sie wissen, ändert Bootstrap auf dieser Größe Navbar und blendet Standardmenüpunkte aus) - Fenster ist von 768 bis 979, um kurz zu sein . Ich weiß, dassBootstrap: Responsive Design - Ausführen von JS, wenn Fenstergröße von 980px zu 979px geändert wird

@media (min-width: 768px) and (max-width: 979px) {...}

diese Option verwendet werden kann, um das Ereignis zu fangen. Es kann jedoch nur zum Ändern Verlassen Stile wie

body {background-color:#ccc;}

verwendet werden Und ich brauche JS-Funktion zu starten, oder hinzuzufügen, oder einen bestimmten Stil für das Element entfernen. Ich habe versucht:

<script> 
    window.onresize = function() { 
     if (window.outerWidth == 980) {alert('');} 
    }; 
</script>

aber diese Lösung ist so langsam, und sogar hängt ein Browserfenster. Also, gibt es eine Lösung, um dieses Ereignis zu erfassen, wenn das Fenster von GREATER auf 979px skaliert wird und eine JS-Funktion ausführt?

Danke an alle!

Quelle

2012-08-28 f1nn

Warum ist die Lösung langsam, wird das Ereignis auch gefeuert werden oft für wie lange dein Handler braucht? Wenn ja, könnten Sie etwas wie Underscore.js ['debounce()'] (http://underscorejs.org/#debounce) versuchen, um den Handler nur auszuführen, wenn die Größenänderung des Fensters abgeschlossen ist. (Angenommen, Sie brauchen die Änderungen nicht wirklich, um völlig reibungslos zu sein.) – millimoose

Nun, in der Tat hat es sogar nicht für mich funktioniert - ich konnte keine Warnung erhalten, wenn Fenster 980 war. Und ich muss NUR für den Fall alarmiert werden Fenster wird von 980 auf 979 skaliert. Nicht umgekehrt :) – f1nn

Unabhängig von der Frage, +1 für die Erfindung eines neuen Wortes, das klingt, als sollte es existieren. – Stickley

outerWidth ist eine Methode, so dass Sie () sind vermisst:

if (window.outerWidth() == 980)

Auf jeden Fall, wenn Sie jQuery verwenden:

$(window).resize(function() { 
    if ($(this).width() < 981) { 
    //do something 
    } 
});

Quelle

2012-08-28 22:31:39 elclanrs

Dies im Körper eingefügt - funktioniert nicht. Es sollte nur einmal alarmiert werden, wenn die Fenstergröße von 980 auf 979 geändert wird (nicht von 978 auf 979 oder von 979 auf 980). jQ ist geladen. – f1nn

ist es viel schneller, wenn möglich, keine jQuery-Objekte zu verwenden. Sie können 'document.width' verwenden, um die Breite des Dokuments zu finden – MrOBrian

Auch versucht, Ihren Code zu dokumentieren.ready - das gleiche Ergebnis (( – f1nn

Bootstrap: Responsive Design - Ausführen von JS, wenn Fenstergröße von 980px zu 979px geändert wird

Antwort

Verwandte Themen