Sujet Précédent Sujet Suivant

Je voudrais adapter un "accordéon javascript&

Résolu/Fermé
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 - 10 déc. 2008 à 15:10
 octo - 7 avril 2009 à 23:26
Bonjour,

je cherche à adapter l'accordéon javascript suivant:

http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

de manière à ce qu'il comporte 8 items et 8 contenus.

J'ai bien tenté de dupliquer un élément déjà existant (il y a des commentaires 'début de chaque item' et 'fin de chaque item) mais dès l'ajout d'un 4ième (il y en a 3 par défaut), ça ne fonctionne plus correctement.

Ne connaissant que très peu javascript, je ne comprends pas ce qui ne va pas.
Si quelqu'un avait une piste. Merci et bon après midi.

13 réponses

Réponse 1 / 13
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
11 déc. 2008 à 16:24
FREE na rien a voir la dedans !

voila 2 de mes sites sur free

RAD Zone

Aide CCM


pour ton accordeon
voila un exemple tout fais !
http://rad2.free.fr//ccm/tests/simple_accordions.rar
1
octo
7 avril 2009 à 12:57
Bonjour RAD , peux tu me dire comment tu fait pour ajouter plus de barre à ton menu deroulant moi j'ai 5 barre donc 2 de plus que sur l'exemple officiel mais la 4 et 5 ne fonctionne pas ??????
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360 > octo
7 avril 2009 à 13:05
telecharge mon exemple http://rad2.free.fr//ccm/tests/simple_accordions.rar

il y as 6 niveaux !! donc tu verras ce que j ai fais !
0
octo > RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024
7 avril 2009 à 15:50
Super ça fonctionne merci beaucoup mais j'ai encor un soucis ! si tu peux m'aider ?
Je suis entrain de faire une matrice en me servant du fameux menu deroulant.
Dans le DIV <div class="accordion_child"> je veux placer une photo de 200x200
J'ai appliqué le code ci-dessous qui fonctionne sous firefox mais qui bug sur IE voir un exemple ici :
http://www.anjocreatif.com/matrice/vertical2/ 

<div id="test1-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	    	  <div class="ombre">
    <div class="boite"><img src='images/image_testb.png' align='left'></div> 
    </div>
Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan. es mauris augue non arcu. Donec et sem nec libero viverra accumsan.    </div>
  </div>
<!--End of each accordion item-->


Peut tu m'aiguiller? merci
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360 > octo
7 avril 2009 à 16:14
Si ton image et a la bonne taille 200 200 met la en background de tes div boite et pour chaque boite

image2 pour div boite2 , image3 pour boite3 ect ! 

.boite {
	position:relative;
	bottom:6px;
	right: 6px;
	background: url (images/image1 .jpg);
	height: 200px;
	width: 200px;
  }



ou tu donne des tailles a ton images 

<img src="images/image .jpg" width="200" height="200" />


0
octo > RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024
7 avril 2009 à 16:39
J'ai deja essayé cette option de background dans IE l'image disparait!
0
Réponse 2 / 13
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 avril 2009 à 16:08
si ton image et a la bonne taille 200 200 met la en background de tes div boite et pour chaque boite

image2 pour div boite2 , image3 pour boite3 ect ! 
.boite {
	position:relative;
	bottom:6px;
	right: 6px;
	background: url (images/image1 .jpg);
	height: 200px;
	width: 200px;
  }


ou tu donne des tailles a ton images 
<img src="images/image .jpg" width="200" height="200" />
1
Réponse 3 / 13
afrodje Messages postés 759 Date d'inscription mardi 13 mars 2007 Statut Membre Dernière intervention 22 janvier 2014 168
10 déc. 2008 à 16:34
Regarde ce lien http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

Puis va dans demo pour voir le menu
0
Réponse 4 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
11 déc. 2008 à 10:39
Ah merci, ça fonctionne, enfin seulement quand je reste sur la page de démo.

J'essaie depuis ce matin d'intégrer l'accordéon sur mon site mais le javascript ne fonctionne pas ... pourtant, j'ai bien réparti les fichiers .js comme ils l'étaient dans la démo, j'ai copié le div de l'accordéon à l'emplacement ou il doit se situer sur mon site, avec la css qui correspond, j'ai copié le script mais ça ne change rien ...

