javascript - Bootstrap: Responsiivinen suunnittelu - suorita JS, kun ikkuna muutetaan koosta 980px 979px:iin


Käytän viimeisintä Twitterin Bootstrapia. Haluaisin suorittaa tietyn JS-funktion (näyttää työkaluvihjeen kerran) kun ikkunani leveys on alle 980px (kuten tiedät, tällä koolla Bootstrap muuttaa Navigaatiopalkkia ja piilottaa tavalliset valikkokohteet) - ikkuna on 768-979, lyhyesti sanottuna. Tiedän, että

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

Tätä vaihtoehtoa voidaan käyttää tapahtuman sieppaamiseen. Sitä voidaan kuitenkin käyttää vain olemassa olevien tyylien muuttamiseen, kuten

body {background-color:#ccc;}

Ja minun täytyy käynnistää JS-funktio tai lisätä tai poistaa tietty tyyli elementiltä. Olen kokeillut:

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

mutta tämä ratkaisu on niin hidas, ja jopa jumiuttaa selainikkunan. Joten, onko olemassa mitään ratkaisua tämän tapahtuman sieppaamiseen, kun ikkuna muutetaan kooltaan 979 pikseliin SUUREMMALTA puolelta ja suoritetaan JS-funktio?

Kiitos kaikille!

Vastaus #1

outerWidth on metodi, joten sinulta puuttuu ():

if (window.outerWidth() == 980)

Joka tapauksessa, jos käytät jQueryä:

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