Lorsqu’on clique sur un lien qui mène vers une ancre dans la même page et que le navigateur « saute » brutalement jusqu’à cette ancre, le visiteur perd la notion de l’endroit où il se trouve et ne visualise pas la structure globale de la page. En termes d’ergonomie c’est assez mauvais, et on attend le navigateur qui trouvera la solution.
Dans l’immédiat, chacun peut améliorer cela sur son propre site SPIP. Le plugin Ancres douces fait une chose (et une seule) : il transforme toutes les ancres (<a href="#xxx">) des pages en « ancres douces », où le navigateur fait défiler doucement la page jusqu’à l’ancre. Ainsi le lecteur sait en permanence où il se trouve dans la page, et peut plus facilement remonter, etc.
On peut voir ce plugin en action sur le site des blogs du Monde diplo (cliquer sur « XX commentaires » ou sur les appels de note, par exemple).
Ce plugin est une intégration à SPIP de deux scripts jQuery d’Ariel Flesler, avec lesquels il est possible de faire plein d’autres jolis scrolls (voir les démos) :
— localScroll
— scrollTo
Restreindre ancres_douces à certains blocs
Si vous utilisez d’autres scripts javascripts utilisant aussi les ancres (par exemple un slider jquery), il est possible que des interférences se produisent avec ancres_douces.
Pour éviter ces interférences, il est nécessaire d’indiquer sur quel bloc ou quels types de blocs on veut restreindre le fonctionnement de ancres_douces.
Pour cela, on doit définir dans mes_options.php la constante « CONTEXTE_ANCRES_DOUCES ».
Exemple :
- Pour restreindre au bloc d’id contenu (convient sur un grand nombre de squelettes spip ) :
define ('CONTEXTE_ANCRES_DOUCES','#contenu');
- pour restreindre à tous les éléments de classe « ancres_douces »
define ('CONTEXTE_ANCRES_DOUCES','.ancres_douces'); Bugs connus :
- fonctionne mal avec Opera. (corrigé en 1.2)
Discussions par date d’activité
36 discussions
Salut les copains,
Le plugin « ancres douces » me pose des soucis.
Quand on clique sur un
lien vers une note de bas de page sur un site normal et qu’on retourne en arrière dans son
navigateur avec le clavier (alt+gauche ou retour arrière sous Windows, je n’ai pas de mac sous la main mais je crois me rappeler qu’on a le même type de combinaison), on remonte dans la page à l’endroit qu’on vient de
quitter. Tout ça obéit à la mécanique classique du navigateur : le #ancre est considéré comme l’emplacement suivant de l’historique.
Avec « ancres douces », on dirait qu’il part du principe que je n’ai pas
quitté l’endroit que je suis en train de lire (un
return falseen JS). Donc un backme fait partir... à la page précédente. (même s’il remplace à partir
du # dans l’URL, en réalité je suppose que c’est juste une astuce dans l’objet URL courant, mais ça ne
« déplace » pas réellement le navigateur d’un coup vers l’avant dans son
historique —cette dernière remarque est une educated guess, comme on dit quand on veut frimer).
Arglü.
Ce n’est pas stratégique mais pour les niais comme moi qui font tout au
clavier, c’est très déstabilisant/inconfortable.
Répondre à ce message
On m’a demandé d’intégrer cet effet à mon site, mais je me rend compte qu’il ne fonctionne pas dans une div qui a un style de débordement « overflow : auto ; » il n’y a aucune erreur, cependant la page reste immobile le temps de l’animation (1 seconde) et saute directement à l’ancre de ma page. Je tiens à préciser que si je retire la propriété overflow, l’animation marche sans problème. (spip 1.9.2.e + plugin jquery192).
Quelqu’un aurait-il une solution pour faire cohabiter mon style au plugin ?
Répondre à ce message
Salut,
Est-ce qu’il faut une version minimale de jQuery, et donc de SPIP, pour que ça tourne ?
Je m’explique : pour SPIP 1.9.2 (avec jQuery 1.1.), le plugin ne fonctionne pas chez moi et les ancres sont même désactivées. Avec jQuery à jour (1.2.6), ça roule.
Me trompe-je ? Auquel cas je ne vois pas d’où le problème peut venir.
Cela dit j’ai par ailleurs sur Safari (Mac) un comportement étrange : les ancres sont désactivées, ou renvoient en haut de page avant de redescendre vers le lien appelé... (SPIP 1.9.2 avec jQuery 1.2.6.). Mais j’ai ce comportement uniquement sur mes squelettes, pas sur les blogs du diplo ni sur spip-contrib... Aucun problème sur Firefox 3.
Est-ce que ça peut venir d’un problème de structuration de la page ?
Bon, en tout cas le bout de code de ZiWam ci-dessous/dessus (tiens, au passage, l’affichage par défaut des forums sur contrib par date et non par fil est un peu déroutant) résout le problème sous safari... sais toujours pas où ça coinçait. Merci !
S’il est avéré que les ancres ne fonctionnent décidemment pas sous SPIP 1.92 et son jQuery 1.1.1, alors il est possible d’installer une mise à jour vers jQuery 1.2.6 avec ce plugin.
À tester.
Répondre à ce message
Avec la version 1.0 (et IE, Firefox, Safari), qand je clique sur une ancre de note, ça m’amène effectivement à la note correspondante doucement, cependant si je clique ensuite sur le bouton « précédent » du logiciel client web, il ne se passe rien, l’affichage reste centré sur la note de bas de page.
Répondre à ce message
aahhh, c’est génial ! Merci :)
Répondre à ce message
Est-ce que ça marche avec Squelette S5 Slide Show ?
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
