URL változtatás szkrollozásra ajaxosan - hogyan?

**Akka** · 2014-05-14, 10:57

Infinite szkroll megoldást használok WP oldalon: amikor valaki egy poszt végére ér, automatikusan betöltődik a következő poszt. Szeretném, ha a következő poszt megjelenésével egy időben az URL is változna a böngészőben.
Merre érdemes elindulni? Túl sok infót nem találtam erről.
Köszi előre is.

**djarni** · 2014-05-14, 15:47

Magyarul a remek felhasználói élmény és navigációs trend előnyeit szeretnéd összefókuszálni a seo barát technikával

A megoldás érdekelne engem is. Amígy nincs, addig szerintem úgy érdemes, hogy az értékesítő (landing page) részeket szkrollozod, a hasznos tartalmakat, cikkeket pedig url-ezed..

**Profka** · 2014-05-14, 16:09

Elvileg javascripttel: window.history.pushState("object v string akarmi lehet","Title - Cím","\akarmi-uj-url.html");

**Akka** · 2014-05-14, 16:27

Profka eredeti hozzászólása

Elvileg javascripttel: window.history.pushState("object v string akarmi lehet","Title - Cím","\akarmi-uj-url.html");

WP az oldal, így mindenképpen valamiféle dinamikus megoldást keresek.

**0xFF** · 2014-05-14, 16:49

1. Minden tartalmi divhez hozza raksz valamit. pl

Kód:

data-changeurlto="url-amit-szeretnel"

2. Minden tartalmi divhez hozza adsz egy class-t pl change-url-on-appear
3. felteszed ezt a jQuery plugint : https://github.com/morr/jquery.appear
4. Raksz egy triggert.
5. Elkapod, hogy melyik element jelent meg.
6. Kilvasod changeurlto értéket.
7. Megnézed, hogy a böngészőben elérhető a history API
8. Ha igen akkor pusholod : history.pushState(null, null, $(elem).data('changeurlto'));

Aki ér hozzá kb 3 órás meló.

**Akka** · 2014-05-17, 11:33

0xFF listája és némi kutakodás/buherálás nyomán sikerült megcsinálni, amit szerettem volna.

Amivel most küzdök:
Szeretnék kitenni egy floating share részt is, ami görgetés közben az aktuális URL-hez igazodik a megosztások számát tekintve. Úgy, ahogy pl. itt is látható lefelé görgetve:
OCZ Storage Solutions Re-emerges as Toshiba Subsidiary

Az oldalamon most egy js figyeli a szkrollozást, és egy megadott div részt, és ettől függően mahinál az URL-lel. Az URL frissítésre nem lehet rátenni valahogy egy div rész, vagy egy js újratöltését?

Próbáltam a $.getScript-et is és a jQuery.get-et is, de egyikkel sem jutottam előbbre.

Itt az aktuális kódrész:

PHP kód:

 function initialise_Scrollspy(){
    // spy on post-divider - changes the URL in browser location, loads new post 
    jQuery('.post-divider').on('scrollSpy:exit', changeURL ); 
    jQuery('.post-divider').on('scrollSpy:enter', changeURL );
    jQuery('.post-divider').scrollSpy();
}
function [B]changeURL[/B](){
    var el = jQuery(this);
    var this_url = el.attr('data-url');
    var this_title = el.attr('data-title');
    var offset = el.offset();
    var scrollTop = jQuery(document).scrollTop();
    // if exiting or entering from top, change URL 
    if ( ( offset.top - scrollTop ) < 150 ) {
        curr_url = this_url;
        History.pushState(null, null, this_url );
        window.document.title = this_title;
    } 
    doAutoLoad();
}
function [B]doAutoLoad[/B](){
    // grab the url for the new post
    var post_url = jQuery('a[rel="prev"]').attr('href');
    if ( !post_url ) return;
    // check to see if pretty permalinks, if not then add partial=1
    if ( post_url.indexOf( '?p=' ) > -1 ) {    
        np_url = post_url + '&partial=1'
    } else {
        np_url = post_url + '/partial';
    }
    // remove the post navigation HTML
    jQuery(nav_container).remove();
    jQuery.get( np_url , function( data ) { 
        var $post_html = jQuery( '<hr class="post-divider" data-url="' + post_url + '"/>' +    data ); 
        var $title = $post_html.find( post_title_selector );
        jQuery( content_container ).append( $post_html );
        // get the HR element and add the data-title
        jQuery('hr[data-url="' + post_url + '"]').attr( 'data-title' , $title.text() );
        // need to set up ScrollSpy on new content
        initialise_Scrollspy();
    });

**Emphus** · 2014-05-17, 13:37

Most látom csak ezt a topicot. Régen én is ilyesmit kérdeztem, és Geri aánlotta a pjax nevű cuccot: https://github.com/defunkt/jquery-pjax .
JQuery alapon működik, és AJAX lekérések mellett tud URL változtatást is, ami is a fentebb írt pushStatet használja, de azért lehet jobb, mert már gyakorlatilag egy keretet ad a használatnak, és bejáratott cucc. Nekem szuperül muzsikált.

(Ref: http://entity.hu/javascript-ajax-jqu...las-js-el.html)