Liens et title

par **Hybride76** » 16 déc. 2010, 12:44

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 : Tout sélectionner

<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 : Tout sélectionner

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

par **xTG** » 08 déc. 2010, 10:26

Bon je viens donc de tester vu que ça n'avance pas...
Faudrait peut être regarder la console d'erreur javascript de temps à autre quand on veut débugguer...

Code : Tout sélectionner

<html>
<head>
<title></title>
<script language="javascript">
var annulation = 0;
function show(elem) {
 setTimeout("afficher(" + elem + ")",2000);
}

function afficher(elem) {
if( annulation == 0 ) // affichage ssi une annulation n'a pas été demandée
  elem.style.visibility = 'visible';
else
  annulation--; // annulation prise en compte
}

function hide(elem) {
 document.getElementById(elem).style.visibility = 'hidden';
 annulation++; // on indique une annulation
}
</script>
</head>
<body>
<style>
	#div1 { visibility:hidden; }
</style>
<ul id="Liens">
   <li onMouseOver="show('div1');" onMouseOut="hide('div1');">Hj</li>
<div id="div1">
<li ><a href="#">OK</a></li>
</ul>
</div>


</body>
</html>

Voici un script qui fonctionne à peu près.
Des soucis avec l'annulation apparemment mais franchement pas le temps de voir ça tout de suite.

par **Hybride76** » 08 déc. 2010, 10:11

le diplay est non :

Code Css :

Code : Tout sélectionner

#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 : 250px;
    cursor : pointer;
    }

par **xTG** » 08 déc. 2010, 09:49

Est-ce que l'id div1 est en display:hidden dans ton css ?

par **Hybride76** » 08 déc. 2010, 09:00

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.

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

Je vais continuer à chercher.

par **Hybride76** » 08 déc. 2010, 07:23

Bon ba c'est tout bon après plusieurs jours de galère.

Encore merci pour votre aide.

Code final de la fonction voulu :

Code : Tout sélectionner

<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';}
      ,2000);  
      },
      
      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>
<div  id=\"div1\">
<li ><a href=\"#\">OK</a></li>
</ul>
</div>");
?>


</body>
</html>

par **Hybride76** » 08 déc. 2010, 06:52

Lors de l'ouverture de la page la div est active, et aucune action se réalise lors du passage de la souris.
Le code impose la position visible en permanence.

J'espère avoir donner accès de réponse à ta question.

Cordialement.

par **xTG** » 07 déc. 2010, 22:18

Je n'ai aucunement testé mon code.
Mais avec javascript on obtient dans 95% des cas une erreur, donc quelle est-elle ?

par **Hybride76** » 07 déc. 2010, 21:53

Encore merci pour ton aide xTG,

Mais il semblerai que soit je suis un "buse" ou soit je fais mal un truc.

Car pour moi, ton code fonctionne pas dans ma page.

Cela peux venir de moi avec une mauvaise imbrication dans le code principale.

En tout cas merci de ton aide cela me permet de connaitre un peut plus le JavaScript ou je ne suis pas suis à l'aise.

Cordialement.

par **xTG** » 07 déc. 2010, 13:10

Ah oui je vois, dans ce cas c'est totalement différent...
Il faut armer un timer pour afficher le div, mais si on ne reste pas sur le lien il faut annuler l'action.

Donc :

Code : Tout sélectionner

var annulation = 0;
div = {
      show: function(elem) {
         setTimeout(div.afficher(elem),2000);
      },

      afficher(elem) {
        if( annulation == 0 ) // affichage ssi une annulation n'a pas été demandée
          document.getElementById(elem).style.visibility = 'visible';
        else
          annulation--; // annulation prise en compte
      },
     
      hide: function(elem) {
         document.getElementById(elem).style.visibility = 'hidden';
         annulation++; // on indique une annulation
      }
   }

par **Hybride76** » 07 déc. 2010, 11:33

Merci xTG,

Mais malheureusement cela ne fonctionne pas.

Le but étant de placer la souris sur le liens et au bout de 2-3 secondes l'info bulle (DIV) apparait.

Je vais continué à chercher, mais si des idées vous viennent...

Merci d'avance.

Cordialement.

par **xTG** » 07 déc. 2010, 09:59

Code : Tout sélectionner

div = {
      show: function(elem) {
         document.getElementById(elem).style.visibility = 'visible';
         setTimeout(div.hide(elem),5000);
      },
      
      hide: function(elem) {
         document.getElementById(elem).style.visibility = 'hidden';
      }
   }

Ce serait plutôt ainsi afin de faire disparaître la bulle au bout de 5 secondes.
Sinon ton utilisation est correcte pour ce que j'en vois. Qu'est ce qui ne va pas ?

par **Hybride76** » 06 déc. 2010, 22:33

Bonjour et Merci damaskinos ,

Je me suis 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 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.

Si vous voyez des erreurs faites le moi savoir.

D'avance merci pour votre aide.

Cordialement.

Code en version Javascript :

Code : Tout sélectionner

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

par **damaskinos** » 02 déc. 2010, 18:14

Salut

Pour les sauts de lignes, je ne pourrais pas te dire, par contre pour retarder l'info bulle, vue que c'est un affichage côté client il serait plus approprié d'utiliser du javascript. Quelque chose comme

Code : Tout sélectionner

setTimeout

.

Bonne continuation

par **Hybride76** » 02 déc. 2010, 11:08

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.
Donc si quelqu'un à un idée ou une fonction à me proposer. Je n'attends pas un code tout fait car c'est pas mon but, mais une aide pour pouvoir réaliser ce que je veux ou du moins s'en approcher.

Merci par avance de votre aide.

Code CCS

Code : Tout sélectionner

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

Code D'essai (temporaire sera implanté dans le fichier final après finalisation) :

Code : Tout sélectionner

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

?>


</body>
 </html>

Liens et title

Répondre

Étendre la vue Revue du sujet : Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Re: Liens et title

Liens et title