Printable View
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.
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..
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.Idézet:
Profka eredeti hozzászólása
1. Minden tartalmi divhez hozza raksz valamit. pl
2. Minden tartalmi divhez hozza adsz egy class-t pl change-url-on-appearKód:data-changeurlto="url-amit-szeretnel"
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ó.
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();
});
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)
Igen, ezt sikerült megoldani. A megosztások számának aktualizálása az, amivel most küzdök.Idézet:
Emphus eredeti hozzászólása