Wywołaj funkję po zmianie adresu URL, Jak to zrobić bez hash w adresie? Opcje

[Bart123]

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]

Jeżeli zmieni się URL, to strona załaduje się od nowa i wszystkie Twoje dynamiczne addClass itp. szlag trafi.

[Bart123]

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ę.



Ten post edytował Bart123 27.09.2014, 22:25:32

[trueblue]

Pisał o rozwiązaniu w Twoim poprzednim temacie.

[Bart123]

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.

Ten post edytował Bart123 28.09.2014, 12:37:09

[trueblue]

Jak wygląda obecnie budowa adresu (w pasku przeglądarki), z hashem czy bez?

[Bart123]

Obecnie już bez bo skoro nie zadziałało, wróciłem do starego rozwiązania.

http://Adres/edukacja

Bo 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ć

Ten post edytował Bart123 28.09.2014, 12:52:49

[trueblue]

Spróbuj podpiąć tak:
window.onpopstate = function(e){
//
}
lub:
window.addEventListener("popstate", function(e) {
//
});

[Bart123]

[JAVASCRIPT] pobierz, plaintext 
 
$(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");}); 
});
 
[JAVASCRIPT] pobierz, plaintext 

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:

[JAVASCRIPT] pobierz, plaintext 
 
jQuery(document).ready(function(){
 
$(window).addEventListener("popstate", function(e) {		
$('.current-menu-item').removeClass("current-menu-item"); 
$("a[href*='" + location.pathname + "']").addClass("current-menu-item"); });
 
});
 
 
[JAVASCRIPT] pobierz, plaintext 

Ta część pozostaje kompletnie bez reakcji. Tak, jakby jej nie było.


Ten post edytował Bart123 28.09.2014, 13:07:17

[trueblue]

Linia 13: });
powinno być }

P.S. Używaj narzędzie developerskich w przeglądarce. Ułatwi Ci sporo.

[Bart123]

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.

Ten post edytował Bart123 28.09.2014, 13:19:32

[trueblue]

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]

Trueblue zmienia się bez przeładowania. Ajaxem z gifem. Z tym że ja użyłem tego.

[JAVASCRIPT] pobierz, plaintext 
 
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"); };
 
});
 
[JAVASCRIPT] pobierz, plaintext 

Tylko jakoś nie mogę wyłączyć klas przy zmiana adresu na adres strony głównej. Ale do tego zaraz dojdę znając życie.

Ten post edytował Bart123 28.09.2014, 13:28:39

[trueblue]

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]

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?

Ten post edytował Bart123 28.09.2014, 13:42:46

[trueblue]

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-pushstate
Punkt 4.
Tam też powinieneś obsłużyć zaznaczanie/odznaczanie linków.

[Bart123]

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:

[JAVASCRIPT] pobierz, plaintext 
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");
};
};
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Bart123 28.09.2014, 14:22:46

[trueblue]

Warunek powinieneś dodać w środku zdarzenia i nie taki.

Czy główna strona ma link w .nav-menu?

[Bart123]

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.

Ten post edytował Bart123 28.09.2014, 15:15:52

[trueblue]

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:

[HTML] pobierz, plaintext 
if(location.pathname!=="/")
 $(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
[HTML] pobierz, plaintext 

Możesz, jeśli masz taką możliwość dodać do niego klasę np. home i wtedy:

[HTML] pobierz, plaintext 
$(".nav-menu a[href*='" + location.pathname + "']:not(.home)").addClass("current-menu-item");
[HTML] pobierz, plaintext