Discussion :

[DrWilly]

Bonjour a tous !

Depuis peu je me suis mis à implémenter un peu d'Ajax dans mon site pour le rendre plus attractif mais je rencontre une petite difficulté pour bien gérer les effets.

Pour faire simple, j'ai une série d'article avec uniquement le titre qui s'affiche et quand je clique sur ce titre, le contenu apparait en glissant vers le bas grace à "toggle".

Jusque là tout va bien. Voici le script que j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script>
  <?php
    echo '$("#js_fx_titre' . $donnees['id'] . '").click(function(){';
    echo '$("#js_fx_contenu' . $donnees['id'] . '").slideToggle("slow")';
    echo '});'; 
  ?>
</script>

Ce script se trouve dans la boucle qui affiche mes articles. La variable $donnees['id'] contient ainsi à chaque fois l'id de l'article en cours d'affichage. (pas sûr que ce soit la bonne méthode de mélanger comme cela javascript et php mais ça marche).

Mais j'aimerai maintenant que un seul article puisse être affiché à la fois c-a-d que lorsque l'utilisateur clique sur le titre d'un article, celui-ci s'ouvre en glissant vers le bas, mais qu'alors l'article qui était ouvert se ferme en glissant vers le haut ! je m'exprime bien ?

Pour y arriver je comptais faire une condition du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
for(toutes les div concernées){
  if(la propriété css "display" != "none"){
    exécuter le toggle
  } 
}

Mais comment effectuer cette instruction ?
Comment tester une propriété css ?

Merci beaucoup !

[michel.bosseaux]

Syntaxe javascript :

tondiv.style.display

[danielhagnoul]

Bonsoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(this).css("color","red");

[Kerod]

le code donné par danielhagnoul sert à attribuer une valeur à une propriété CSS. Pour récupérer la valeur il te suffit d'utiliser le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).css("color");

[DrWilly]

Effectivement ça marche ! Merci beaucoup !

Le problème, c'est que mon analyse était trop simpliste et je n'arrive donc toujours pas à appliquer le toggle sur l'article déjà ouvert.

En gros, c'est cette instruction de mon pseudo code que je n'arrive pas à implémenter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for(toutes les div concernées){
  // condition et code
}

Je rappel que le nom de mes div sont "#js_fx_titre + Id_de_l_article" et "#js_fx_contenu + Id_de_l_article" où Id_de_l_article est évidement l'id de l'article contenu dans les div.

Il faudrait que quand je clique sur un titre, le contenu s'affiche avec toggle, mais le contenu de l'article qui était déjà ouvert, lui, se ferme (également avec toggle)

Comment pouvoir retrouver l'article déjà ouvert ?

Merci !

[Kerod]

C'est simple

• soit on se dit
  
  • On garde en mémoire l'identifiant de l'article ouvert (je dis bien id article et non celui du div) ;
  • On modifie la propriété css
  • on fait un slideDown sur l'article à afficher
• soit se dit
  
  • l'article ouvert on lui attribue un nom de classe bidon mais qui servira comme jeton, du style open ou on
  • A l'affichage d'un autre article, on fait un display: none sur tous les éléments de classe open
  • On affiche le nouvel article sélection et on lui attribue la classe open

A creuser

[DrWilly]

J'aime beaucoup ta deuxième solution !
J'vais essayer d'implémenter tout ça puis je vous fait part de mes résultat.

See you soon

[DrWilly]

Voici une solution fonctionnelle.
Dites moi si c'est un peu trop tiré par les cheveux ou si c'est clairement optimisable.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
<?php   
echo '
  $("#js_fx_titre' . $donnees['id'] . '").click(function(){                                                                                             
    if($("#js_fx_contenu' . $donnees['id'] . '").hasClass("off")==true){
      $(".on").slideUp("slow");
      $(".on").removeClass("on").addClass("off");
      $("#js_fx_contenu' . $donnees['id'] . '").removeClass("off").addClass("on");
      $("#js_fx_contenu' . $donnees['id'] . '").slideDown("slow");
    }
    else{       
      $("#js_fx_contenu' . $donnees['id'] . '").removeClass("on").addClass("off");
      $("#js_fx_contenu' . $donnees['id'] . '").slideUp("slow");
    }
  });
'; 
?>
</script>

Merci pour l'aide !

[Kerod]

Il y a qu'un seul ou plusieurs ??

[DrWilly]

Un seul ou plusieurs quoi ?

[Kerod]

