Panneau réductible mal utilisé [Résolu]

[Timor35]

Bonjour, je débute en script et je suis actuellement en stage au sein d'une entreprise ou je m'occupe de quelques modifs du site web.

Ainsi mon patron veut que j'ajoute un bouton Fiche Technique a une page, qui lorsque l'on l'active en cliquant, déplace la "vue" de la page vers le bas en activant un panneau réductible qui est déjà sur le site.

J'ai donc fait ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<div id="bouton_fiche_technique">
<div class="CollapsiblePanelTab" tabindex="0">
<a href="http://www.truc.com/php/fr/page.php#FicheTechniqueProduit" onClick="cliquer()" >Fiche technique</a></div>
 
<script type="text/javascript">
function cliquer(){
var CollapsiblePanel = new Spry.Widget.CollapsiblePanel("FicheTechniqueProduit", {contentIsOpen:true});}
</script>
</div>  </div>
 
        <div id="Texteproduit">
   	  <h1>Blablabla ....</h1>
      	<p class="PrésentationProduit">...<br/><br/>
		...</p>
        <p class="DimensionsProduit">  ...</p>
      </div></div>
 
 
<div id="FicheTechniqueProduit" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0"">+ FICHE TECHNIQUE</div>
  	<div class="CollapsiblePanelContent">
MODE D'EMPLOI, etc...
</div></div>
 
 
<script type="text/javascript" src="../../js/slider_produits/jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="../../js/slider_produits/jquery-ui-1.8rc3.custom.min.js"></script>
<script src="../../js/panneau_spry/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("FicheTechniqueProduit", {contentIsOpen:false});
</script>
<?php include 'footer_fr.php'; ?>

Ainsi, lorsque l'on clique sur le fiche technique en haut de page, l'utilisateur est dirigé plus bas vers la page, vers la fiche technique qui s'ouvre dans un panneau qu'il est possible de refermer en cliquant sur le "+ Fiche Technique".

J'espère que vous suivez^^ Ceci donne:
http://www.vidamecreation.com/php/fr...rts_photos.php

Mais comme vous pouvez le voir, si après avoir refermé le panneau, l'utilisateur veut le réouvrir, le footer se remet "sur" la fiche technique. Je pense que mon bug est dans le {contentIsOpen:false} mais je ne vois pas.

Merci d'avance.

[the-destroyer]

Salut !

Si j'ai bien compris c'est un problème d'affichage nan ?

Mais tout marche bien chez moi, sous Firefox et IE l'affichage est nickel

J'ai mal compris le problème ?

[Timor35]

Salut the-destroyer, merci pour ta réponse.

En fait, le problème survient de cette façon:

- Après avoir utilisé le bouton Fiche technique du haut, le panneau se déroule et la vue de l'utilisateur est placée. ->OK

- Puis en cliquant sur le " + FICHE TECHNIQUE" (le bouton du bas donc, vu que je me retrouve avec 2 boutons fiche technique sur la page), le panneau se "ré-enroule". ->OK

Et a partir de ce moment, si l'utilisateur veut ré-ouvrir la fiche technique, parce qu'il n'a pas bien vu le nombre de vis fournie par exemple, ça cafouille. Le panneau se déroule et se ré-enroule aussitôt, etc... -> pas OK.

Le cafouillage survient donc lorsque l'on active ces boutons une deuxième fois. Si tu as le courage de jeter un oeil, merci d'avance.

[the-destroyer]

D'accord je vois où est le problème j'avais pas vu '

Bon j'ai essayer de m'y retrouvé avec firebug mais c'est assez compliqué ^^'

Le problème c'est que lorsque tu ouvres le panneau avec "div#bouton_fiche_technique" la fonction qui ouvre le panneau n'est pas averti qu'il est maintenant ouvert, pour lui il reste fermé, d'où le bug d'affichage, il essait de l'ouvrir mais il est déjà ouvert mais, si tu attributs la fonction de "+ Fiche Technique" (div#FicheTechniqueProduit) a "Fiche technique" (div#bouton_fiche_technique), les deux fonctions d'ouverture étant les même il ne devrait pas y avoir de problème d'affichage car pas de confusion entre l’état de div#ficheTechniqueProduit (ouvert ou fermé), essait et tu me dis ce que ca donne (je sais pas si j'ai etais clair )

[NoSmoking]

Bonjour,
si l'on observe ton code on trouve tout d'abord

Code :

1
2
3
4
<script type="text/javascript">
function cliquer(){
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("FicheTechniqueProduit", {contentIsOpen:true});}
</script>

relatif au premier Fiche technique, puis plus loin

Code :

1
2
3
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("FicheTechniqueProduit", {contentIsOpen:false});
</script>

qui initialise le deuxième Fiche technique.

Il y en a un de trop!

Lorsque tu cliques sur le 1st boutton tu recrées un new CollapsiblePanel mettant par le fait en "délicatesse" celui crée à l'initialisation de la page et ce qui en découle.

Dans la démarche il te faut créer le new CollapsiblePanel puis pour ton 1st Bouton, gérer si celui ci est fermé ou ouvert et agir en conséquence.

Il existe la méthode sOpen qui renvoie justement l'état du panel.

Ta fonction cliquer() pourrait ressembler à cela

Code :

1
2
3
4
5
6
7
8
function cliquer(){
  var oPanel = typeof( CollapsiblePanel1) !== 'undefined' ? CollapsiblePanel1 : null;
  if( oPanel){
   if (oPanel.isOpen())
    oPanel.close();
   else
    oPanel.open(); 
}

la première ligne est là uniquement pour vérifier que si le panel n'a pas encore été constuit un click sur le 1st bouton ne fera pas planter le reste du script.

[Timor35]

Youpi, ça marche, merci les gars.
Maintenant y'a juste la vue qui est mal "redirigée" du coup, je vais voir ça.
merci encore.
ça donne donc: http://www.vidamecreation.com/php/fr...rts_photos.php

[Timor35]

Bon ben c'est réglé, post résolu grace a vous, merci!