Wyłączenie kodu js przy danej rozdzielczości

pytanie zadane 21 maja 2016 w JavaScript przez Paweł123 Nałogowiec (33,500 p.)

Cześć, zrobiłem moją własną stronę http://sourcestudio.pl/ i chciałbym, aby przy rozdzielczość poniżej 750px, animacje na stronie zostały wyłączone.

Myślałem, aby zrobić coś w JS, tylko nie wiem jak.

Kod JS, który uruchamia animacje.

<script>
	$(document).ready(function(){

		$('*[data-animate]').addClass('hide').each(function(){
      $(this).viewportChecker({
        classToAdd: 'show animated ' + $(this).data('animate'),
        classToRemove: 'hide',
        offset: '35%'
      });
    });

	});
</script>

Czy ktoś ma pomysł, jak wyłączyć animacje przy danej rozdzielczości?

Myślałem, aby zrobić metodą if else, tylko nie wiem jak.

Z góry dzięki

komentarz 21 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

przy rozdzielczość poniżej 750px

750px szerokości czy wysokości?

komentarz 21 maja 2016 przez Paweł123 Nałogowiec (33,500 p.)

szerokości

Zapomniałem dopisać ;)

4 odpowiedzi

odpowiedź 21 maja 2016 przez Comandeer Guru (601,590 p.)
wybrane 21 maja 2016 przez Paweł123

Najlepsza

https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia

lub

https://developer.mozilla.org/en/docs/Web/API/window/innerWidth

lub

http://api.jquery.com/width/

komentarz 21 maja 2016 przez Paweł123 Nałogowiec (33,500 p.)

Dzięki rozwiązałem swój problem twoim pierwszym sposobem.

Napisałem coś takiego

<script>
	
	if (window.matchMedia("(min-width: 750px)").matches)
	{
  
	$(document).ready(function(){

		$('*[data-animate]').addClass('hide').each(function(){
      	
			$(this).viewportChecker({
        	classToAdd: 'show animated ' + $(this).data('animate'),
        	classToRemove: 'hide',
        	offset: '35%'
      		});
    	});

	});
	
	} 
</script>

Jak oceniasz kod?

Dobrze zrobiłem?

odpowiedź 21 maja 2016 przez Ivan Maniak (60,650 p.)

Za każdym razem gdy użytkownik wchodzi na stronę oraz ją skaluje [event listener "onresize"] sprawdzaj window.innerWidth Jeżeli jest większy od 750 -> wykonaj animacje.

komentarz 21 maja 2016 przez Paweł123 Nałogowiec (33,500 p.)

ok, dzięki za podpowiedz, ale nadal nie wiem jak to zrobić ;(

komentarz 21 maja 2016 przez Ivan Maniak (60,650 p.)

if (window.innerHTML >= 750){ // lub window.screen.width
  // Twoja animacja
}

odpowiedź 21 maja 2016 przez jpacanowski VIP (101,940 p.)

.width()
https://api.jquery.com/width/

komentarz 21 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

window.screen.width oraz window.screen.height

Na prawdę jQuery do tego potrzeba??

komentarz 21 maja 2016 przez Paweł123 Nałogowiec (33,500 p.)

Ok, dzięki za podpowiedz, ale jak mam wyłączyć te animacje. Co mam napisać w kodzie js?

komentarz 21 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, 4 linijka dodaje animację poprzez .addClass, tak? To linijkę wyżej daj if (window.screen.width < 750) czy tam jQuery'owa wersja .width() (albo height, zależy co sprawdzasz) jak podał kolega w odpowiedzi.

komentarz 21 maja 2016 przez niezalogowany

Krzycho92, ale w czym problem? - cały kod jest pisany w jQuery

komentarz 21 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

@niezalogowany, gdzieś (chyba nawet tu na forum) czytałem, że "każdy powód aby nie używać jQuery jest dobry" - więc dopóki nie ma takiej konieczności albo dopóki ilość kodu w VanillaJS nie będzie znacząco dłuższa niż w jQuery, to nie używam - czyli jak do tej pory nigdy.

komentarz 21 maja 2016 przez jpacanowski VIP (101,940 p.)

Widziałem, że cały kod jest w jQuery, więc podałem .width()

Nie promuję jQuery, ale też nie odradzam.

komentarz 21 maja 2016 przez niezalogowany

Nigdy nie ma konieczności stosowania jQuery - http://youmightnotneedjquery.com. Jednak jeśli twórca bibliotekę już załadował, to dlaczego z niej nie korzystać? Zawsze można argumentować optymalizacją - ciężko o coś szybszego niż bezpośredni dostęp do zmiennej globalnej. Tylko czy w tym przypadku ma to jakiś większy sens..

odpowiedź 22 maja 2016 przez Adam Jakś Dyskutant (8,940 p.)

Możesz użyć funkcji width() zwracającej szerokość elementu, wywołując ją na rzecz całego okna przeglądarki, czyli $(window) i sprawdzić czy wartość jest mniejsza lub równa 750.

$(document).ready(function(){
var x = $(window).width();

if (x>750) {

   $('*[data-animate]').addClass('hide').each(function(){

      $(this).viewportChecker({

        classToAdd: 'show animated ' + $(this).data('animate'),

        classToRemove: 'hide',

        offset: '35%'

      });

    });
} 
});