Récupérer la position Y courante d'une ancre

Version imprimable

13/06/2011, 16h55
Marmotton76

Récupérer la position Y courante d'une ancre

Bonjour à tous,

Est-il possible, au déclenchement d'un évènement JS, de récupérer la position Y d'une ancre (identifiée par son nom ou son id), et plus précisément sa position courante, c'est-à-dire sa distance depuis le haut de l'écran de l'utilisateur au moment même où l'on déclenche l'évènement ?

Merci beaucoup pour vos lumières !
@+
13/06/2011, 17h23
Watilin

Oui, c'est possible, au prix d'un petit calcul et d'un peu de jonglage avec les différents navigateurs.

Il faut d'abord récupérer la postion de l'élément par rapport au document, ensuite tu récupères le scroll de la page, et enfin tu fais la soustraction.

Je te laisse te débrouiller avec ça : http://blog.stannard.net.au/2010/05/...th-javascript/

J'espère que tu es à l'aise avec l'anglais ^^
13/06/2011, 19h21
Marmotton76

Merci beaucoup Watilin, j'avais déjà creusé ce genre de fonction mais : le pb est que, quelle que soit la position à l'écran de l'ancre considérée, j'ai toujours le même résultat : position y=0 ! Je pensais que c'était à cause de la position CSS de l'ancre (dépendante d'un parent lui-même positionné en absolute, relative, float ou autre) mais que nenni : quelle que soit la position de l'élément parent, j'ai toujours ce même résultat inchangé et décourageant !)
Là franchement, et après plusieurs heures passées à me documenter, je crains fort qu'il n'existe aucune solution miracle qui me récupèrerait cette fichue valeur de position y absolue [à l'écran] d'un élément (ou d'une balise) HTML... Détrompez-moi SVP !!!
@+ et merci
13/06/2011, 19h44
Watilin

Tu testes sous quel navigateur ? Tu as quel DOCTYPE sur ta page ?
13/06/2011, 22h48
NoSmoking

Bonsoir,
même si l'on peut faire plus court, la fonction DOIT te retourner les bonnes valeurs et ce quelque soit le conteneur...

Est-ce que ce code peut te servir ?

Code:

1
2
3
4
5
6
7
8
9
10
 
function findPos(obj) {
        var curleft = obj.offsetLeft || 0;
        var curtop = obj.offsetTop || 0;
        while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
        }
        return {x:curleft,y:curtop};
}

offsetLeft et offsetTop sont des fonctions DOM de javascript.

14/06/2011, 07h52
andry.aime

Citation:

Envoyé par dragonno

offsetLeft et offsetTop sont des fonctions DOM de javascript.

Ceux ne sont pas des fonctions, ceux sont des attributs (propriétés).

Bon, j'ai trouvé (merci à quirksmode.org !) ce trio de fonctions qui marchent impec pour moi (FF et IE, doctype Strict), et pour ceux que ça intéresse :

Code:

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
 
 	// findPos() by quirksmode.org
	// Finds the absolute position of an element on a page
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {	
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;	
			} while (obj = obj.offsetParent);
		}
		return [curleft,curtop];
	}
 
	// getPageScroll() by quirksmode.org
	// Finds the scroll position of a page
	function getPageScroll() {
		var xScroll, yScroll;
		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
			xScroll = self.pageXOffset;
		} else if (document.documentElement && document.documentElement.scrollTop) {
			yScroll = document.documentElement.scrollTop;
			xScroll = document.documentElement.scrollLeft;
		} else if (document.body) {// all other Explorers
			yScroll = document.body.scrollTop;
			xScroll = document.body.scrollLeft;
		}
		return [xScroll,yScroll];
	}
 
	// Finds the position of an element relative to the viewport.
	function findPosRelativeToViewport(obj) {
		var objPos = this.findPos(obj);
		var scroll = this.getPageScroll();
		return [ objPos[0]-scroll[0], objPos[1]-scroll[1] ];
	}

Merci à tous de m'avoir mis sur la bonne piste !
@+