help, j'y suis presque je le sens ^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
11 déc. 2008 à 12:26
Bon et bien finalement, j'ai reconstruis ma page autour du composant et ca fonctionne. Mais bon, c'est pas très productif lol.
0
Réponse 6 / 13
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
11 déc. 2008 à 13:38
Bon et bien finalement, j'ai reconstruis ma page autour du composant et ca fonctionne. Mais bon, c'est pas très productif lol.???????????

SALUT

il est pourtant facile a mettre en place !!

il suffis juste de donner une id differente a chaque div que tu ajoute !

exemple 
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
    <div id="basic-accordian">
      <div id="tonchoix-header" class="accordion_headings header_highlight">Home
      </div>
      <div id="tonchoix-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br />Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
      </div>
      <div id="tonchoix1-header" class="accordion_headings">About Us
      </div>
      <div id="tonchoix1-content">
        <div class="accordion_child">Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
      </div>
      <div id="tonchoix2-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix2-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix3-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix3-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix4-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix4-content">
        <div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
      </div>
      <div id="tonchoix4-header" class="accordion_headings">Downloads
      </div>
      <div id="tonchoix5-content">
      </div>
    </div>
  </body>


RAD
0
Réponse 7 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
11 déc. 2008 à 14:57
C'est bien ce que je dis, je suis une bille en javascript, c'est l'occasion de m'y mettre ^^. Merci pour ces infos en tout cas, bon après midi.

Aie ... et quand je mets en ligne, voilà que ça déconne encore grr.
0
Réponse 8 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
11 déc. 2008 à 16:00
Une idée me vient à l'esprit: webdevelopper sur firefox et j'ai remarqué 1 chose.

En local, sur mon pc, aucune erreur javascript n'est signalée (d'ailleurs, ca fonctionne très bien).
Sur le serveur distant par contre, j'ai 3 erreurs récurrentes:

- jQuery is not defined (alors qu'elle est bien déclarée dans les pages concernées entre balises <script> </script>)
- jQuery("#list1a").accordion is not a function (a comprends pas ... lol)
- Permission refusée d'appeler la méthode Location.toString

Est-ce encore une facétie de l'hébergeur Free ? Comment contourner ses problèmes ?
0
Réponse 9 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
11 déc. 2008 à 16:36
Ah, merci pour les liens, je vais avoir de quoi farfouiller lol.

Ce qui m'agace c'est qu'en local, c'est nikel, par contre dès que je passe en ligne, ça coince.

J'ai d'ailleurs essayé de mettre ce site sur noos et ca marche pas plus, je pensais que free aurait pu être en cause car il parait que les fils d'info ne fonctionnent pas sur free pour un site joomla par exemple. Je vais aussi essayer de mettre un fil sur noos et voir si c'est moi qui suis noeu-noeud lol
0
Réponse 10 / 13
cricri2394 Messages postés 150 Date d'inscription samedi 30 septembre 2006 Statut Membre Dernière intervention 13 janvier 2015 1
12 déc. 2008 à 11:55
a marche cette fois, merci mr RAD
0
Réponse 11 / 13
math 2000 Messages postés 2605 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
7 avril 2009 à 16:11
mieux vaut tard que jamais
0
Réponse 12 / 13
octo
7 avril 2009 à 22:58
Quelqu'un aurai une soluce à mon problem avec IE?? merci
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 avril 2009 à 23:01
pourquoi ! si tu donne un taille fixe IE ne le prend pas ???????
<img src="images/image .jpg" width="200" height="200" />
0
octo > RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024
7 avril 2009 à 23:04
Oui lorsque je passe l'image en bakground elle disparait dans IE
0
Réponse 13 / 13
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 avril 2009 à 23:07
non la je ne parle pas en background !! mais les images dans le html 
<img src="images/image .jpg" width="200" height="200" />
0
octo
7 avril 2009 à 23:26
Merci pour ton aide et tes sites qui sont d'une aide précieuse

j'ai réussi à corrigé le bug de IE, apparement cela venait de la position relative
.boite {
position:relative;
bottom:6px;
right: 6px;
height: 200px;
width: 200px;
}
maintenant j'ai un décalage sans padding contre le texte!
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Commande chargeur Apple
Minouche -
Utilisateur anonyme -

4 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Problème de pilote qualcomm atheros qca9377 wireless network adapter
Saly972 -
billmaxime -

52 réponses
Excel ajustement auto taille de la cellule
Mélanie -
Elisabeth -

22 réponses