DIV et SetTimeout

**Hybride76** · 07/12/2010, 06h30

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

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

**SpaceFrog** · 07/12/2010, 08h48

Faut mettre le setTimeout au bon endroit...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Hybride76** · 08/12/2010, 06h10

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.

**Hybride76** · 08/12/2010, 06h21

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 :

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

**Hybride76** · 08/12/2010, 08h02

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.

**Hybride76** · 16/12/2010, 11h45

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 :

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

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
#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; }

DIV et SetTimeout

JavaScript

Discussions similaires

Partager

Partager