Pagination « à la Facebook » - commentaires Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2015-04-22T09:37:10Z https://files.spip.org/Pagination-a-la-Facebook#comment481471 2015-04-22T09:37:10Z <p>Salut,</p> <p>ça fonctionne aussi avec SPIP3, si des genTEs veulent ajouter ça à la compatibilité su coup...</p> <p>merci</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2011-10-17T18:00:55Z https://files.spip.org/Pagination-a-la-Facebook#comment450942 2011-10-17T18:00:55Z <p>Ok je viens de trouver (<a href="http://forum.spip.org/fr_210125.html" class="spip_url spip_out auto" rel="nofollow external">http://forum.spip.org/fr_210125.html</a>), commentaire #9 : il ne faut pas oublier la balise #INSERT_HEAD à insérer dans le Head, pour que le squelette charge les css et js nécessaires à Ajax.</p> <p>Suffit de le savoir…<small class="fine d-inline"> </small>!</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2011-10-16T17:33:41Z https://files.spip.org/Pagination-a-la-Facebook#comment450884 2011-10-16T17:33:41Z <p>Bonjour,</p> <p>J'essaye de mettre en place tout ça sur mon site : ça marche, sauf l'ajax justement<small class="fine d-inline"> </small>!<br class="autobr"> En gros le lien « Articles plus anciens » fonctionne, l'ancre fonctionne en plaçant la page sur le dernier article affiché mais c'est toute la page qui est rechargée et non en mode ajax.</p> <p>J'avoue que je ne comprends pas.<br class="autobr"> La class ajax doit-elle est créée en plus dans la feuille de style<small class="fine d-inline"> </small>? (j'ai essayé en l'ajoutant ou non dans mes styles, c'est pareil).</p> <p>Bref, si jamais quelqu'un a une piste… Je suis sans doute passé à côté de quelque chose.<br class="autobr"> Merci en tout cas pour le tuto super pédagogique :)</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-11-17T00:04:23Z https://files.spip.org/Pagination-a-la-Facebook#comment437022 2010-11-17T00:04:23Z <p>Merci pour cette chouette alternative aux bien pénibles « précédents-suivants »<small class="fine d-inline"> </small>!</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-09-24T21:24:18Z https://files.spip.org/Pagination-a-la-Facebook#comment434913 2010-09-24T21:24:18Z <p>ok merci<small class="fine d-inline"> </small>!</p> <p>super super super<small class="fine d-inline"> </small>!!!!!!!!!!</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-09-23T21:02:38Z https://files.spip.org/Pagination-a-la-Facebook#comment434871 2010-09-23T21:02:38Z <p>En effet, ça c'était pas clair, j'ai créé une boucle de comptage qui précède la boucle article décrite dans l'article</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code><B_comptage_articles> #SET{total_#ID_RUBRIQUE,#TOTAL_BOUCLE} <BOUCLE_comptage_articles(ARTICLES){branche}> </BOUCLE_comptage_articles></code></pre></div> <p>Je rajoute la variable #ID_RUBRIQUE dans le nom de la variable parce que j'utilise cette astuce plusieurs fois sur la même page. Si tu ne l'utilises qu'une fois, tu n'as pas besoin de cette bidouille<small class="fine d-inline"> </small>;)</p> <p>N'oublie pas de mettre un espace entre <br class="autobr"> <code class="spip_code spip_code_inline" dir="ltr"><BOUCLE_comptage_articles(ARTICLES){branche}></code></p> <p>et</p> <p><code class="spip_code spip_code_inline" dir="ltr"></BOUCLE_comptage_articles></code></p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-09-23T19:22:00Z https://files.spip.org/Pagination-a-la-Facebook#comment434868 2010-09-23T19:22:00Z <p>en fait c'est surtout une précision quand tu dis :</p> <p>Il faut rajouter dans la boucle « Articles » :</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>#SET{total,#TOTAL_BOUCLE}</code></pre></div> <p>dans l'exemple</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code><BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}> <h1[ (#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1> ... </BOUCLE_recents></code></pre></div> <p>par ex tu le places où<small class="fine d-inline"> </small>?</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-09-23T17:53:41Z https://files.spip.org/Pagination-a-la-Facebook#comment434862 2010-09-23T17:53:41Z <p>Ben en fait c'est le bout de code qui appelle la liste des articles...</p> <p>Ca remplace ça : <code class="spip_code spip_code_inline" dir="ltr"><p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]">Billets plus anciens</a><p></code> qu'on te donne dans l'article ci-dessus.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-09-23T16:54:56Z https://files.spip.org/Pagination-a-la-Facebook#comment434859 2010-09-23T16:54:56Z <p>Salut<small class="fine d-inline"> </small>!<br class="autobr"> Peux-tu preciser où dans la boucle article exactement<small class="fine d-inline"> </small>?<br class="autobr"> Merci</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-04-29T17:17:29Z https://files.spip.org/Pagination-a-la-Facebook#comment429964 2010-04-29T17:17:29Z <p>Je n'utilise pas du tout les #PAGINATION<i>precedent_suivant</i> comme il est indiqué dans les messages précédents.</p> <p>Voici le code utilisé :</p> <div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><h4>Publications précédentes</h4> <div id="ajaxe"> <BOUCLE_recents(ARTICLES){id_article!=31}{!par date}{#ENV{debut},#ENV{nb}}{0,20}> <!-- {id_secteur=2} --> #SET{total,#GRAND_TOTAL} [(#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]#PUCE<a href="#URL_ARTICLE" [title="Lire l'article : (#TITRE|textebrut|entites_html)"]>[(#TITRE|supprimer_numero|couper{50})]</a><br /> #SET{boucle,#COMPTEUR_BOUCLE} </BOUCLE_recents> <hr /> <!-- Test pour ne pas afficher le lien si 5 premiers articles affiches --> <div class="ajaxe-prec"> [(#GET{boucle}|=={5}|?{'',' '}) <a class="ajax" href="[(#SELF|parametre_url{debut,[(#ENV{debut}|moins{5})]})|parametre_url{nb,[(#ENV{nb}|moins{5})]})#more]" title="Les 5 articles précédents">Précédentes</a> ] </div> <!-- Test pour ne pas afficher le lien si dernier article affiche --> [(#GET{total}|=={#GET{boucle}}|?{'',' '}) <div class="ajaxe-next"> <a class="ajax" href="[(#SELF|parametre_url{debut,[(#ENV{debut}|plus{5})]})|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]" title="Les 5 articles suivants">Suivantes</a> </div> ] et on appelle tout cela via ceci : <INCLURE{fond=inc/inc-recentposts}{env}{debut=#ENV{debut,0}}{nb=#ENV{nb,5}}{ajax}></code></pre></div> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-04-29T14:42:24Z https://files.spip.org/Pagination-a-la-Facebook#comment429952 2010-04-29T14:42:24Z <p>Ajout : si tu regardes sur ma page : <a href="http://www.sden.org/" class="spip_url spip_out auto" rel="nofollow external">http://www.sden.org/</a> mon « précédent/suivant » est beaucoup moins classe que le tien :)</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-04-29T14:40:48Z https://files.spip.org/Pagination-a-la-Facebook#comment429951 2010-04-29T14:40:48Z <p>@guihard : comment as-tu fait pour virer l'ancre de pagination sur ton « précédent/suivant » de ta colonne de gauche<small class="fine d-inline"> </small>? Tu as utilisé <code class="spip_code spip_code_inline" dir="ltr">#PAGINATION{precedent_suivant}</code> ou tu as fait un « truc » à ta sauce<small class="fine d-inline"> </small>? Si c'est le cas, ça t'embête de partagé le code<small class="fine d-inline"> </small>? :D D'avance merci.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-04-29T14:07:34Z https://files.spip.org/Pagination-a-la-Facebook#comment429948 2010-04-29T14:07:34Z <p>Je ne saisi pas ton interrogation. Va voir ici ce que ça donne : <a href="http://fureurdunoir.free.fr/spip.php?rubrique41" class="spip_out" rel='nofollow external'>http://fureurdunoir.free.fr/spip.php?rubrique41</a> et dis moi moi ce qui ne te conviens pas.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2010-04-29T01:17:19Z https://files.spip.org/Pagination-a-la-Facebook#comment429923 2010-04-29T01:17:19Z <p>Mais du coup on ne voit plus les 5 premiers articles, non<small class="fine d-inline"> </small>? Finalement ça revient à faire ce que fait la pagination <code class="spip_code spip_code_inline" dir="ltr">#PAGINATION{precedent_suivant}</code> (le « précédent » en moins)<small class="fine d-inline"> </small>?</p> <p>Le problème est que l'ajax dans les inclure est fait pour recharger une partie de la page alors que ce que l'on cherche à faire ici c'est d'ajouter du contenu dans la page, ce qui n'est pas la même chose.</p> <p>Il y a surement une piste là : <a href="http://www.infinite-scroll.com/" class="spip_url spip_out" rel='nofollow external'>http://www.infinite-scroll.com/</a> (en anglais) voir le chapitre « <span lang="en">Custom trigger, non-automatic. Twitter-style »</span> avec un plugin jQuery.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-11-01T09:20:26Z https://files.spip.org/Pagination-a-la-Facebook#comment422398 2009-11-01T09:20:26Z <p>Petit correctif.</p> <p>Avant la boucle articles (si vous paginez des articles), il faut mettre la boucle suivante</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code><B_comptage_articles> #SET{total,#TOTAL_BOUCLE} <BOUCLE_comptage_articles(ARTICLES){id_rubrique}> </BOUCLE_comptage_articles></code></pre></div> <p>et enfin de boucle, pour le lien :</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>[(#GET{total}|<={#ENV{nb}}|?{'',' '})<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more_#ID_RUBRIQUE]">Articles plus anciens</a><p>]</code></pre></div> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-31T23:08:34Z https://files.spip.org/Pagination-a-la-Facebook#comment422387 2009-10-31T23:08:34Z <p>Bon en fait... c'est pas compliqué...</p> <p>Il faut rajouter dans la boucle « Articles » : <br class="autobr"> <code class="spip_code spip_code_inline" dir="ltr">#SET{total,#TOTAL_BOUCLE}</code></p> <p>et ensuite sur le lien, un test : <br class="autobr"> <code class="spip_code spip_code_inline" dir="ltr">[(#GET{total}|>={nb}|?{'',' '})<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more_#ID_RUBRIQUE]">Articles plus anciens</a><p>]</code></p> <p>C'était pas plus compliqué que ça et ça évite à mes visiteurs de me demander pouquoi il y a encore le lien quand ils sont arrivés au bout.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-31T22:38:10Z https://files.spip.org/Pagination-a-la-Facebook#comment422386 2009-10-31T22:38:10Z <p>Histoire de pousser le truc jusqu'au bout... vous auriez une idée pour faire disparaître le lien « plus d'articles » quand on est arrivé au bout le liste<small class="fine d-inline"> </small>?</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-26T11:11:48Z https://files.spip.org/Pagination-a-la-Facebook#comment422172 2009-10-26T11:11:48Z <p>OOps,</p> <p>j'ai oublié le bout de code de l'inclure</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code><INCLURE{fond=inc/inc-recentposts}{env}{nb=#ENV{debut,0}}{nb=#ENV{nb,5}}{ajax}></code></pre></div> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-26T11:09:21Z https://files.spip.org/Pagination-a-la-Facebook#comment422171 2009-10-26T11:09:21Z <p>J'ai troué une solution au problème de n'afficher que des paquets de 5 éléments, soit les 5 premiers (articles 1, 2, 3, 4 ,5), puis les articles 6, 7, 8, 9, 10 et ainsi de suite.</p> <p>Ce que j'ai fait, c'est d'ajouter une variable nommée <i>debut</i> qui est à 0 au début et incrémentée de 5 comme la variable <i>nb</i> via un deuxième paramètre passé dans l'appel ajax.</p> <div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code><BOUCLE_recents(ARTICLES){id_secteur=3}{id_article!=31}{!par date}{#ENV{debut},#ENV{nb}}> <p align="left"[(#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]>#PUCE<a href="#URL_ARTICLE">[(#TITRE|supprimer_numero|couper{50})]</a></p> </BOUCLE_recents> <p> <a class="ajax" href="[(#SELF|parametre_url{debut,[(#ENV{debut}|plus{5})]})|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]">Billets plus anciens</a> <p></code></pre></div> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T17:33:05Z https://files.spip.org/Pagination-a-la-Facebook#comment421749 2009-10-15T17:33:05Z <p>Et si le lien fait partie de ce que tu recharges<small class="fine d-inline"> </small>?</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T16:59:10Z https://files.spip.org/Pagination-a-la-Facebook#comment421747 2009-10-15T16:59:10Z <p>yep, j'ai essayé plus haut, plus bas, ça scrolle toujours dans un sens ou dans l'autre à moins que le h1 soit pile en haut du viewport quand on clique... j'imagine qu'on doit pouvoir relever la position de la page par rapport au haut et repositionner pareil, mais je ne sais pas faire. je crois que je vais enlever l'ancre pour que ça ne bouge plus (paradoxal), quitte à avoir une erreur :)</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T16:46:36Z https://files.spip.org/Pagination-a-la-Facebook#comment421744 2009-10-15T16:46:36Z <p>pour le nombre de billets à afficher au départ et à chaque voyage, c'est bien sûr adaptable aux besoins et aux envies de chacun, au besoin par CFG. chez moi de 5 en 5 ça me convient bien pour l'instant ^^</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T16:45:56Z https://files.spip.org/Pagination-a-la-Facebook#comment421743 2009-10-15T16:45:56Z <p>je crois que ton ancre s'affiche un billet trop haut. Du coup ça te fait peut-être revenir en arrière.<br class="autobr"> En vrai le cas sans scroll n'a pas été prévu, bonne remarque.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T16:45:13Z https://files.spip.org/Pagination-a-la-Facebook#comment421742 2009-10-15T16:45:13Z <p>réponse @ nicolas et @ fil</p> <p>j'y ai pensé, mais je n'ai pas trouvé comment faire. en effet on peut ne mettre que le lien dans l'inclure, et ajouter juste 5 billets de plus au-dessus avec ajax, mais si on clique une deuxième fois sur le lien, il va recharger tout à partir du 6<sup class="typo_exposants">e</sup> de toutes manières, non<small class="fine d-inline"> </small>?</p> <p>je vais essayer de trouver autre chose, vos idées sont les bienvenues<small class="fine d-inline"> </small>!</p> <p>et quoi qu'il en soit sinkiou pour les commentaires :) ça fait plaisir</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T16:34:39Z https://files.spip.org/Pagination-a-la-Facebook#comment421740 2009-10-15T16:34:39Z <p>hello</p> <p>merci, en effet l'ancre ne s'affichait pas, il y avait une boulette dans mon code (le détail de chaque post est dans un fichier inclus et j'avais un peu négligé de faire passer le compteur aux l'inclusions, ça risquait pas de marcher). maintenant elle s'affiche mais du coup ça scrolle un peu quand on affiche de nouveaux billets. bizarre, quand il n'y a pas d'ancre du tout dans le lien ça revient tout en haut du fichier inclus, et quand il y a un lien vers une ancre qui n'existe pas ça marche bien - excepté l'erreur javascript. comment faire pour que ça ne bouge pas sans erreur<small class="fine d-inline"> </small>?</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T11:52:35Z https://files.spip.org/Pagination-a-la-Facebook#comment421727 2009-10-15T11:52:35Z <p>Joli<small class="fine d-inline"> </small>!</p> <p>Comme souligné par Fil, ce serait plus judicieux de ne pas recharger ce qui est déjà là, si c'est possible. Charger les 5 suivants à la place du lien lui-même, par exemple.</p> <p>Cela éviterait du même coup le problème de déplacement dans la page.</p> <p>En tout cas, belle idée, bravo<small class="fine d-inline"> </small>!</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T11:06:14Z https://files.spip.org/Pagination-a-la-Facebook#comment421725 2009-10-15T11:06:14Z <p>Excellent.</p> <p>Petites critiques constructives : <br>- on recharge la partie déjà chargée, ça paraît inutile (mais c'est peut-être plus difficile à faire) <br>- à partir du moment où on clique c'est qu'on veut en voir plus, il faudrait en donner tout de suite pas mal plus (c'est idiot de cliquer pour 5 liens, puis 5 autres, puis 5 autres)</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T11:03:29Z https://files.spip.org/Pagination-a-la-Facebook#comment421724 2009-10-15T11:03:29Z <p>Non, je t'assure que sur <a href="http://another.teacher.free.fr/" class="spip_url spip_out auto" rel="nofollow external">http://another.teacher.free.fr/</a> il n'y a aucun <code class="spip_code spip_code_inline" dir="ltr">id='more'</code> dans le retour ajax, ce qui provoque d'ailleurs une erreur javascript lorsque SPIP essaye de se positionner dessus.</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T10:46:31Z https://files.spip.org/Pagination-a-la-Facebook#comment421722 2009-10-15T10:46:31Z <p>hello et merci :)</p> <p>l'ancre apparaît bien, mais elle est générée par ajax, tu ne peux pas la voir en affichant la source, seulement en affichant la source générée (avec web developer par exemple)</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T10:44:03Z https://files.spip.org/Pagination-a-la-Facebook#comment421721 2009-10-15T10:44:03Z <p>Yes bravo<small class="fine d-inline"> </small>!!!<small class="fine d-inline"> </small>!</p> Pagination «<small class="fine d-inline"> </small>à la Facebook<small class="fine d-inline"> </small>» 2009-10-15T09:36:21Z https://files.spip.org/Pagination-a-la-Facebook#comment421718 2009-10-15T09:36:21Z <p>C'est top<small class="fine d-inline"> </small>!<br class="autobr"> Il semble que sur le lien qui sert de démo il te manque le #more sur le h1 (il est bien indiqué sur le lien en revanche).</p>