CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 04:44:51

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> OBTENIR L' OFFSET PAR RAPPORT AU PREMIER PARENT POSITIONNÉ

OBTENIR L' OFFSET PAR RAPPORT AU PREMIER PARENT POSITIONNÉ

Information sur la source

Note :
Aucune note

Catégorie :Divers Classé sous :offset, parent, position, positionné, offsettop Niveau :Débutant Date de création :17/07/2007 Date de mise à jour :21/04/2008 17:05:49 Vu :4 769

Auteur : Evangun

Ecrire un message privé

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

Si vous utilisez element.offsetTop ou element.offsetLeft pour un élément, il n'y a pas deux navigateurs qui vous répondront la même chose.

Il semblerait que seul Firefox soit logique et renvoie l'Offset par rapport au premier parent positionné. Opera renvoie par rapport au premier parent, et IE par rapport au premier parent hiérarchique (mais malgré mes tests, je me demande encore quelle est sa définition d'un parent hiérachique...)

Le problème s'est posé pour moi quand j'ai voulu faire passer un élément d'une position statique à absolue, mais en le laissant exactement à la même position, il me fallait donc ses coordonnées par rapport au premier parent positionné. Et il m'a donc fallu écrire cette petite fonction, qui devrait renvoyer la même valeur avec tous les navigateurs.

Source

//donne la position par rapport à window
function getOffsetPosition(el_id, side){
element = document.getElementById(el_id);
newNode = document.createElement("div");
newNode.innerHTML = "<div style=\"height: 12px;\"></div>";
element.insertBefore(newNode, element.firstChild);
iVal = 0;
oObj = element;
var sType = "oObj.offset"+side;
while (oObj && oObj.tagName != "html") {
iVal += eval(sType);
oObj = oObj.offsetParent;
}
element.removeChild(newNode);
return iVal;
}
//donne la position par rapport au premier parent positionné
function getOffsetParentPosition(el_id, side){
el_parent = document.getElementById(el_id).parentNode;
while (el_parent) {
if(navigator.appName != "Microsoft Internet Explorer"){
if(window.getComputedStyle(el_parent,null).position == "relative" || window.getComputedStyle(el_parent,null).position == "absolute"){
break;
}
else {
if(el_parent.tagName != "HTML"){
el_parent = el_parent.parentNode;
}
else {
el_parent = null;
}
}
}
else {
if(el_parent.currentStyle.position == "relative" || el_parent.currentStyle.position == "absolute"){
break;
}
else {
if(el_parent.tagName != "HTML"){
el_parent = el_parent.parentNode;
}
else {
el_parent = null;
}
}
}
}
if(el_parent){ parentOffset = getOffsetPosition(el_parent.id, side); }
else { parentOffset = 0; }
return getOffsetPosition(el_id, side) - parentOffset;
}
/*
exemple d'utilisation :
<html>
<head>
<script>
ici les 2 fonctions
window.onload = function(){
alert(getOffsetParentPosition("lau", "Top"));
alert(getOffsetParentPosition("lau", "Left");
}
</script>
</head>
<body>
<div id="ff" style="padding-top: 65px; position: absolute;"><div id="lau"></div></div>
</body>
</html>
*/

//donne la position par rapport à window
function getOffsetPosition(el_id, side){
	element = document.getElementById(el_id);

	newNode = document.createElement("div");
	newNode.innerHTML =  "<div style=\"height: 12px;\"></div>";
	element.insertBefore(newNode, element.firstChild);
	
	iVal = 0;
	oObj = element;
	var sType = "oObj.offset"+side;
	while (oObj && oObj.tagName != "html") {
		iVal += eval(sType);
		oObj = oObj.offsetParent;
	}
	element.removeChild(newNode);
	return iVal;
}

//donne la position par rapport au premier parent positionné
function getOffsetParentPosition(el_id, side){
	el_parent = document.getElementById(el_id).parentNode;
	while (el_parent) {
		if(navigator.appName != "Microsoft Internet Explorer"){
			if(window.getComputedStyle(el_parent,null).position == "relative" || window.getComputedStyle(el_parent,null).position == "absolute"){
				break;
			}
			else {
				if(el_parent.tagName != "HTML"){
					el_parent = el_parent.parentNode;
				}
				else {
					el_parent = null;
				}
			}
		}
		else {
			if(el_parent.currentStyle.position == "relative" || el_parent.currentStyle.position == "absolute"){
				break;
			}
			else {
				if(el_parent.tagName != "HTML"){
					el_parent = el_parent.parentNode;
				}
				else {
					el_parent = null;
				}
			}
		}
	}
	
	if(el_parent){ parentOffset = getOffsetPosition(el_parent.id, side); }
	else { parentOffset = 0; }
	return getOffsetPosition(el_id, side) - parentOffset;
}







