visibilite d'un div

**benakacha** · 02/11/2009, 17h46

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

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

**E.Bzz** · 02/11/2009, 17h50

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

A+

**benakacha** · 03/11/2009, 08h40

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

**E.Bzz** · 03/11/2009, 09h21

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

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

Pourrais-tu ré-expliquer ?

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

A+

**benakacha** · 03/11/2009, 09h50

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

**E.Bzz** · 03/11/2009, 09h58

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

??

A+

**benakacha** · 03/11/2009, 10h17

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 )

**benakacha** · 03/11/2009, 12h41

bonjour

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

**E.Bzz** · 03/11/2009, 14h14

OK, alors il reste ça

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+

**benakacha** · 03/11/2009, 15h50

exactement sa si tu peut m'aider

**E.Bzz** · 03/11/2009, 16h15

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 :

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

clignote = setInterval(ta_fonction(), delai_en_millisecondes);

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

Code :

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

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 : Sélectionner tout - Visualiser dans une fenêtre à part
```
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+

**benakacha** · 03/11/2009, 16h50

franchement je pas compris le deuxième fonction
A+

**E.Bzz** · 03/11/2009, 17h08

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

Code :

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

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+

**benakacha** · 04/11/2009, 09h05

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

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

visibilite d'un div

JavaScript

Discussions similaires

Partager

Partager