DIV et SetTimeout

Version imprimable

DIV et SetTimeout

Bonjour,

Je vais essayer d'�tre le plus clair possible afin de pas trop compliquer ma demande.

J'aimerai savoir si dans un lien il est possible de faire des saut de ligne dans la fonction title="".

Je cherche � faire un descriptif des informations sur un lien sur plusieurs lignes ( dans mon cas des dossiers et fichiers).
exemple : je cherche � afficher :
Nom du dossier.
Taille
etc

j'ai fait plusieurs essais pour faire des saut de ligne mais aucuns succ�s.

Dans le cas o� cela n'est pas r�alisable j'ai commenc� � faire une info bulle pour remplacer la fonction title ( code plus bas).

La fonction d'apparition fonctionne, mais j'aimerai savoir s'il est possible de retarder l'apparition de la bulle. J'ai tent� une fonction sleep mais pas top.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <link rel="stylesheet" type="text/css" href="Bulle.css" title="default" media="screen" /> </head> <body> <?php print("<ul id=\"Liens\"> <li><a href=\"#\">Hj</a> <ul class=\"Commentaires\"> <li><a href=\"#\" >M2</a></li> </ul> </ul> <br>"); ?>
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 #Liens { background: None; width: 10px; height: 0px; list-style-type: none; position: relative; top: 0; left: 0 ; } #Liens .Commentaires { display: none; list-style-type: none; margin: 0; padding: 0px 0px; position: Absolute;//relative; top: 60; left: 60 ; border: 1px solid black; Background: #FCFAE1; height : 52px; Width : 240px } #Liens li a:link, #Liens li a:visited { display: block; color: #000; // Couleur texte du menu margin: 0; text-decoration: none; } #Liens li:hover > .Commentaires { display: block; }
On a propos� d'utiliser la fonction Settimeout.

Je me suis donc pench� sur la fonction SettimeOut, j'ai retravaill� mon code pour le tourner en javascript, enfin j'ai cherch� � droite � gauche pour pouvoir faire ce que je souhaite car le javascript, je suis super novice. Enfin j'ai quelque chose au niveau fonctionnement qui correspond � ce que j'avais en PHP.

L� o� �a bloque ba c'est la fonction en elle m�me je ne sais pas ou l� mettre pour que cela fonctionne r�ellement!!!

J'ai essay� au niveau de Onmouseover, en fin de fonction d'apparition ainsi que de disparition mais h�las aucun succ�s.

Je viens afin un peu d'aide et comprendre mon ou mes erreurs sachant que je suis pas au top niveau javascript.
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 <html> <head> <link rel="stylesheet" type="text/css" href="Bulle_JS.css" title="default" media="screen" /> <title></title> <script type="text/javascript"> div = { show: function(elem) { document.getElementById(elem).style.visibility = 'visible'; }, hide: function(elem) { document.getElementById(elem).style.visibility = 'hidden'; } } setTimeout($elem(),5000); </script> </head> <body onLoad="div.hide('div1');"> <?php print("<ul id=\"Liens\"> <li onMouseOver=\"div.show('div1')\" onMouseOut=\"div.hide('div1')\">Hj</li> </ul> <div id=\"div1\"> <ul id=\"Liens\" > <li ><a href=\"#\">OK</a></li> </ul> </div>"); ?> </body> </html>
Si vous voyez des erreurs faites le moi savoir.

D'avance merci pour votre aide.

Cordialement.

Faut mettre le setTimeout au bon endroit...

Code:

1
2
3
4
5
6
7
8
9
10
11
div = {
      show: function(elem) {
 
         document.getElementById(elem).style.visibility = 'visible';
      },
 
      hide: function(elem) {setTimeout( function(){
         document.getElementById(elem).style.visibility = 'hidden';}
         ,5000)
      }
   }

08/12/2010, 06h10
Hybride76

Bonjour SpaceFrog,

