onMouseOver, delai, cacher du texte

Version imprimable

Bonjour,
Voila j'utilise un script que j'ai trouvé sur ce site(section sources javaScript)
Code:

1 2 3 4 5 6 7 8 9 10 11 function affCache(idDiv) { var div = document.getElementById(idDiv); if (div.style.display == "") div.style.display = "none"; else div.style.display = ""; } <input type="button" onclick="affCache('div1');" value="affCache('div1')"/> <div id="div1"> </div>
Le problème c'est que j'aurais aimé qu'au chargement de ma page tout soit caché... et qu'on les découvre en cliquant sur le bouton.
J'ai essayé via le css, en mettant display none mais ensuite même en cliquant sur les boutons rien ne s'affiche :cry:

J'ai voulu remplacer le onclick par onMouseOver, le problème c'est que j'ai l'impression qu'on ne peut mettre de délai pour l'ouverture... car la c'est trop rapide :P

Merci a vous

17/07/2008, 12h34
E.Bzz

Bonjour,

Citation:

Envoyé par line86

J'ai essayé via le css, en mettant display none mais ensuite même en cliquant sur les boutons rien ne s'affiche :cry:

Il faut remplacer les "" par "block"

Pour le délai :

Code:

setTimeout(ta_fonction(), delai_en_ms);

A+
17/07/2008, 12h52
Auteur

bonjour,

Citation:

Le problème c'est que j'aurais aimé qu'au chargement de ma page tout soit caché...

dans ce cas dans la CSS écris display:none pour que tous les éléments soient cachés dès le chargement de la page (cela évitera l'éventuel appel à une fonction qui cachera les éléments les uns après les autres).
17/07/2008, 14h31
line86
Merci beaucoup pour vos réponses :D
Donc j'arrive à "les" cacher au chargement mais il me reste des petits problèmes :oops: je suis débutant donc ... :oops:

J'ai rajouté dans mon css
#div1 {
display:none;
}
Le problème c'est que je peux avoir un nombre différent de div...
Il n'y a pas comme l'étoile :P pour lui dire tout ce qui finit par n"importe quoi... lol

Et je n'arrive pas a utiliser
Code:

1 2 setTimeout(ta_fonction(), delai_en_ms);
Je l'ai testé ainsi mais sans résultat :oops:
Code:

1 2 3 <input type="button" setTimeout(onmouseover="affCache('div1')",1000) value="nom"/> <input type="button" onmouseover=setTimeout("affCache('div1')",1000) value="nom"/>
Merci beaucoup pour votre aide!!
17/07/2008, 14h36
E.Bzz

Citation:

Envoyé par line86

Le problème c'est que je peux avoir un nombre différent de div...

Dans ce cas, mieux vaut utiliser une class (CSS) que tu affecteras à chacun des div concernés ...

Pour le problème de syntaxe :

Code:

<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>

A+
17/07/2008, 14h38
Bovino

Code:

<input type="button" onclick="setTimeout(affCache('div1'),1000)" value="Texte_du_bouton" />
17/07/2008, 14h51
Auteur
Citation:

Le problème c'est que je peux avoir un nombre différent de div...

là plusieurs façons de procéder :

1- tu fais une classe :
Code:

1 2 3 4 .cacherDiv{ display:none; }
et pour chacun des div à cacher tu utilises l'attribut class :
Code:

1 2 3 4 5 6 7 <div class="cacherDiv">ce div est caché</div> <div class="cacherDiv">ce div est caché</div> <div>ce div n'est pas caché !!!!</div> <div class="cacherDiv">ce div est caché</div>
tous les div qui appelleront la classe cacherDiv seront cachés.

