Discussion :

[Marmotton76]

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 !
@+

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

[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

[Watilin]

Tu testes sous quel navigateur ? Tu as quel DOCTYPE sur ta page ?

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

[dragonno]

Est-ce que ce code peut te servir ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[andry.aime]

offsetLeft et offsetTop sont des fonctions DOM de javascript.

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

[Marmotton76]

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 :

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
 
 	// 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 !
@+