Problème menu accordéon jquery

Bonjour,

Après avoir bien suivi votre tutoriel pour créer un menu à l'aide Jquery, je me retrouve avec un problème.

En effet, pour un affichage correct des liens, la partie html du menu doit figurer sur une page précise et non dans une page annexe qui serait appelée par un include ou iframe.

Car l'ensemble du menu : appel jquery + code javascript + menu html sont dans une page séparée aucun soucis, celui ci s affiche correctement mais les liens ne s'affichent pas où il faut pour les besoins de mon site.

J'ai donc tenté de mettre tout le code dans la page désiré et là, le fait d'appeler la fonction jquery fait bugger tout mon site, en effet, le contenu de toutes les parties du menu s'affiche les uns en dessous des autres et non chacun dans sa rubrique comme cela est visible (http://*/*******.fr).

J'ai testé tout un tas de solution mais je n'arrive pas à régler le problème. Quand j'essaie d'isoler l'appel de jquery dans une autre page .js ou .htm, cela ne fonctionne pas ou la même chose se produit.

En espérant que j'aurais expliquer le plus clairement possible mon problème. Vous trouverez ci-dessous, le lien pour voir le site avec le menu qui fonctionne mais ou les liens s'affichent dans la partie droite du site et non la gauche, ce que je souhaiterais faire.


Je pourrais, si cela est utile, mettre le code du menu dans la partie ou je souhaite la mettre, pour voir le problème qu'il se pose.

Je ne suis pas un expert comme vous pourrez le constater mais merci pour votre aide.
Modifié par ChuTn3Y87 (03 Dec 2008 - 23:29)

Bonjour,

ChuTn3Y87 a écrit :
En effet, pour un affichage correct des liens, la partie html du menu doit figurer sur une page précise et non dans une page annexe qui serait appelée par un include

Le code du menu peut tout à fait être écrit dans un fichier différent qui serait inclus lors de la génération de la page par la fonction include en PHP, un équivalent avec d'autres langages, ou encore des Server-Side Includes.

ChuTn3Y87 a écrit :
ou iframe

Par contre oui, le menu ne doit pas être dans une page séparée et affichée via une iframe.

Attention à ne pas confondre le mécanisme des iframes et les include PHP ou technologies équivalentes. Il s'agit de deux choses très différentes.

Merci pour ta réponse,

Je ne penses pas que tu es compris mon problème car celui ci n est pas très simple a expliqué.

Sur le lien ci-après : http://****.fr

tu comprendras maintenant le probleme. Tout le code est sur la meme page et dès que

<script type="text/javascript" src="jquery-1.2.1.js"></script>

est sur cette page, cela affiche toutes les rubriques les unes en dessous des autre ce qui ne me convient pas du tout.

Quelle serait la solution pour avoir la partie html sur la page voulu mais en ayant l'appel de jquery qui fonctionne correctement ?

Merci
Modifié par ChuTn3Y87 (03 Dec 2008 - 23:28)

ChuTn3Y87 a écrit :
Sur le lien ci-après : http://ajph.free.fr/test/v2/dotclear/index2.php
tu comprendras maintenant le probleme.

Malheureusement non. Quand je regarde la page en question:
- si JavaScript est activé, le menu en accordéon est totalement invisible;
- si JavaScript est désactivé, le menu en accordéon est visible et (ce qui est logique) totalement déplié.

ChuTn3Y87 a écrit :
cela affiche toutes les rubriques les unes en dessous des autre

Qu'est-ce que «les rubriques» dans ta page? Quels liens, quels éléments HTML sont concernés?
Je vois une série d'intitulés (Joueur du mois, adhésion, le coin du droit) qui sont affichées les unes à côté des autres, et donc pas les unes sous les autres.
Si j'affiche la page en désactivant JavaScript, je vois donc, en plus, un menu en accordéon déplié, et effectivement les différents liens sont les uns en dessous des autres, et c'est normal car c'est prévu comme ça.

Une remarque générale: je ne comprends pas du tout l'agencement des contenus sur les pages de ce site. C'est extrêmement confus. C'est normal car en chantier, ou bien cela a mal été pensé? Dans le deuxième cas, je ne saurais trop conseiller de se rabattre sur une structure de page classique du type en-tête, menu à gauche, contenu à droite. Ou bien en-tête, menu horizontal sur toute la largeur, et contenu en dessous sur toute la largeur. Voir par exemple du côté des gabarits de page.

Florent V. a écrit :


Qu'est-ce que «les rubriques» dans ta page? Quels liens, quels éléments HTML sont concernés?
Je vois une série d'intitulés (Joueur du mois, adhésion, le coin du droit) qui sont affichées les unes à côté des autres, et donc pas les unes sous les autres.
Si j'affiche la page en désactivant JavaScript, je vois donc, en plus, un menu en accordéon déplié, et effectivement les différents liens sont les uns en dessous des autres, et c'est normal car c'est prévu comme ça.