2- Tu utilises les id des éléments à cacher (comme tu l'as fait ci-dessus pour le #div1)
Code:

1 2 3 #div1, #div2, #div3{ display:none; }
Mais si tu as 50 div à cacher cela peut être fastidieux :aie:

3- Tu appliques la propriété sur tous les div :
Code:

1 2 3 div{ display:none; }
là c'est radical, tous les div seront cachés mais je ne crois pas que ce soit ce que tu recherches. :aie:

Remarque : fais bien attention à la syntaxe dans les 3 cas ;) (présence d'un point devant le nom de la classe, un # si tu utilises l'id, ou le nom de la balise pour que la propriété s'applique à tous les éléments).
17/07/2008, 15h05
line86
Merci pour vos réponses !!!
Mais voila le problème, si j'utilise une class lorsque je vais survoler un bouton il risque de tout m'ouvrir car il n'aura plus un id unique... non?:oops:
Il me reste la méthode :aie: #div1, #div2 .... lol

J'ai essayé les différentes syntaxes pour le setTimeout mais ça ne fonctionne pas :oops:
mais comme je le mets dans un print car je suis en php... je me suis peut être trompé...
Code:

1 2 print("<input type=\"button\" onmouseover=\"setTimeout(affCache('div$i'),1000000)\" value=\"$nomComplet\" />");
Merci encore !!!
17/07/2008, 15h24
E.Bzz

Citation:

Envoyé par line86

Mais voila le problème, si j'utilise une class lorsque je vais survoler un bouton il risque de tout m'ouvrir car il n'aura plus un id unique... non?:oops:

Non, aucun problème : id et class sont 2 notions indépendantes.
id = identifiant unique de l'objet dans le document
class = regroupement de propriétés CSS

La class peut être utilisée autant de fois que nécessaire dans le document.

Sinon on ne te proposerait pas cette solution :mrgreen:

A+
17/07/2008, 15h25
E.Bzz

... heu : 1000 secondes ça fait long à attendre.
Surtout pour des tests :aie:

A+
17/07/2008, 15h26
Auteur

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.
17/07/2008, 15h42
line86

Citation:

... heu : 1000 secondes ça fait long à attendre.

Oui mais c'est pour voir si il s'ouvre directement ou pas....
et comme il s'ouvre directement... lol

Citation:

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.

Vous parlez de la fonction affCache('div$i')? :oops:
Car si c'est le cas, il me semble que oui car c'est dans la rubrique source de se site que je l'ai trouvé :oops:

Merci
17/07/2008, 15h55
E.Bzz

Citation:

Envoyé par Auteur

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.

Si tu ne mets pas la fonction entre quottes, si ...

A+
17/07/2008, 15h57
E.Bzz

Bref

Code:

<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>

Bonjour, bonjour
Je n'arrive toujours pas a réaliser ce que je souhaite :cry:
Le temps de latence ne s'applique pas :(
Et la methode avec la class, pour remplacer tous les div1, div2, div3 ne fonctionne pas...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>[\o/]</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
	</head>
<body>
 
<script type="text/javascript">
function affCache(idDiv) {
	var div = document.getElementById(idDiv);
	if (div.style.display == "block")
		div.style.display = "none";
	else							
		div.style.display = "block";
}
</script>
 
<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>
	<div class="cacherDiv">
		<p>
		  Linux, ou GNU/Linux, est un système d'exploitation compatible POSIX. Linux est basé sur le noyau Linux, un logiciel libre <br />
		</p>
	</div>
<br />
 
<input type="button" onclick="setTimeout(affCache('div2'),1000);" value="affCache('div2')"/>
	<div id="div2">
		<p>
		En 1991, les compatibles PC dominent le marché des ordinateurs personnels et fonctionnent généralement sous les systèmes <br />
		d'exploitation MS-DOS, Windows et OS/2. Le microprocesseur Intel 80386, vendu depuis 1986, commence à être abordable. <br />
		</p>
	</div>
<br />
 
<input type="button" onmouseover="setTimeout(affCache('div3'),1000);" value="affCache('div2')"/>
	<div id="div3">
		<p>
				En juin 1991, la Berkeley Software Distribution (BSD) sort la Networking Release 2 (Net/2), qui constitue un système UNIX BSD <br />
			presque complet. Mais un procès lancé par Unix System Laboratories contre Berkeley Software Design fait peser des doutes sur le <br />
			statut de cette distribution pendant presque deux ans.<br />
		</p>
	</div>
</body>
</html>
 
 
Et le fichier essai.css
.cacherDiv {
	display:none;
}
 
#div2, #div3 {
	display:none;
}

Merci encore pour votre aide

Code:

1
2
3
4
5
6
7
<script type='text/javascript'>
function lateAlert(texte){
alert(texte)
}
setTimeout(function(){lateAlert('coucou')},1000)
 
</script>

??

les paramètres passent bien

20/07/2008, 11h21
line86

Oui ici le délai pour l'affichage est respecté...
[edit] Je viens de trouver une partie de ma réponse dans la FAQ :oops:

Citation:

Faq:
Sous Firefox, il est également possible de passer des arguments à la fonction appellée, en rajoutant des arguments à la fonction setTimeout:

setTimeout(alert, 2000, 'gnark');

Ca fonctionne bien dans mon cas... Mais sous i-e ca ne fonctionne pas :cry:

Citation:

Envoyé par line86

Et la methode avec la class, pour remplacer tous les div1, div2, div3 ne fonctionne pas...

Attention : ne confonds pas class et id ! Ne remplace pas l'attribut id par l'attribut class ;) (ce que tu as fait pour le div1).

id est l'identifiant de ton objet, il est unique.
Une classe (class) est regroupement de propriétés CSS (pour reprendre ce qu'à écrit E.Bzz). Une même classe peut s'appliquer sur plusieurs objets.

Pour ce qui est du setTimeout() :
En ce qui me concerne j'ai toujours du souci à passer des arguments à une fonction déclenchée par un timer (setTimeout() ou setInterval()).

J'ai donc trouvé un "compromis" :
- mes fonctions déclenchées par un timer n'ont pas d'arguments
- j'utilise des variables globales
d'où :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <input type="button" onclick="declencherTimer('div1')" value="afficher div1"/> <div id="div1" class="cacherDiv"> <p> Linux, ou GNU/Linux, est un système d'exploitation compatible POSIX. Linux est basé sur le noyau Linux, un logiciel libre <br /> </p> </div> <br> <input type="button" onclick="declencherTimer('div2')" value="afficher div2"/> <div id="div2" class="cacherDiv"> <p> En 1991, les compatibles PC dominent le marché des ordinateurs personnels et fonctionnent généralement sous les systèmes <br /> d'exploitation MS-DOS, Windows et OS/2. Le microprocesseur Intel 80386, vendu depuis 1986, commence à être abordable. <br /> </p> </div> </body> </html>
J'ai donc été obligé de créer une fonction qui déclenche le timer et la variable globale idDiv. Et j'ai supprimé l'argument de affCache(), la fonction déclenchée par le timer.

C'est "rustique" mais au moins tu n'as pas à te soucier des paramètres passés à ta fonction. ;)

20/07/2008, 14h29
line86

Super ca marche bien !
Merci pour ces informations !

:merci: beaucoup a vous !!