Comment appliquer ce code

Version imprimable

02/02/2010, 16h30
piero53

Comment appliquer ce code
Bonjour,

j'aimerai appliquer le code de ce tuto, mais je n'y arrive pas.:?

http://www.chrismanciero.com/sliding-js.aspx#

Le vertical me convient.

J'inclue bien le fichier js :

Code:

<script type="text/javascript" src="VerticalSlide.js"></script>

puis :
Code:

1 2 3 4 5 6 <script type="text/javascript"> function makeSlide(objName) { new VerticalSlide(objName); } </script>
comme indiqué sur la page.

Mais comment faire fonctionner ce code? Il faut créer une balise <div> mais après?

Je me doute que la solution n'est pas très compliqué, mais je suis débutant en javascript:P

Merci
02/02/2010, 16h37
SpaceFrog

t'as plus vite fait de mettre jquery et l'effet slidetoggle
http://api.jquery.com/slideToggle/
au moins c'est plus clair ...
02/02/2010, 17h10
piero53

Ca fonctionne donc bien pour afficher.

Mais est-ce-que je peux faire un truc du genre :

Alterner l'affichage de 2 textes différents, et non afficher et cacher un seul texte.
02/02/2010, 17h18
SpaceFrog

Dans le callback de la fonction toggle il suffit de modifier en alternance le contenu
02/02/2010, 17h35
piero53

Dans le callback ? C'est-à-dire?

Car en fait, j'ai un tableau, ou j'affiche dynamiquement avec un foreach mes entrées.

Et ce que j'aimerai, c'est afficher un résumé des lignes (ça je fais ça avec une fonction php) puis en cliquant sur un bouton, agrandit la ligne du tableau pour tout afficher(tout le texte de la ligne)...

Sauf que je me rends compte, avec cette solution, dès que je cliquerai sur un bouton, il m'affichera le texte entier de toutes mes lignes,et non pas de la ligne souhaitée:?

le callback est la fonction lancée après l'action jquery,

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:400px; }
  </style>
<script type="text/javascript" src="http://jquery.com/src/jquery-svn.js"></script>
<script type="text/javascript">
var up=true   
var pair=true
 
   $(document).ready(function() {
    $('#two').hide()
    $("button").click(function () {
      $("div").slideToggle("slow",function(){if(up){toggledisplay();};up=!up});
    });
 
   });
 
 
function toggledisplay(){
if(pair){
   $('#one').hide()   
   $('#two').show()
   }
else{
   $('#one').show()   
   $('#two').hide()
  }
  pair=!pair;
  } 
 
</script>
 
</head>
 
<body>
	<button>Toggle</button>
  <div>
  <p id="one">
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>  
    <p id="two">
    Bravo ! le contenu à changé et changera encore !!!
    essayez de masquer de nouveau ce paragraphe
  </p>  
 
  </div>
 
</body>
</html>

02/02/2010, 21h37
le_chomeur

sinon en méga simple : http://mbox.tuxfamily.org/toggle/
03/02/2010, 08h45
SpaceFrog

oui fillot mais ça gère pas l'alternance ...
03/02/2010, 09h13
piero53

merci SpaceFrog pour ton code, mais pour afficher l'autre texte il faut d'abord cliquer pour l'effacer puis afficher l'autre (une étape en trop quoi).

Après il faut que j'arrive à différencier les lignes de mon tableau (que j'affiche avec un for), car sinon toutes les lignes s'agrandiront lorsque je cliquerai...
03/02/2010, 09h23
SpaceFrog

Bon ben quand tu arriveras a exprimer clairement l'ergonomie que tu souhaites, repasse nous en informer ...
La tu distilles au compte goutte ...
Et je n'avais pas assez d'economies pour me payer une boule de cristal au plasma, j'ai tout juste pu me payer celle au sodium, mais elle n'est pas assez puissante pour sonder ton esprit ...
03/02/2010, 09h30
le_chomeur

et cette version : http://mbox.tuxfamily.org/accordeon/#