Paramétrage script jQuery scrollTo

[porcini]

Bonjour,
j’ai une page qui affiche une liste d’articles de la même catégorie sous forme de blog (gestion de menu -> type de menu -> Blog d’une catégorie).
Ces articles s’affichent en entier sur la page, car ils ne sont pas très longs et n’ont donc pas besoin d’avoir leur propre page pour s’afficher.
J’aimerai pouvoir cibler directement chaque article dans la page quand celle-ci s’affiche.
J’ai placé une ancre à chaque titre d’article et par la suite j’ai intégré via Sourcerer de Nonumber deux scripts jQuery: jquery.scrollTo pour le défilement de la page jusqu'à un élément du DOM et jquery.localScroll qui sert à défiler la page jusqu'à une ancre en utilisant l’hashtag de l'URL. Les deux scripts doivent opérer conjointement.
Le script fonctionne, mais je n'arrive pas à le paramétrer. Cela fait depuis quelques heures que j'essaye d'avoir le même affichage sur les différents navigateurs sans y parvenir: parfois la page s'affiche plus haut, parfois plus bas… pourtant il y a moyen de l'afficher correctement, car il y a quelques jours j'y suis parvenu… hélas j'ai perdu les bons paramétrages et là je galère sec

Voici un de mes paramétrages, mais le plugin offre d'autres options que j'ai essayé sans succès:

<script type="text/javascript" src="/templates/ecolife/js/min/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="/templates/ecolife/js/min/jquery.localScroll.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#museoScroll").scrollTo(0);
jQuery("#museoScroll").localScroll({
axis: 'y',
duration: 1000,
hash: true
});
});
</script>

... et voici deux articles de la même page qui utilisent l'hashtag:

http://test-scorrendo.scorrendoconilliri.it/beyond-the-road#museoScroll

http://test-scorrendo.scorrendoconilliri.it/beyond-the-road#laboScroll

Quelqu’un pourrait me donner un coup de pouce et me dire quelles seraient les options à utiliser pour avoir le même affichage sur les différents navigateurs?

Merci

[porcini]

Re : Paramétrage script jQuery

