+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Javascript i Media Queries - pline (/thread-javascript-i-media-queries-pline)
Javascript i Media Queries - pline - kassey - 19-03-2013
Witam,
Mam pytanie odnośnie plików javascript. Zrobiłam stronę z wykorzystaniem Media Queries i chciałabym, móc wyłączyć plik javascript jeśli strona będzie wyświetlana na urządzeniach o mniejszej rozdzielczości. Obecnie kod js wygląda tak:
$(window).scroll(function(){
if($(window).scrollTop() < 540){
$("#index .sr #menu").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() > 540){
$("#index .sr #menu").fadeOut("fast");
}
});
$(window).scroll(function(){
if($(window).scrollTop() > 600){
$(".menu2").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 600){
$(".menu2").fadeOut("fast");
}
});
Jak powinien wyglądać kod przy rozdzielczości mniejszej niż 480 px. ?
Z góry dziękuję za pomoc.
RE: Javascript i Media Queries - pline - prawdziwypiotrek - 19-03-2013
Jakkolwiek pytanie nie jest do końca dla mnie zrozumiałe i nie wiem jaki konkretnie efekt chcesz osiągnąć, ale zapewne potrzebujesz:
http://www.sitepoint.com/javascript-media-queries/
Informacje "pikselowe" można także czerpać z obiektu window: http://webmaster.helion.pl/index.php/kursjs-wspolpraca-z-przegladarka-model-dom/kursjs-obiekt-window .
RE: Javascript i Media Queries - pline - Kartofelek - 19-03-2013
Wyliczanie pxlowe jest błędne bo różni się od tego co daje CSS. Czasami pasek jest wliczany, czasami nie itp. Widziałem do tego biblioteki które to niby naprawiały, ale ogólnie były z tym problemy? Nie wiem dokładnie czemu tak się dzieje i czy zawsze takie problemy występują, ale pal licho to. Istnieje lepsza metoda:
Za pomocą media quersies zmieniasz jakiś obiekt (np pokazujesz responsywne menu, zmeiniasz szerokość itp). Przy window resize sprawdzasz ten element (jego widoczność itp) i wykonujesz odpowiednie akcje. Dzięki temu masz oddzielone skrypty od warstwy wizualnej (tylko w css masz ustawione punkty przejścia dla media queries).
Kod:
#xxx {displany:none;}
@media only screen and (min-width: 600px) {
#xxx {display:block;}
}
$(window).resize(function() {
if ($('#xxx').is(':visible')) {.............} else {...........}
});