/*
exemple d'utilisation :
<html>
<head>

<script>
	ici les 2 fonctions

	window.onload = function(){
		alert(getOffsetParentPosition("lau", "Top"));
		alert(getOffsetParentPosition("lau", "Left");
	}
</script>
</head>
<body>
	<div id="ff" style="padding-top: 65px; position: absolute;"><div id="lau"></div></div>
</body>
</html>
*/

Conclusion

Attention, le parent positionné doit avoir un id. Ou alors vous devrez modifier la première fonction pour qu'elle accepte aussi des éléments et pas seulement un id comme premier paramètre (c'est simple à faire :) )

Si l'élément passé à la fonction ne comporte pas d'enfants qui ont du margin-top, vous voudrez sans doute enlever le mécanisme DOM de la première fonction, cela ralentit le script.

Merci à Bultez pour son aide sur .currentStyle et getComputedStyle :)

Historique

17 juillet 2007 12:48:54 :: ras
23 juillet 2007 22:46:34 :: Modification de la première fonction pour qu'elle compte bien l'offset depuis le bord de l'objet considéré (), pas depuis le bord du plus haut de ses enfants (cf offsetHeight qui ne tient pas compte des éventuels margin-top des enfants).
23 juillet 2007 23:04:31 :: ras
01 août 2007 00:05:34 :: Prise en compte du cas où il n'y a pas de parent positionné
21 avril 2008 17:05:50 :: Correction de la détection du navigateur

Sources du même auteur

BUG FIX DE LA TRANSPARENCE DES PNG SOUS IE 6

Toutes les sources de Evangun

Sources de la même categorie

MOOTABLEAU par Miky76

CALCULER VOTRE IMC par lesnouesremy

CONSOLE DOS par djebbipgm

PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB par arthurobriot

FAIRE UN FILTRE DES VILLES par scropfi01

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER par Kimjoa

MENU AVEC ROULETTE par jdmcreator

DIV POSITION FIXED SUR LA PAGE par PetoleTeam

"DRAG" DE BLOC <DIV> par slog9

BARRE DE POSITION OU DE NOTE par benwa74

Commentaires et avis

Commentaire de XtremDuke le 06/08/2007 11:41:41

Je n'ai peut-être pas vraiment compris le but de ta source mais perso, pour trouver l'offset exact d'un element dans sa page j'utilise la fonction suivante :

function getOffsets(obj) {
var offsetTop = obj.offsetTop;
var offsetLeft = obj.offsetLeft;
while ((obj = obj.offsetParent )!=null) {
offsetTop += obj.offsetTop;
offsetLeft += obj.offsetLeft;
}
return [offsetLeft, offsetTop];
}

Commentaire de Evangun le 06/08/2007 23:19:56

Je pense que tu n'as lu ni le titre, ni les explications, ni ma source : OBTENIR L' OFFSET PAR RAPPORT AU ***PREMIER PARENT POSITIONNÉ***.

Commentaire de XtremDuke le 07/08/2007 09:20:14

hô ! bon désolé ^^

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

window.open provoque un scrolling (Top) sur la fenêtre parent. Est-il possible d'éviter ce déplacement ? [ par dam ] Je fais appel à window.open, à partir d'un lien sur une page (qui fait 2 écrans de haut). Ce lien est placé en bas de page.Lorsque je clique sur le li Retrouver la position d'une image [ par Jean Pierre ] BonjourVoilà, j'ai un script qui me permet de deplacer une image sur l'ecran (drag'n drop). Mon probleme est qu'il faudrait que je puisse avoir la pos Position des objets [ par Dauphyn ] Je tente en vain de trouver la position d'une image en JS.Si par exemple j'insère l'image dans un tableau Ex : <html><body><table>&l Rafraichir la fenetre "parent" [ par aurélien ] Bonjour à tous, J'ai une page en html/php a partir de laquelle, en cliquant sur un bouton, j'ouvre un popup, et j'aimerais que lorsque je ferme ce pop Récupérer la position du curseur dans un TEXTAREA [ par piment ] Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr positionné une image scroll aur netscape4.x [ par rochonpascal ] Bonjour, depuis une semaine j'essaie de rendre mon site compatible avec netscape 4.x, le problèeme que je rencontre c'est que lorsque j'ai des images URGENT: position du curseur dans un TEXTAREA ??? [ par Kiom ] Bonjour tout le monde,bon voilà une petite question :est-il possible en javascript de connaître la position du curseur dans un textarea ?....une répon Position d'un bouton [ par TheRod23 ] Salut,quelqu'un peut t'il me dire comment on récupere les coordonées d'un bouton sur un page htmlj'ai fais ça mais ça marche pasdocument.all[button].s position d'une image [ par Ferdi ] SalutDans une fenetre popup je place une image par l'instruction suivante qui se trouve dans cette meme fenetre:document.write("<img src='images-tu

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5