Pixels de l'écran affiché

27 avril 2009 à 18:01:29

Bonjour à tous, je fais un script d'infobulle, seulement j'ai un problème pour les infobulles qui dépassent l'écran... Je cherche un moyen de connaitre la hauteur dans la page du dernier pixel affiché, ou une autre méthode qui vous semble correcte car j'ai sa, mais ca donne pas un bon effet

<script>
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
var descr
descr=new Array;
descr[0]='<table boder="0" width="120"><tr class=guerre><td>Guerre</td></tr></table><table boder="0" width="120"><tr class=ami ><td>Membre de l\'alliance</td></tr></table><table boder="0" width="120"><tr class=pactetotal ><td>Pacte total</td></tr></table><table boder="0" width="120"><tr class=pactedefensif ><td>Pacte défensif</td></tr></table><table boder="0" width="120"><tr class=pactenonagression ><td>Pacte de non agression</td></tr></table>';
document.getElementById("bulle").innerHTML = "<table border='2' bordercolor='green'style='background:#C3EfB9;'><tr><td style='background:#C3EfB9;'>"+descr[0]+"</td></tr></table>";
}
function suivre_souris0(e)
{								
	//var y = document.getElementById('bulle').offsetLeft + document.body.scrollLeft;
	if (navigator.appName=="Microsoft Internet Explorer")
	{
	var x = event.x + document.body.scrollLeft;	var y = event.y + document.body.scrollTop;
	}
	else
	{
	var x =  e.pageX;var y =  e.pageY;
	}
		if ((200 + document.getElementById('bulle').offsetTop) > screen.availHeight )
		{
			decal_x = 15;
			decal_y = -100;
		}
		else
		{
			decal_x = 15;
			decal_y = 20;
		}
	document.getElementById("bulle").style.left = x + decal_x +'px';
	document.getElementById("bulle").style.top  = y + decal_y +'px';
}
function disparaitre0()
{
	document.getElementById("bulle").innerHTML = '';
}</script>
<div id="bulle" style="position: absolute;"></div>

Merci

Tillertan

27 avril 2009 à 20:34:24

De mémoire.. document.body.innerHeight

Timot

27 avril 2009 à 22:29:58

Euh, moi j'utilise ca :

//Fonction pour récupérer les dimensions de la fenetre
function GetWindowDimensions(){
	var height = Math.max(
		document.body.scrollHeight, 
		document.documentElement.scrollHeight,
		document.body.offsetHeight, 
		document.documentElement.offsetHeight,
		document.body.clientHeight, 
		document.documentElement.clientHeight,
		window.innerHeight);
	height -= scrollMaxY;
	
	var width = Math.max(
		document.body.scrollWidth, 
		document.documentElement.scrollWidth,
		document.body.offsetWidth, 
		document.documentElement.offsetWidth,
		document.body.clientWidth, 
		document.documentElement.clientWidth,
		window.innerWidth);
	width -= scrollMaxX;
	
	return {height:height, width:width}; 
}

Anonyme

27 avril 2009 à 23:03:37

@timot, j'espère pour toi que tu utilises pas ça dans un onresize… bonjour le lag sinon.

Timot

27 avril 2009 à 23:08:44

nan, je l'utilise juste dans une initialisation.
Mais après si ya resize, tu récupère juste le meilleur qui est je sais pas lequel d'ailleurs xD .

Anonyme

27 avril 2009 à 23:57:14

haha dépend de si tu es sous FF ou IE.
FF window.innerHeight
IE document.body.clientHeight

C'est ce que j'utilise du moins.

vbranders

28 avril 2009 à 16:49:48

FF window.innerHeight
IE document.body.clientHeight
... c'est bien joli, mais c'est la taille de la page que ca retourne, pas la position du dernier pixel AFFICHE par le navigateur....
si j'ai une page de 12000 pixel, mon écran affichera toujours que les 1024 ou 768 ou... pixels de hauts....

Ce que je veux, c'est prendre la position de la souris + taille de l'élément (fait) et vérifier que c'est plus petit que la position du dernier pixel affiché, et donc vérifier que l'élément ne dépasse pas du navigateur...
voici en image (pour le moment, je (positionsouris+taille_element) par rapport à la taille de la fenêtre:
<image>http://www.casimages.com/img.php?i=090428044931272809.png</image>
et
<image>http://www.casimages.com/img.php?i=090428045120401161.png</image>

Tillertan

28 avril 2009 à 17:45:53

Citation : vbrandersv

... c'est bien joli, mais c'est la taille de la page que ca retourne, pas la position du dernier pixel AFFICHE par le navigateur....

Tu prends le code de nod_, et tu soustraits document.body.scrollHeight/Width

vbranders

28 avril 2009 à 18:07:18

j'ai sa :

if ((document.body.scrollTop + document.getElementById('bulle').offsetHeight) > ((window.innerHeight) - (document.body.scrollHeight)) )

mais maintenant, c'est bon, la légende passe au dessus, mais si je descend, et que la légend se trouve au centre de la page, la légende s'affiche toujours vers le haut...