Infinite scrolling pour mobile - Version imprimable +- Forum CMS Made Simple FR (https://www.cmsmadesimple.fr/forum) +-- Forum : Ressources (https://www.cmsmadesimple.fr/forum/forum-4.html) +--- Forum : Développement et Astuces (https://www.cmsmadesimple.fr/forum/forum-15.html) +--- Sujet : Infinite scrolling pour mobile (/thread-3171.html) |
Infinite scrolling pour mobile - snatch1974 - 03/04/2014 Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~ travaillant sur un petit simple assez simple avec un responsive design, je voudrais, pour les mobiles, utiliser la technique de l'infinite scrolling, ce qui me permettrait de supprimer le menu (1 seul niveau) et d'avoir tout le contenu du site sur une seule page verticale. Est-ce que quelqu'un a déjà utilisé ce genre de méthode pour me filer un ou deux tuyaux pour récupérer le contenu de chaque page? Comment je voyais les choses... une seule page d'accueil avec un script jquery qui calcule la hauteur du contenu. Une fois le scroll arrivé en bas de ce contenu, un appel ajax qui charge le contenu du prochain node à la suite du contenu précédant. Le script calcule alors la hauteur du contenu 1 + 2 et on recommence... arrivé en bas, on charge le node 3 et ainsi de suite jusqu'à ce que l'entièreté du site soit affiché. Méthode pensée... Une udt qui récupère le contenu de chaque node dans un boucle et assign ce contenu à des variables du style $page1, $page2, $page3... ainsi qu'un variable qui comptabilise le nombre total de page {$n_pages} et qui servira de référence dans la fonction js pour savoir si il y'a autre chose à afficher. Le js lui mesure la hauteur de $page0 (accueil) une fois arrivé en bas, il insère $page1 à la suite tout connement et fais l'addition de la hauteur de $page0 + $page1 pour savoir quand afficher la $page3. une fois l'intégralité des pages insérées ($n_pages atteint), il affiche le footer. Est-ce à votre avis un procédé viable? Un tuyau pour faire l'udt qui va boucler tous les nodes et en récupérer le content? merci Infinite scrolling pour mobile - snatch1974 - 03/04/2014 En attendant conseils et astuces, j'ai un peu avancé sur le truc... Trouver le nombre de pages est finalement pas compliqué puisque la balise {$count} me donne le nombre de pages (nodes) avoir l'id de chaque page non plus puisque qu'une simple boucle me donne les id de toutes les pages: {foreach from=$nodelist item=foo} id: {$foo->id}<br /> {/foreach} il ne me reste plus qu'à récupérer le contenu qui correspond à chaque id... là ça commence à coincer! Infinite scrolling pour mobile - bess - 03/04/2014 sans faire d'udt : un javascript qui charge la première page, attend que tu touche le fond du site et charge la page suivante. la liste des page à chercher peut être alimentée par menumanager + un template menumanager minimaliste qui retournerait un tableau d'url par exemple le contenu des pages (sans leur gabarit du coup) se fait en appelant l'url d'une page cmsms avec le paramètre &showtemplate=false (test sur une page de nos démos site pour voir) le javascript ? et bien ma foi il doit en exister des tout prêt ! https://www.google.fr/search?q=javascript+infinity+load Infinite scrolling pour mobile - snatch1974 - 05/04/2014 Merci Bess, tu m'as aiguillé sur la bonne voie... Je n'ai pas utilisé utiliser le menumanager, j'ai quasiment tout réglé en jquery et avec quelques balises smarty bien pratiques. Le fonctionnement: Je crée un array js dans lequel je mets toutes mes urls. Je vérifie le viewport (à - de768px, ma sidebar est cachée, au dessus elle est visible). - si la sidebar est cachée (- de 768px) j'enlève tout le contenu et je charge à la place le contenu de ma page d'accueil (dans le cas où on accèderait au site par l'url d'une autre page) - si la sidebar est visible(+ de 768px), on touche à rien. Je surveille le redimensionnement de la fenêtre. - si la largeur passe en-dessous de 768px (sidebar cachée), j'enlève le contenu existant, je charge le contenu de la page d'accueil et initialise l'offset. - si il repasse au dessus de 768px (sidebar visible), j'enlève le contenu existant, je remets le contenu d'origine et réinitialise les variables. (tout ça pour que ça fonctionne de la même façon quelque soit l'url de la page) Je surveille le scrolling quand mon viewport est inférieur à 768px (sidebar cachée). - quand on arrive au niveau du footer, je charge la page suivante à la suite du contenu existant et mets à jour les variables. Tout fonctionnement correctement à part un petit truc... cggooglemap n'affiche rien quand on appel son contenu par ajax (ReferenceError: google is not defined) Va falloir trouver un moyen d'y palier... Code inséré dans mon gabarit: Code : {literal} Vous pouvez voir le résultat... Si quelqu'un a une idée pour cette map, ou une d'idée d'optimisation je suis preneur :p Infinite scrolling pour mobile - snatch1974 - 06/04/2014 Voilà le code définitif, si ça peut rendre service à quelqu'un... la map, fonctionne bien maintenant grace à l'emploi du module cggooglemap2 au lieu du 1. Code : [== Indéfini ==] Infinite scrolling pour mobile - bess - 06/04/2014 Citation :Je crée un array js dans lequel je mets toutes mes urls. menumanager aurait été plus approprié je maintiens Infinite scrolling pour mobile - snatch1974 - 06/04/2014 Comment ça? Où si situe la différence? Si ça peut simplifier le truc ça m'intéresse forcément Infinite scrolling pour mobile - bess - 07/04/2014 liste des pages manuellement = manuellement liste des pages via menu manager = dynamique Je sais pas toi mais moi la différence me saute aux yeux... Ne t'arrête pas au fait que tu as besoin d'un array Javascript d'un côté et que tu as du smarty de l'autre. Smarty n'est qu'un interprétateur de template. Tu peux tout a fait lui faire cracher du HTML, du CSS ou du Javascript ! Code : var $var = new Array({foreach $items as $item}"{$item->alias}" ,{/foreach}); Infinite scrolling pour mobile - snatch1974 - 07/04/2014 ok, on est d'accord sur le manuellement et dynamiquement. Code : var url=[]; tu changes foo par item et on est quasiment sur la même mise en array, non? c'est du dynamique des des 2 cotés. j'aurais pu l'écrire comme ça: Code : {/literal} ce qui est plus optimisé, je le concède... je l'ai d'ailleurs modifié. j'ai quand même testé avec menumanager par acquis de conscience. {foreach $items as item} retourne une erreur de syntaxe, {foreach} nécessite forcément un from, non? Infinite scrolling pour mobile - bess - 07/04/2014 pas obligatoire depuis la version 3 de smarty http://www.smarty.net/docs/en/language.function.foreach.tpl par contre c'est {foreach $nodelist $foo}, j'avais fait une faute. Je corrige mon post précédent Infinite scrolling pour mobile - snatch1974 - 07/04/2014 Ah, ben voilà un nouveau truc d'appris au niveau de foreach, en plus c'est simplifié au niveau des propriétées @total, @index et autres... |