Comment appliquer ce code

**piero53** · 02/02/2010, 16h30

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 :

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

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

puis :

Code :

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

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

Merci

**SpaceFrog** · 02/02/2010, 16h37

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

**piero53** · 02/02/2010, 17h10

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.

**SpaceFrog** · 02/02/2010, 17h18

Dans le callback de la fonction toggle il suffit de modifier en alternance le contenu

**piero53** · 02/02/2010, 17h35

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

**SpaceFrog** · 02/02/2010, 20h54

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

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
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>

**le_chomeur** · 02/02/2010, 21h37

sinon en méga simple : http://mbox.tuxfamily.org/toggle/

**SpaceFrog** · 03/02/2010, 08h45

oui fillot mais ça gère pas l'alternance ...

**piero53** · 03/02/2010, 09h13

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...

**SpaceFrog** · 03/02/2010, 09h23

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 ...

**le_chomeur** · 03/02/2010, 09h30

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

Comment appliquer ce code

JavaScript

Discussions similaires

Partager

Partager