[RÉGLÉ] Problème de compatibilité entre un menu en module personnalisé en JS et le Slideshow

[M0ka]

Bonjour,

Je n’avais pas posté de questions depuis longtemps, n’ayant pas eu de problèmes majeur jusqu’à maintenant.

Là, j’ai un problème de taille… J’ai créé un menu perso en HTML/CSS et JS pour une sélection de catégories grâce à une démo que j’ai beaucoup modifié.

Je l’intègre dans mon site en module personnalisé avec JCE, en éditeur de code, il apparait bien sur ma page à l’endroit voulu et fonctionnant très bien.

Le problème vient quand j’ajoute un slideshow, SlideShowCK en l’occurrence, ou un autre, j’ai fait le test. Il n’apparait tout simplement pas pour le CK et un autre bug (les images n’apparaissent pas).
Il y à donc une incompatibilité entre mon Javascript de menu et le slideshow. Si je dépublis mon menu je n’ai aucun problème.

Comment d’après vous puis-je résoudre ce problème ?
Comment intégrer mon JS sans qu’il interfère avec les codes de mon SlideShow ?

Merci à tous.

Code du menu téléchargeable ici

[kursus]

Re : Problème de compatibilité entre un menu en module personnalisé en JS et le Slide

Salut,

Premier truc à vérifier : un éventuel framework js (jquery ou autre) chargés deux fois, ou même plus, par les modules. C'est la cause la plus fréquente de conflits.
Il est plus simple de l'intégrer une bonne fois pour toute au template.

[XdiZ]

Re : Problème de compatibilité entre un menu en module personnalisé en JS et le Slide

Oui et regarder si y'a pas un conflit entre Mootools et jQuery aussi.
Essayez d'utiliser la librairie jQuery no conflict si vous pouvez.

Conseil : regarder votre console js du navigateur (CTRL + SHIFT + J) pour voir l'erreur

[kursus]

Re : Problème de compatibilité entre un menu en module personnalisé en JS et le Slide

Je viens de jeter un oeil à ton menu, effectivement le gros pavé de javascript c'est jquery...

Tu peux donc le retirer, vérifier que ton autre module n'inclue pas non plus jquery, et faire un appel propre depuis le head de ton template.

Pour aller plus loin, tu pourrais carrément virer tout le js de ton module pour refaire l'animation en css, c'est bien plus rapide et léger. Certes tes visiteurs sous IE6-9 ne la verront pas mais ils sont de moins en moins nombreux.

Voir ici pour une démo de ton menu recréé en css (pour un poids de 1ko, quand ton script+jquery dépassent les 50ko...)

http://codepen.io/anon/pen/gbJmd

[M0ka]

Re : Problème de compatibilité entre un menu en module personnalisé en JS et le Slide

Vous êtes juste magique !

Merci à tous pour votre participation, j’étais effectivement entrain de repartir sur une analyse de mon script en suivant vos indications mais le css sous cette forme répond à tous mes problèmes à la fois.

Merci tout particulièrement à kursus pour s’être embêté à recoder mon menu en css. Je ne connaissais ni codepen ni certains arguments css que tu as utilisé.
J’ai intérêt à rattraper mon retard…

Bonne soirée à tous !

[kursus]

Re : Problème de compatibilité entre un menu en module personnalisé en JS et le Slide

Codepen est un outil très sympa (dans la veine de jsfiddle) de l'ami Raphel Goetter, à qui l'on doit aussi alsacreations.com, excellent site su tu veux appronfondir css.