Tout d'abord merci de ton aide.

Ton code fonctionne, mais pas dans le sens voulu. La div apparait lors de l'activation de la page.

La fonction recherch�e est l'apparition de la DIV apr�s quelques seconds lorsque le curseur est sur le liens (dans notre cas le liens est Hj).

J'ai essai de mettre la fonction settimeout comme tu l'as �cris sur la partie hidden mais pas de r�sultat correct.

Je vais continuer � chercher.

Encore merci.

Cordialement.

Je reviens sur mes dires :
Mettre ta fonction (SpaceFrog) au niveau du visible fonction bien, j'ai �t� trop rapide.

Merci de ton aide.

Code final de la fonction voulu :

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="Bulle_JS.css" title="default" media="screen" />
<title></title>
<script type="text/javascript">
 
 
   div = { 
      show: function(elem) {setTimeout( function(){
         document.getElementById(elem).style.visibility = 'visible';}
      ,1000);  
      },
 
      hide: function(elem) {
         document.getElementById(elem).style.visibility = 'hidden';
 
      }
 
   }
 </script>
 
</head>
<body onLoad="div.hide('div1');">
<?php
print("<ul id=\"Liens\">
   <li onMouseOver=\"div.show('div1')\" onMouseOut=\"div.hide('div1')\">Hj</li>
</ul>
<div  id=\"div1\">
<ul id=\"Liens\" >
<li ><a href=\"#\">OK</a></li>
</ul>
</div>");
?>
 
 
</body>
</html>

08/12/2010, 08h02
Hybride76

Bon ba un peu trop vite ( dommage) la fonction est l�, mais lors du passage de la souris sur le liens, au bout du temps du settimeout la div apparait et reste.
Alors que lors du placement de la souris sur le liens au bout du settime la div apparait (Fonction souhait�e).

Le pb c'est l'apparition de la div apr�s le temps �coul� sur le passage sur liens.

Je vais continuer � chercher.

R�ponse finale

Bonjour,

Je tiens � remercier toutes les personnes qui m'ont aid�es pour la r�alisation de ce code.

Apr�s quelques semaine de gal�re j'ai enfin r�ussi � faire la fonction que je cherchais.

C'est � dire afficher des infos apr�s un temps donn� sur un point, et disparition lorsque la souris n'est plus � la place du liens.

Voici le code PHP/Java.

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="Bulle_JS.css" title="default" media="screen" />
<title></title>
<script type="text/javascript">
var Timeout;
 
function Apparition (Visible) {
	 Timeout = setTimeout( function(){
	         document.getElementById(Visible).style.visibility = 'visible';}
         ,750)
 
       }
 
function Disparition (Cache) {
         document.getElementById(Cache).style.visibility = 'hidden';
 
   }
 
function Controle (Contr)
  				{
  					window.clearTimeout(Timeout);
 			 			  }
 
</script>
 
</head>
<body onLoad="Disparition ('div1');">
<?php
print("<ul id=\"Liens\">
   <li onMouseOver=\"Apparition('div1');\" onMouseOut=\"Disparition('div1');Controle('div1');\">Hj</li>

<div  id=\"div1\">
<li ><a href=\"#\">OK</a></li>
</ul>
</div>");
?>
 
 
</body>
</html>

Code Css :

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
#Liens
{
	background: None;
	width: 0px;
	height: 0px;
	list-style-type: none;
	position: relative;
	top: 0;
	left: 0 ;
 
}
 
#Div1 {
 
	visibility: hidden
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0px 0px;
  position: Absolute;//relative;
	top: 60;
	left: 60;
	border: 1px solid black;
	Background: #FCFAE1;
	height : 50px;
	Width : 180px
 
	}
#Liens li a:link, #Liens li a:visited
{
	display: block;
	color: #000; // Couleur texte du menu
	margin: 0;
	text-decoration: none;
 
}
#Liens li:hover > .div1 { display: block; }