visibilite d'un div

Version imprimable

visibilite d'un div

bonjour,
je travail sur un exemple simple de javascript
qui permet a chaque clique sur le bouton changer de changer le div
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body> <p id="un" > Bonjour </p> <p id="deux" style="display:none"> Au revoir </p> <input type=button value="Changer" onclick=" if(document.getElementById('deux').style.display == 'none'){ document.getElementById('un').style.display = 'none'; document.getElementById('deux').style.display = 'block'; } else { document.getElementById('un').style.display = 'block'; document.getElementById('deux').style.display = 'none'; } "> </body>
maintenant je cherche comment sont clique sur le bouton la visibilité de div et sera changer automatiquement l'un bonjour ensuite Au revoir
c.a.d sont utiliser le onclick

02/11/2009, 17h50
E.Bzz

Bonjour,
"sans utiliser onclick", d'accord, mais qu'est-ce qui doit déclencher le changement d'affichage alors ?
Un timer ?

A+
03/11/2009, 08h40
benakacha

bonjour,
c'est le même travail en va déclenché l'action par onclick mais lorsque en laisse le bouton elle reste changer automatiquement
03/11/2009, 09h21
E.Bzz

Citation:

Envoyé par benakacha

c'est le même travail en va déclenché l'action par onclick mais lorsque en laisse le bouton elle reste changer automatiquement

:koi:
Je suis désolé : pas compris ...

Pourrais-tu ré-expliquer ?

Tant que tu restes cliqué sur le bouton ça doit continuer à changer ?

A+
03/11/2009, 09h50
benakacha

Tant que tu restes cliqué sur le bouton ça doit continuer à changer ?
non c'est pas sa !!
j'espère que le script qui déjà envoyer et claire
donc en va changer un peut dans le fonctionnalité de ce script ;
comment ?
1-le 1 er clique elle va changer si par exemple le div et bonjour elle va changer Au revoir
2- le deuxième clique si le div et bonjour en va change la visibilité de bonjour visible en suite invisible (comme alarme 'bonjour' ' ') elle va reste changer sons comme sa automatiquement
3-le 3 ème clique elle va changer si elle est par exemple bonjour elle va changer Au revoir
4-le 4 ème clique le même système en va changer la visibilité de Au revoir
5- elle va changer bonjour etc....
03/11/2009, 09h58
E.Bzz

Donc :
Bonjour => clic => rien => clic => Au revoir => clic => rien => clic => Bonjour => Etc .

??

A+
03/11/2009, 10h17
benakacha

mais non !! ;(
écoute si te peux m'aider a faire un boucle d'affichage de div
clic=> change( bonjour -> au revoir )=>clic=> changer( au revoir , ' ' mais ici si en laisse sont clique elle va reste changer automatiquement )

bonjour
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body> <p id="un" > Bonjour </p> <p id="deux" style="display:none"> Au revoir </p> <input type=button value="Changer" onclick=" if(document.getElementById('deux').style.display == 'none'){ document.getElementById('un').style.display = 'none'; document.getElementById('deux').style.display = 'block'; } else { document.getElementById('un').style.display = 'block'; document.getElementById('deux').style.display = 'none'; } "> </body>
ce code faire l'action (1)
(1)on voit "bonjour", on clique ==>"au revoir",on clique ==> "bonjour"

mon objectif maintenant et de
on voit "bonjour",on clique ==>"au revoir"
on clique ==>("au revoir" visible : "au revoir" invisible),
on clique ==> "bonjour"

c'est quoi ("au revoir" visible : "au revoir" invisible):
donc le "au revoir" sera affiché et caché automatiquement (système alarme)

03/11/2009, 14h14
E.Bzz

OK, alors il reste ça

Citation:

Envoyé par benakacha

on clique ==>("au revoir" visible : "au revoir" invisible)

que tu détailles après.

Est-ce que ça veut dire :
quand on clique sur "bonjour" => "au revoir" s'affiche en fixe
puis
si on clique sur "au revoir" quand il est fixe => "au revoir" se met à clignoter ( = alarme ?)
puis si on clique sur "au revoir" alors qu'il clignote => on repasse à "bonjour" (fixe)

?? :?

A+
03/11/2009, 15h50
benakacha

exactement sa si tu peut m'aider :ccool:
03/11/2009, 16h15
E.Bzz
Et bien, tu as déjà la partie qui permet d'afficher soit un div, soit l'autre.

Pour le clignotement, il te suffit de créer une 2° fonction (plus simple : elle fait la même chose, mais uniquement avec le div "au revoir"). Pour le clignotement, il suffit d'utiliser l'instruction

Code:

clignote = setInterval(ta_fonction(), delai_en_millisecondes);

clignote récupère la référence au timer.
Tu utiliseras

Code:

clearInterval(clignote)

pour interrompre ( = détruire) le clignotement.

Ainsi tu as tout ce dont tu as besoin :
- en testant quel div est visible, tu sais si tu en es à "au revoir" ou "bonjour" (donc quoi faire ensuite)
- en testant l'existence du timer
  
  Code:
  
  if (clignote) { ...
  
  , tu sauras si tu dois le lancer ou l'interrompre (si il n'existe pas tu le lances, et si il existe, tu l'arrêtes et tu affiches le div "bonjour") ...
A+
03/11/2009, 16h50
benakacha

franchement je pas compris le deuxième fonction
A+

La fonction elle-même est toute simple (sauf qu'il vaut mieux utiliser visibility que display, il me semble)
Code:

1 2 3 4 if(document.getElementById('div_au_revoir').style.visibility == 'hidden') document.getElementById('div_au_revoir').style.visibility = 'visible'; else document.getElementById('div_au_revoir').style.visibility = 'hidden';
C'est cette fonction que tu dois appeler avec setInterval(), comme indiqué ci-dessus.

A+

bonjour
j'ai travailler avac cette methode mais lorsque en change elle reste l'autre a clinote

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
 
 
<script type="text/javascript">
 
var bonjourOUbonsoir=0 ;
 
function ecrireBonjour()
{
 
 
 
 
	       if(document.getElementById('un').style.visibility == 'hidden')
		   document.getElementById('un').style.visibility = 'visible';
		   else
		   document.getElementById('un').style.visibility = 'hidden';
 
 
}
 
function ecrireBonsoir()
 
{ 
 
	if(document.getElementById('deux').style.visibility == 'hidden')
   document.getElementById('deux').style.visibility = 'visible';
   else
   document.getElementById('deux').style.visibility = 'hidden';
 
}
 
function bonjour()
{
	setInterval('ecrireBonjour()',1000);
}
 
function bonsoir()
 
{
	setInterval('ecrireBonsoir()',1000);
 
}
 
function test()
 
{
	alert(bonjourOUbonsoir);
 
 
	if(bonjourOUbonsoir)
	{
		bonjourOUbonsoir=0;
		bonjour();
	}
		else
		{
			bonjourOUbonsoir=1;
			bonsoir();
		}
 
}
 
</script>
 
</head>
 
<body>
<div id="left" style="left: 400px; top: 9px; width: 350px; height: 350px"> 
<p id="un" style="visibility:hidden">
Bonjour 
</p>
<p id="deux" style="visibility:hidden">
Au revoir 
</p>
</div>
<br/>
<input type=button value="Changer"
onclick= test() >
</body>
</html>