... bon apparemment l’ordre des options du plugin a un certain impact sur le résultat final (par ex. l'option hash: true doit être placé en premier lieu) et l’idée de placer les scripts dans Sourcer n’est pas trop conseillé, car étant une page avec plusieurs articles et chaque article ayant les scripts dans leur entête, ceux-ci sont chargés autant de fois qu’il y a d’articles (vu que c’est un affichage de type blog)… donc à mon avis ce n’est pas top.

La meilleure solution reste de placer les scripts dans la page générée par le menu, une chance que mon template me le permet.
Donc pour finir cela semble fonctionner moyennement bien, Safari restant le plus capricieux quand on rafraichit la page...
... mais je me pose toujours la question à savoir si j'ai utilisé toutes les options nécessaires pour le bon fonctionnement de ce plugin...

[PieceOfCake]

Re : Paramétrage script jQuery

Bonjour,

j'ai peut être pas tout à fait compris le bvut de ta manoeuvre, mais sans aucun script, tu peux faire en sorte que l'url :

http://www.monsite.com/pagedaccueil#ancre28

scrolle automatiquement jusqu'à la position de l'ancre : ancre28

c'est même le comportement par défaut je le fais régulièrement en ajoutant ce genre de paramètre en fin d'urls générées par JCE sans aucun souci

Cordialement

[ced1870]

Re : Paramétrage script jQuery

salut

parfois la page s'affiche plus haut, parfois plus bas…

oui c'est normal si ton script est appelé avant que tous les éléments du DOM soient chargés, alors leur position n'est pas la bonne

si je peux me permettre, je te proposerais de tester mon plugin Scroll To CK que j'ai développé justement pour faire des scrolls de page et j'ai déjà réglé certains de ces probèmes (il est gratuit)
CEd

[porcini]

Re : Paramétrage script jQuery

Bonjour à tous les deux
au fait si je suis arrivé au plugin scrollTo (combiné avec localScroll) c’est parce que avec une simple ancre au moment de l’affichage de la page le menu disparaît (en tout cas sous Firefox le menu disparaît, sous Safari la marge n'est pas respectée, il n'y a que sous Chrome que l'affichage est correct), donc en fouillant sur le web je suis tombe sur ce script qui me paraissait intéressant intégrer, mais quand je vois le temps que j’ai perdu à le paramétrer sans parvenir à réaliser ce que je veux, je me pose des questions si cela en vaut vraiment la peine.

Pour le moment j’ai désinstallé le script, je reviens aux vieilles habitudes avec une simple ancre, je voudrais juste comprendre pourquoi le menu disparaît…. je pense à un conflit CSS.

Cédric ton plugin tombe pil-poil
Quand tu dis "… c'est normal si ton script est appelé avant que tous les éléments du DOM soient chargés, alors leur position n'est pas la bonne", mais dans mon code j’ai bien placé

jQuery(function(){
    alert('jQuery est prêt !');
});

qui est une abbréviation de

jQuery(document).ready(function(){
  alert('jQuery est prêt !');
});

qui indique que le DOM est chargé…. à moins qu'il y ait quelque chose qui m'échappe…?

De toute façon je vais essayer ton plugin

[ced1870]

Re : Paramétrage script jQuery

jQuery(document).ready(function(){

ça indique que dès que le DOM est "prêt" ça y va, mais ça n'attends pas que tout soit chargé
il faut utiliser un

jQuery(window).load(function(){

, c'est plus long au démarrage suivant la lourdeur de la page, mais ça marche

sinon je pense qeu ton menu disparait car il détecte un mouvement de scroll pour s'activer, mouvement qui n'existe pas si tu pointes directement sur une ancre . Dès qeu tu bouges la page le menu revient
CEd

[porcini]

Re : Paramétrage script jQuery

...ah, je pensais que la méthode ready remplaçait load... donc load est toujours d'actualité...?

___

sinon je pense que ton menu disparait car il détecte un mouvement de scroll pour s'activer, mouvement qui n'existe pas si tu pointes directement sur une ancre . Dès que tu bouges la page le menu revient

... mais il n'y a pas de mouvement de scroll puisque comme tu dis je tombe directement sur l'ancre sous Chrome il n'y a pas ce souci...

ça indique que dès que le DOM est "prêt" ça y va, mais ça n'attends pas que tout soit chargé
il faut utiliser un

ou placer le script avant la fermeture de la balise </body>



Edit j'ai écrit méthode mais je pense que c'est plutôt une propriété

[ced1870]

Re : Paramétrage script jQuery

si tu testes mon plugin tiens moi au jus

[ced1870]

Re : Paramétrage script jQuery

PS : "ready" se lance avant "load" pour que tes scripts soient opérationnels au plus vite

[porcini]

Re : Paramétrage script jQuery

... je ne pense pas que dans mon cas je vais pouvoir utiliser ton plugin: mon lien de menu est de type "Blog d'une catégorie" j'ai plusieurs ancres à placer dans la page (à chaque article = une ancre) et je ne vois pas comment indiquer ces différentes ancres dans les options du menu...

[ced1870]

Re : Paramétrage script jQuery

en fait tu n'as pas de lien dans ta page qui pointe vers ces ancres? tu n'y fait appel que par l'url ? je ne vois pas l'intérêt ou alors j'ai pas compris ...

[porcini]

Re : Paramétrage script jQuery

tu n'y fait appel que par l'url ?

oui, les adresses URL avec l'ancre ne seront accessible que de l'extérieur, par ex. via les réseaux sociaux ou via email...

[ced1870]

Re : Paramétrage script jQuery

oui donc mon plugin ne marche pas vu que l'ancre dans ce cas ne fait pas partie du DOM ...
c'est une piste d'amélioration ...
pour ton histoire de menu, ajoutes juste un effet de scroll de 1px au chargement de la page, ce qui fera je pense apparaitre le menu.

tu as essayé avec le load sinon pour résoudre ton souci ? (j'avoue que je m'y perds ... lol)

[porcini]

Re : Paramétrage script jQuery

j'ai placé mes deux scripts du plugin dans la partie <head> et puis le script en lui-même il est placé avant la fermeture de la balise </body> avec la propriété load et ça marche nickel

http://www.scorrendoconilliri.it/beyond-the-road/attivita-culturali#museopiazza

Merci Cédric

[ced1870]

Re : Paramétrage script jQuery scrollTo

cool, faudra que je me penche sur ce script alors ...