11548 sujets

JavaScript, DOM et API Web HTML5

Comportement d'un DIV (style tooltip) avec les ascenseurs

Bonjour,

J'ai un petit programme de tooltip qui va faire apparaitre un DIV sur ma page. Ce DIV suit le curseur.

Sa potition est absolute.

Mais ce div, lorsqu'il apparait pres du bord de la page ... fait apparaitre les ascenseurs !

En fait, c'est normal ... mais je me demandais si vous aviez une solution pour que ce DIV

1) Ne fasse plus cela (ne pas faire apparaitre les ascenseurs)

2) Eventuellement, passe par dessus ces ascenseurs (sachant que le DIV appartient à une page d'une frame, et qu'en conséquence la page du navigateur est grande ouverte.

Si vous avez des idées, je suis prenneur !

Pour info, le code que j'utilise :

<!-- TOUT CE QU'IL FAUT POUR L'INFO BULLE -->

<DIV id="bulle" Style=" background-color:#FFFFFF; position: absolute; z-index: 8; visibility: visible; color: #000000;"></DIV>

<SCRIPT type="text/javascript">

var contenu;

var decal_x = 10;
var decal_y = 10;

document.onmousemove = suivre_souris;

function pop_bulle(contenu) {
	document.getElementById('bulle').innerHTML = "<table border='1' bordercolor='black' style='background-color: #FFFFFF;'><tr><td Style=\"padding:5px;\"><font color='#000000'>"+contenu+"<BR>"++"</font></td></tr></table>";
}

function suivre_souris(e) {

	var ns4=document.layers
	var ie4=document.all
	var ns6=document.getElementById&&!document.all

	if (ie4)  {
		
		var x_ecran = event.x;	
		var y_ecran = event.y;
		var x_plus = document.body.scrollLeft;
		var y_plus = document.body.scrollTop;
		var x = x_ecran + x_plus;
		var y = y_ecran + y_plus;
		
	}
	else {

		var x = e.pageX;
		var y = e.pageY;
				
	}

	nObjet = document.getElementById('bulle');

	nLeft = x + decal_x; 
	nTop = y + decal_y;

	// nObjet = le nom de l'objet
	// nContenu = Le contenu affiché dans l'objet
	// nLeft = La position x (de: haut gauche)
	// nTop = La position y (de: haut gauche)

	  if (ns4) {
		document.eval(nObjet).top = nTop;
		document.eval(nObjet).left = nLeft;
		
	  }
	  else if (ns6) {
		nObjet.style.left= nLeft;
		nObjet.style.top = nTop;
	  }
	  else if (ie4) {
		eval(nObjet).style.pixelLeft = nLeft;
		eval(nObjet).style.pixelTop = nTop;
	  }
}



function disparaitre_bulle() {
	document.getElementById('bulle').innerHTML = "";
}



</SCRIPT>

Modifié par Dexterin (23 Sep 2007 - 04:12)
Ce qu'il faut dans ce cas, c'est programmer la tooltip de tel maniére qu'elle se place a gauche du curseur si elle est prés du bord droit et en haut du curseur si elle prés du bas. De cette maniére elle est toujours visible et les ascenseurs n'apparaissent pas.
C'est exactement ce que j'ai essayé de faire (afficher le tooltip en fonction de sa position à l'écran) mais j'ai eu quelques difficultés :

- la page affichée (celle ou se trouve les liens qui affichent le tooltip) est dans une frame ... et les fonctions javascript (firefox ou msie) me donnent bien les coordonnées du curseur dans la frame, mais je n'arrive pas à obtenir la largeur et la hauteur totale de la page, je n'arrive qu'à obtenir que la largeur et la hauteur totale de la fenetre du navigateur ...

- trouver la hauteur et la longueur du tooltip une fois son contenu modifié. Mais cela, j'ai réussi ! Smiley cligne


Donc je cherche encore les fonctions qui me donnent les dimensions de la frame contenant la page ...

;-(

Dans tous les cas, merci de vos aides !
Encore un raison de plus pour abandonner les frames! Non plus sérieusement il n'y a aucune bonne raison d'utiliser les frames, donc avant d'aller plus loin je te conseil de reconsidérer d'abord ce point.
Peut-être qu'en mettant un overflow:hidden sur la frame (ou iframe) (et non pas sur le tooltip) évitera les scrollbars ?

Je sais pas trop, les frames c'est pas vraiment ce que j'utilise tous les jours ^^
Sujet clos
Aller à