article ?
parce que j'ai l'impression que ton code est pour un article spécifique
Si tu fais ça il va falloir déclarer le même code pour tous les articles

[DrWilly]

Effectivement ce code est pour un seul article !
Il est placé dans la boucle qui affiche les articles et est donc répété autant de fois qu'il y a d'article dans la base.

Chaque script est spécifique à un seul article. 5 articles -> 5 scripts qui diffèrent juste par l'ID de l'article.

...c'est ça qui est un peu tiré par les cheveux en fait ^^

Y a-t-il un moyen de transformer ce code pour que je puisse le sortir de la boucle mais qu'il puisse tout de même marcher pour tout les articles ?

merci !

[Kerod]

Un peu de HTML pour l'article ?

Ce que je demande c'est le code HTML visible par le navigateur (afficher code source) et uniquement celui d'un article.

[DrWilly]

Le code HTML pour un seul article donne ceci (en simplifié, certaines Div semblent ne servir à rien ici) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div id="js_fx_titre40">					
  <div class="article_bloc_titre">
    <div class="titre_contenu">		
      <a id="ancre_titre" href="javascript:void(0)">Ici, titre article (ID:40)</a><br>						
    </div>
  </div>	
</div>
<div id="js_fx_article40" class="on">					
  <div class="article_contenu">	
  Ici, contenu article.			
  </div>	
</div>
 
<script>
  $("#js_fx_titre40").click(function(){												
    if($("#js_fx_article40").hasClass("off")==true){
      $(".on").slideUp("slow");
      $(".on").removeClass("on").addClass("off");
      $("#js_fx_article40").removeClass("off").addClass("on");
      $("#js_fx_article40").slideDown("slow");
    }
    else{	
      $("#js_fx_article40").removeClass("on").addClass("off");
      $("#js_fx_article40").slideUp("slow");
    }
  });			
</script>

Quand on regarde la page avec tous les articles, c'est clair que ça fait un gros pâté de Javascript un peu partout...

Une idée pour optimiser tout ça ?

[Kerod]

Voici un code à essayer mais il doit encore avoir moyen d'optimiser.
Attention j'ai pas testé mais ça devrait déjà faire certaines choses.
JavaScript à mettre qu'une seule fois dans le fichier et si possible pas avec du PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
    $(document).ready(function() 
    {
        $(".entete_article").click( function() {
            var classe = $(this).attr("id");
            $(".on").slideUp(function() { $(".on").removeClass("on"); } );
            $("." + classe).slideDown("normal", function() { $("." + classe).addClass("on"); } );
        });
    });
</script>

Et le code HTML pour que ça fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="article" id="js_fx_titre40">                    
  <div class="article_bloc_titre">
    <div class="titre_contenu">        
      <a id="ancre_titre" href="javascript:void(0)">Ici, titre article (ID:40)</a><br>                        
    </div>
  </div>    
</div>
<div id="js_fx_article40" class="js_fx_titre40">                    
  <div class="article_contenu">    
  Ici, contenu article.            
  </div>    
</div>

[DrWilly]

Ca marche !
Pour ceux que ça intéresse, voici le code PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$reponse = mysql_query('SELECT * FROM article WHERE type=0 ORDER BY id DESC');
                        
$num_article=0;
while ($donnees = mysql_fetch_array($reponse) ){
        echo '<div class="titre_article" id="js_fx_titre'. $donnees['id'] . '">';       ?>                   
	  <div class="article_bloc_titre">
		<div class="titre_contenu">    <?php    
                        echo '<a id="ancre_titre" href="javascript:void(0)">' . $donnees['intitule'] . " " . $donnees['id'] . "</a><br>";       ?>
		</div>
	  </div>    
	</div>	<?php
        echo '<div id="js_fx_article'. $donnees['id'] . '" class="js_fx_titre'. $donnees['id'] . '">';  ?>                  
	  <div class="article_contenu">    		<?php
                        echo $donnees['introduction'];  ?>
	  </div>    
	</div>
<?php
}
?>

Il reste quelques ajustements à faire.
Entre autres, il faut que les articles soit fermés au chargement de la page sauf le premier, et il faut que lorsqu'on clique sur un article déjà ouvert, celui-ci se ferme.

La clef, c'est la fonction $(this).attr("id") qui permet de récupérer l'ID sans devoir passer par le php comme je le faisait avant. C'est génial !

Je posterais les ajustements plus tard.
Merci beaucoup !