C'est en fait le contenu des rubriques (joueur du mois, adhésion....etc) qui s'affiche l'un en dessous des autres dès que je le code javascript est sur la page voulu. Si le menu est isolé dans un fichier différent et appelé, tout s'affiche correctement sauf les liens qui ne s'affichent pas dans la partie gauche. Donc le fond du problème est pourquoi l'appel de jquery dans le fichier qui gere la partie droite dérègle l'affichage des rubriques.

Florent V. a écrit :

Une remarque générale: je ne comprends pas du tout l'agencement des contenus sur les pages de ce site. C'est extrêmement confus. C'est normal car en chantier,

C'est en cours de construction mais l'agencement différent est désiré. Je comprends que cela puisse surprendre.

Encore merci du temps que vous m'accordez.

ChuTn3Y87 a écrit :
C'est en fait le contenu des rubriques (joueur du mois, adhésion....etc) qui s'affiche l'un en dessous des autres dès que je le code javascript est sur la page voulu.

C'est à dire que tous les contenus de toutes les rubriques s'affichent en même temps sur la même page si tu inclues la bibliothèque jQuery? Ça me semble hautement improbable; d'ailleurs je n'ai pas pu constater ce comportement. Si c'est tout de même le cas, alors ça n'a normalement rien à voir avec JavaScript, mais plutôt tout à voir avec les contenus que tu génères (en PHP ou via un moteur de template s'il s'agit d'un CMS) pour une page donnée.

ChuTn3Y87 a écrit :
Donc le fond du problème est pourquoi l'appel de jquery dans le fichier qui gere la partie droite dérègle l'affichage des rubriques.

Je crois que le fond du problème est plutôt que la partie PHP/Template + HTML + CSS n'est pas maitrisée. Ça me semble impossible qu'un simple appel d'une librairie puisse causer autant de problèmes, y compris l'affichage de contenus pas censés se trouver dans la page. Selon moi le problème est en amont, soit du côté de HTML et CSS, soit plus haut encore du côté du code côté serveur.

Florent V. a écrit :

C'est à dire que tous les contenus de toutes les rubriques s'affichent en même temps sur la même page si tu inclues la bibliothèque jQuery? Ça me semble hautement improbable;

C'est exactement le problème. Je vais donc réaliser des test du coté des CSS car le code php est minime sur la page.

J'ai deja bien avancé si je sais que le problème ne peut a priori pas venir de Javascript.

Encore merci.

C'est dingue, je ne trouve pas la solution, dès que l'appel a jquery est formulé, la mise en forme du site se dérègle.

Auriez-vous une piste des choses qui pourraient poser problème en CSS ou HTML ?

J'ai fais quelques test mais sans succès pour le moment, je désespère. Le php dans la page concerné est minime et ensuite je ne trouve pas de probème au niveau css ou html.

Merci si vous pouvez me donner une piste.

Merci de ne pas me laisser tomber.... je désespère !

On ne va pas pouvoir te dégoter une solution miracle. Ton problème est, pour commencer, pas super bien défini. Tu inclues une bibliothèque et la mise en page est modifiée? Mais personne ici à part toi ne sait à quoi doit ressembler la mise en page, ni si tu as constaté des problèmes avec tous les navigateurs ou seulement quelques uns, etc. Ensuite, l'appel d'une bibliothèque ne modifie jamais la mise en page. Il peut éventuellement permettre à des scripts basés sur cette bibliothèque de modifier la page (styles des éléments, arbre DOM, etc.), par contre. Donc le problème serait plutôt du côté des scripts utilisant la bibliothèque que de l'appel de la bibliothèque.

Bon alors soyons méthodiques. Il faut travailler par couches.

1. On vire tout ce qui est JavaScript (jQuery, Ajax, machintruc...) et CSS, et on travaille uniquement sur du code HTML sans mise en forme. Objectif: s'assurer que le bon code HTML, correspondant aux contenus à afficher, est bien généré, que les liens sont fonctionnels, et que le code HTML est valide (utiliser le validateur du W3C). On pourra aussi supprimer la déclaration XML qui ne sert à rien et qui fait buguer IE6.

2. On rajoute la couche CSS. On testera bien sûr la mise en page obtenue avec les différents navigateurs. Et bien sûr le code CSS doit être valide, de même que le code HTML s'il a été modifié.

3. On rajoute enfin la couche JavaScript, en commençant par inclure la libraire JS si on en utilise une, puis on travaille script par script, on vérifie le fonctionnement de chaque script, on guette les erreurs JS (via la console d'erreurs du navigateur par exemple, ou des outils comme Firebug), etc.

Merci pour ta réponse pédagogique ! Mais j'ai enfin trouvé la solution !!
il y avait bien un problème au niveau de l'appel de jquery :

J'ai remplacé :

$(document).ready()

Par :

jQuery(function($)

qui serait la version raccourci de la déclaration qui assurerait que tout le code qui suit sera exécuté.

En vous remerciant encore une fois pour votre aide. et peut être que ma solution rendra service à qqun.

Cordialement.

Message en trop, merci de l'effacer !
Modifié par ChuTn3Y87 (03 Dec 2008 - 23:29)