Bart123
27.09.2014, 21:58:05
Wszystko opisałem w tytule. ostatnio spotykam się z takimi problemami, że już dawno powinienem to pytanie zadać.
Ponieważ nigdy tego nie robiłem i to będzie mój pierwszy raz (niczym u prawiczka hahaha ), proszę od razu o przykład.
Chodzi mi konkretnie o addClass kiedy zmieni się adres url strony. Bez żadnego klikania. Niech skrypt patrzy w adres url i jeżeli się zmienił, niech funkcja zadziała.
Damonsson
27.09.2014, 22:06:22
Jeżeli zmieni się URL, to strona załaduje się od nowa i wszystkie Twoje dynamiczne addClass itp. szlag trafi.
Bart123
27.09.2014, 22:09:24
Nie ponieważ używam wtyczki do ajaxowania linków. W związku z tym, strona ładuje się bez przeładowania takiego fizycznego.
Konkretnie: Ajaxify Wordpress Site.
I w tym momencie zmiana klas działa ale dopiero po kliknięciu na link. Żeby móc dodać do tego paginację, musi to działać na bazie adresu URL właśnie albo w jakikolwiek inny sposób, którego ja nie znam.
Klikam na zmianę strony na następną - link jest nad stopką. A menu mam w header . W momencie kiedy kliknę na następną stronę u dołu, chcę żeby u góry zmieniała się klasa aktywnego linku. Nie wiem czy to jasno opisuję.
trueblue
28.09.2014, 07:19:01
Pisał o rozwiązaniu w Twoim poprzednim temacie.
Bart123
28.09.2014, 12:36:46
Rozwiązanie .on("popstate" - być może przez wordpress - kompletnie nie działa więc podpowiedź mi nie pomogła. Stąd postanowiłem czekać w nowym temacie na inne pomysły, zadając konkretne pytanie.
trueblue
28.09.2014, 12:41:49
Jak wygląda obecnie budowa adresu (w pasku przeglądarki), z hashem czy bez?
Bart123
28.09.2014, 12:44:12
Obecnie już bez bo skoro nie zadziałało, wróciłem do starego rozwiązania.
http://Adres/edukacjaBo w tej chwili zmiany klass w menu działają po kliknięciu w link w headerze w menu głównym - tak jak było.
Natomiast paginacja tylko przerzuca strony ale już nie zmienia klas. Paginacja wtyczkowa oczywiście bo życie sobie należy ułatwiać
trueblue
28.09.2014, 12:51:31
Spróbuj podpiąć tak:
window.onpopstate = function(e){
//
}
lub:
window.addEventListener("popstate", function(e) {
//
});
Bart123
28.09.2014, 12:54:33
$(window).load(function () {
var tutaj = jQuery('.wrapper').offset().top;
jQuery('html, body').animate({scrollTop: tutaj}, 'slow');
});
jQuery(document).ready(function(){
window.onpopstate = function(e){
$('.current-menu-item').removeClass("current-menu-item");
$("a[href*='" + location.pathname + "']").addClass("current-menu-item"); });
});
jQuery(document).ready(function(){
$('.home').click(function() {
$('.current-menu-item').removeClass("current-menu-item");});
});
To jest mój dokument w całośći. Po wpisaniu tego co podałeś - DRUGA CZĘŚĆ - żaden ze skryptów nie działa więc pewnie ja coś źle wpisałem? pierwszy zawsze działał bezbłędnie.
ROZWIĄZANIE DRUGIE:
jQuery(document).ready(function(){
$(window).addEventListener("popstate", function(e) {
$('.current-menu-item').removeClass("current-menu-item");
$("a[href*='" + location.pathname + "']").addClass("current-menu-item"); });
});
Ta część pozostaje kompletnie bez reakcji. Tak, jakby jej nie było.
trueblue
28.09.2014, 13:08:53
Linia 13: });
powinno być }
P.S. Używaj narzędzie developerskich w przeglądarce. Ułatwi Ci sporo.
Bart123
28.09.2014, 13:15:58
Zwykle używam. Teraz już po prostu w akcie desperacjii chcę tą stronę skończyć i zostawić ją w cholerę heheh
Ej! Działa! Jesteś wielki! Normalnie dać mu browara

