Usuwanie klasy

pytanie zadane 4 lutego 2017 w JavaScript przez Bakr Mądrala (6,850 p.)

Witam,

W jaki sposób usunąć klasę, kiedy użytkownik wyświetla stronę na mniejszych urządzeniach (smartfony, tablety)?

Znalazłem coś takiego, niestety nie spełnia swojej roli:

$(window).resize(function(){
   var width = $(window).width();
   if(width <= 768){
       $('.fixed-bg ').removeClass('js-parallax-bg');
   }
   else{
       $('.fixed-bg ').removeClass('js-parallax-bg');
   }
})
.resize();

Chciałbym usunąć klasę js-parallax-bg z diva o klasach fixed-bg js-parallax-bg, jeśli ekran użytkownika ma - powiedzmy- mniej niż 768px. Klasa ta powinna być tylko na ekranach powyżej 768px.

1 odpowiedź

odpowiedź 4 lutego 2017 przez Magicone Nałogowiec (45,100 p.)

Robi dokładnie to, co mu każesz. Ostatnia metoda jest zbędna, bo używa się jej w celu podpinania obsługi zdarzeń, a w tym wypadku o ile pamiętam imitowania zdarzenia. Wewnątrz pierwszego .resize() ustalasz długość okna przeglądarki, następnie usuwasz z każdego elementu .fixed-bg klasę .js-parallax-bg, bez względu na to jaką wartość ma zmienna width (to samo wewnątrz if i else). Czy na pewno ma to tak działać? ;) Nawiasem, może media queries będą lepsze w wypadku Twojego problemu?

komentarz 4 lutego 2017 przez Bakr Mądrala (6,850 p.)

http://bakr-test.esy.es/usuwanie-klasy/

Pod klasę .js-parallax-bg mam podpięty efekt parallax wykonywane przez JS. Niestety nawet po usunięciu tej klasy przez JS efekt nadal działa...

Wymyśliłem opcję, aby dodać 2 elementy, z których jeden będzie widoczny tylko na desktopach, a drugi tylko na mobilnych, gdzie nie będzie klasy .js-parallax-bg. Jednak chciałbym tego uniknąć, gdyż daje to nadmiarowy kod...

komentarz 4 lutego 2017 przez Magicone Nałogowiec (45,100 p.)

Event podpinasz pod konkretny element, a raczej ich zbiór, który "opisany" jest posiadaniem klasy .js-parallax-bg. Jeśli usuniesz klasę to sam handler eventu i tak zostanie. Operacje na elementach powinny być robione w taki sposób, żeby szukanie ich po "opisie" następowało w momencie wykonywania zdarzenia. Opisz dokładnie co do końca chcesz osiągnąć, to powiem Ci jak to najbardziej praktycznie rozwiązać.

komentarz 4 lutego 2017 przez Bakr Mądrala (6,850 p.)

Chce, aby na urządzeniach mobilnych nie działał efekt parallax. Jest on definiowany przez .js-parallax-bg. Na desktopach działa ok, jednak na mobilnych efekt parallaxy nieco przeszkadza.

komentarz 5 lutego 2017 przez Magicone Nałogowiec (45,100 p.)

To napisałeś wcześniej, pokaż jak wywołujesz ten efekt na elementach.

komentarz 5 lutego 2017 przez Bakr Mądrala (6,850 p.)

Skorzystałem z gotowego skryptu:

https://webmastah.pl/tutorial/parallaxbg/js/gator.min.js
https://webmastah.pl/tutorial/parallaxbg/js/parallaxbg.js

komentarz 5 lutego 2017 przez Magicone Nałogowiec (45,100 p.)

no to sprawa jest prosta - twój skrypt musi być wykonany przed skryptem zasysanym z webmastah, wtedy usuniesz klasy elementom, których nie chcesz poddać efektowi i vendor nie będzie ich brał pod uwagę