Afficher / masquer des éléments (scriptaculous)

Logiciel & apps Programmation
1

Voilà on m’a recommandé cette librairie d’effets ajax pour faire un truc relativement simple : afficher / masquer des éléments d’une page, un peu comme sur l’accueil du forum clubic où on peut masquer nos topics préférés, les tags, etc etc etc.

Bon le soucis c’est que javascript c’est un langage auquel je suis psychorigide, autant j’arrives à percevoir la logique du php, autant le javascript ca me revient pas. Du coup je gallère à obtenir l’effet voulu…

Avec un peu de copier / coller depuis les exemples de scriptculous j’arrive à faire un lien pour afficher un élément, et un autre pour le masquer. Jusque là rien de compliqué :

<a href="#" onClick="new Effect.BlindUp('d1',{duration:1.5}) ; return false;">BlindUp</a> |
<a href="#" onClick="new Effect.BlindDown('d1',{duration:1.5}); return false;">BlindDown</a>
<div id="d1"><div style="overflow:hidden">bloc de texte</div></div>

Maintenant là où ca devient “tricky” pour moi : faudrait que mon div soit masqué dès le départ en fait. et faudrait aussi qu’un seul lien active les deux fonctions : ouvrir /. fermer.

Voilà, merci par avance pour l’assistance, je rame là :frowning:
Edité le 04/02/2008 à 10:38

2

dans le div il faut simplement mettre un
display: none

et dans le Effects de scriptaculous il n’y a pas un “ToggleBlind” ?

3

Si je mets display:none, ca affiche plus rien, ca bouge vaguement quand je clique, mais c’est tout.

4

Pour ta fonction :

function switchDisplay(id) {
   if(document.getElementById(id).style.display == "none") {
       document.getElementById(id).style.display == "block";
   } else {
      document.getElementById(id).style.display == "none";
}

Dans ta page :

<a href="#" onClick="switchDisplay('divCible')">BlindUp</a>

Puis tu rajoutes style=“display:none” dans ton div afin de la cacher des le debut
Edité le 04/02/2008 à 12:55

5

je vais tester :wink:

6

Ca fonctionne pas :frowning:

7

Montre nous ton code s’il te plait.

8

C’est le tiens strictement copié collé :smiley:

``` BlindUp
Lorem ipsum dolor sit amet
```

Et ton javascript dans un fichier javascript qui va bien ^^

9

Je me suis trompé dans la fonction, j’ai affecté via == au lieu de = :

function switchDisplay(id) {
   if(document.getElementById(id).style.display == "none") {
       document.getElementById(id).style.display = "block";
   } else {
      document.getElementById(id).style.display = "none";
}

Edité le 04/02/2008 à 16:02

10

Pas mieux :confused:

11

J’avais aussi oublié une accolade a la fin ca vient pas de ca ?

Je te colle mon code qui marche de mon cote :

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function switchDisplay(id) {
	if(document.getElementById(id).style.display == "none") {
		document.getElementById(id).style.display = "block";
	} else {
		document.getElementById(id).style.display = "none";
	}
}
//-->
</script>
</head>
<body>
<a href="#" onClick="switchDisplay('d1')">BlindUp</a>

<div id="d1" style="display:block">Lorem ipsum dolor sit amet</div>
</body>
</html>

Edité le 04/02/2008 à 16:11

12

ok ca fonctionne, par contre ca lag un bon coup quand on clique…

Je vais voir si j’arrive à utiliser ton truc conditionnel pour activer les fonctions de scriptaculous. Sinon en fouillant la doc pendant une réunion je crois avoir trouvé un “toggle”…

13

Ca lagge ?? :etonne2:
Etrange ton histoire.

Sinon est-ce que le résultat est celui recherché ?

14

Vouep c’est ce que je veux. Faut que j’arrive à intégrer l’effet kikoo de scriptaculous maintenant… faire des volets ^^

Ca lagge => ya une latence avant apparition quand je clique... ben vouais on a des PC de merde nous hein ^^
15

Oui mais à ce point la ! :o)
Edité le 04/02/2008 à 17:32

16

Vouais je sais pas… mais ca se sent bien qu’il y a une latence… vais tester sous fox.

Sinon pour le résultat recherché : même chose que la fonction afficher / masquer tes topics favoris à l’accueil du forum clubic !

C'est bien une couille liée à IE ! Sous fox ca fonctionne direct :(

gallère !

17

Le lag ? (Chuchote : Ca ne m’étonne pas :sarcastic: )

18

vouep le lag c’est que sur IE :confused:

19

Certainement un probléme d’interprétation … :confused:

20

Et:

var x = document.getElementById(id);
x.style.display = x.style.display == ‘none’ ? ‘block’:‘none’;

Ca sera pas plus rapide, mais bref.

Ta latence c’est de l’ordre de la seconde? ou?