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

Vue hybride

Discussions similaires

Partager

Partager