Teraz muszę tylko włączyć anulowanie klas w momencie, kiedy strona dochodzi do home. Ale to mała poprawka. Zaraz będzie.
Trueblue - BiG Respect

Thx.
trueblue
28.09.2014, 13:19:21
Nie przyłączaj addEventListenter do $(window), ale bezpośrednio do obiektu window.
Chce się upewnić, czy adres w pasku zmienia się bez przeładowania strony?
Bart123
28.09.2014, 13:22:50
Trueblue zmienia się bez przeładowania. Ajaxem z gifem. Z tym że ja użyłem tego.
jQuery(document).ready(function(){
window.onpopstate = function(e){
$('.current-menu-item').removeClass("current-menu-item");
$(".nav-menu li a[href*='" + location.pathname + "']").addClass("current-menu-item"); };
});
Tylko jakoś nie mogę wyłączyć klas przy zmiana adresu na adres strony głównej. Ale do tego zaraz dojdę znając życie.
trueblue
28.09.2014, 13:32:34
Upewnij się, że ta funkcja jest wywoływana przy zmianie adresu, wrzuć do środka jakiś alert.
P.S. Ten sposób nie jest najlepszy, bo jeśli wcześniej w kodzie jest przypięta obsługa zdarzenia na onpopstate, ta metoda nadpisze handlery.
Bart123
28.09.2014, 13:40:17
Tu jest tylko jedna taka funkcja więc nie ma problemu.
Alert się wyświetla. Nie wyświetla się tylko wtedy, kiedy ręcznie zmienię adres, wpisując go do paska, ale tu niie o to chodzi więc wszystko gra chyba.
No nie do końca, bo chyba chcąc dodać remove class dla wszystkich a, kiedy jestem na stronie głównej, będę musiał dwa razy użyć tego samego?
trueblue
28.09.2014, 13:57:01
Nie do końca rozumiem co masz na myśli, ale może chodzi Ci o tzw. initial state, który dotyczy nie tylko strony głównej, ale ogólnie wejścia na jakąkolwiek podstronę bez ajaxa.
http://blog.jonabrams.com/post/25435115993...html5-pushstatePunkt 4.
Tam też powinieneś obsłużyć zaznaczanie/odznaczanie linków.
Bart123
28.09.2014, 14:38:35
Opiszę jaśniej.
Dodawaj klasę do aktualnego linku - czyli to co zrobiliśmy - ale nie dodawaj jej wtedy, kiedy jesteś na stronie głównej. Wtedy, usuwaj klasę z aktualnego linku i niech wszystkie będą bez klasy.
NP. WTEDY - KIEDY PRZY POMOCY PAGINACJI WRÓCIŁEŚ DO PIERWSZEJ STRONY.
Dlatego, że wtedy dodaje klasę do wszystkich linków. Tak jakby będąc na stronie głównej, był na wszystkich podstronach jednocześnie.
Pójdę coś zjeść i poczytam. Coś czuję, że wreszcie skończę dziś to badziewie:)
Próbowałem to zrobić tak, ale niestety tak prosto nie będzie:
jQuery(document).ready(function(){
if (location.href !="Pierwsza strona"){
window.onpopstate = function(e){
$('.current-menu-item').removeClass("current-menu-item");
$(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
};
};
});
trueblue
28.09.2014, 15:06:30
Warunek powinieneś dodać w środku zdarzenia i nie taki.
Czy główna strona ma link w .nav-menu?
Bart123
28.09.2014, 15:08:45
Nie no główna strona faktycznie ma link home. Ale to w ogóle chyba jest źle.
Chodziło mi o to - dodawaj klasy w nav-menu jeżeli aktualny url nie równa się i tu mój adres strony głównej.
Już włożyłem warunek do środka ale to nie działa. Nadal jeżeli url zmienia się na główny adres, to klasa dodaje się do wszystkich linków w nav-menu. A ja bym chciał, żeby ona w tym momencie stamtąd zniknęła.
Bo sam link home nie zaznacza się w żaden sposób - klikamy na logo i tyle.
trueblue
28.09.2014, 15:14:18
Pytałem czy jest tag <a> w .nav-menu, który odpowiada stronie głównej.
Jeśli jest, to musisz zrobić warunek na href odpowiadający jej, pewnie będzie to:
if(location.pathname!=="/")
$(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
Możesz, jeśli masz taką możliwość dodać do niego klasę np. home i wtedy:
$(".nav-menu a[href*='" + location.pathname + "']:not(.home)").addClass("current-menu-item");
Bart123
28.09.2014, 15:18:36
Sorki bo ja trochę zamotałem. Jeszcze raz -
W nagłówku jest logo, które ma link do strony głównej. I to jest logo - zupełnie oderwane od nawigacji. Ten link do strony głównej ma klasę home właśnie.
A osobną jakby częścią nagłówka jest .nav-menu gdzie mamy wszystkie podstrony.
Teraz chyba jaśniej trochę.
trueblue
28.09.2014, 15:21:19
No, to jeśli nie ma w .nav-menu, to nie doda klasy current-menu-item, a wyczyści wszystkim <a> w menu.
I to przy wejściu na główną powinno działać jak oczekujesz.
Bart123
28.09.2014, 15:24:07
Ale to mam zrobić to co ostatnio podałeś?
Ja właśnie nie potrafię zrozumieć jednej rzeczy. Dlaczego kliknięcie w home oznacza dla niego zaznaczenie wszystkich linków w nav menu. Głupota.
trueblue
28.09.2014, 15:25:51
Tak, mieszasz:)
Jeśli tak jest, to obydwa rozwiązania, które podałem powinny zadziałać poprawnie (pierwsze pod warunkiem, że pathname dla głównej, to "/").
Bart123
28.09.2014, 15:45:26
Oto i jest cały zapis pliku, nad którym siedziałem dobry tydzień. Trueblue - dzięki Tobie nie siedziałem kolejny tydzień. Wielkie dzięki bo już byłem gotów zrezygnować

Czasem warto być upartym
$(window).load(function () {
var tutaj = jQuery('.wrapper').offset().top;
jQuery('html, body').animate({scrollTop: tutaj}, 'slow');
});
jQuery(document).ready(function(){
window.onpopstate = function(e){
if(location.pathname!=="/") {
$('.current-menu-item').removeClass("current-menu-item");
$(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
};
if(location.pathname=="/") {
$('.current-menu-item').removeClass("current-menu-item");
};
};
});
trueblue
28.09.2014, 15:48:31
A tu masz prościej (druga część kodu). Wstawianie do .ready nie jest potrzebne:
window.onpopstate = function(e){
$('.current-menu-item').removeClass("current-menu-item");
if(location.pathname!=="/")
$(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
};
Bart123
28.09.2014, 15:54:41
trueblue - dzięki. Ja wiem tylko, że jak miałem wszystko razem, to się gubiłem.
Jak zaczynasz takie zabawy, to lepiej stawiać małe kroczki z rozłożonym kodem
Ale oczywiście poprawkę wprowadzę bo jest jak zwykle trafna

Kolejnba rzecz, której się nauczyłem : Javascript to nie PHP - nawiasy po warunku if są niepotrzebne
z tym if to chyba żartujesz, w każdym języku jak masz 1 linie w warunku to nie potrzebujesz nawiasów, ale jak chcesz więcej to już Ci nie zadziała
Bart123
28.09.2014, 21:51:32
Ok w takim razie ja jakoś z przyzwyczajenia zawsze używałem nawiasów.
To chyba nie jest jakiś szczególnie zły nawyk na szczęście
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.