Discussion :

[bylka]

Bonjour

Voila ,j'essaye de trouver la position (x, y) du milieu de l'ecran, sachant que l'utilisateur a un grand tableau html et sur chaque ligne il a la possibilité d'ouvrir une petite fenétre (mai il faux que sa soit au milieu de sa page), donc s'il a scrollé jusqu'a la fin du tableau la fenétre doit s'ouvrir au milieu de sa page et donc en fonction de sa position

Est ce que quelqu'un aurai un fil à me donner?

Merci d'avance pour l'aide

[E.Bzz]

Bonjour,
tu parles de "page", d' "écran", de "fenêtre"

Il s'agit de 3 notions différentes.

Il faut donc d'abord nous dire de laquelle tu souhaites calculer le "milieu" ...

A+

[bylka]

ouuupsss

En faite , j'ai une page WEB qui affiche un tableau contenant des clients, et sur chaque ligne j'ai un bouton "afficher appréciation client" ,

en cliquant sur ce bouton je fais apparaitre une DIV contenant un textarea avec les appréciations sur le client avec la possibilité de mise à jour.

au départ la DIV été cachée , et donc quand je clic sur le bouton "afficher appréciation client" je la fais apparaitre mais le probléme c que c'est toujours à la même position , si je veux afficher l'appréciation du client N° 100 qui se trouve tout en bas du tableau la div sera affiché en haut donc on remonte en haut de l'écran et je pers la position du client

le cas idéal c de l'afficher en fonction de la position du bouton

Voila j'espère que c plus claire

[SpaceFrog]

Faut positionner le div en tenant compte de la hauteur de la fenetre, la hauteur du div et le scrollTop de la page ...

[bylka]

Comment avoir toutes ces infos?

[SpaceFrog]

en regardant dans la FAQ ou dans les contributions
ou en recherchant avec de mots comme offsetHeight offsetTop scrollTop browser sniffer ...

[E.Bzz]

en cliquant sur ce bouton je fais apparaitre une DIV contenant un textarea avec les appréciations sur le client avec la possibilité de mise à jour.

Même si c'est hors-sujet : tu sais que tu es obligé de déclarer le stockage de ce genre d'information à la CNIL ?
Que les utilisateurs n'auront pas le droit d'y saisir n'importe quoi ?
Et que tu n'as pas le droit de conserver ces commentaires aussi longtemps que tu veux ?

A+

[bylka]

En faite c pas un truc officiel , c un exercice que je suis entrain de faire chez moi

T'inkiét je respecte la vie privée des gens

[E.Bzz]

En faite c pas un truc officiel , c un exercice que je suis entrain de faire chez moi

Et tu gères et "apprécie" des clients ?

La CNIL est (censée être) particulièrement vigilante sur tout ce qui concerne la notion d' "appréciations sur le client".

Ceci dit, que ça soit dans ton garage ou dans une entreprise, la loi est la même.

Bon, moi ce que j'en dis ....

A+

[bylka]

Merci pour le fil SpaceFrog

Si j'ai bien compris je dois jouer sur ces deux params du div: margin-top: et
margin-left:
le document.body.scrollTop me donne effectivement la position du scroll , mais c'est en JS? alors comment fixer le margin-top a cette valeur?

[SpaceFrog]

c'est pas le margin top qu'il faut fixer mais le style top de la div en positon absolute ...

[bylka]

Ok
Mais comment affecter une valeur JS (document.body.scrollTop ) à une propriété de la css (style= "top : ....")

Merci

[E.Bzz]

Mais comment affecter une valeur JS (document.body.scrollTop ) à une propriété de la css (style= "top : ....")

JS donne accès aux propriétés CSS :

Code :

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

document.getElementById('id_element').style.top = document.body.scrollTop + "px";

A+

[bylka]

Merci E.Bzz pour ta réponse , je vais regarder de ce coté la

[E.Bzz]

Tu auras besoin du traducteur

A+

[SpaceFrog]

il y a deux exceptions à cette méthode de traductions:
float devient cssFloat

et l'autre ... j'ai oublié ...

[edit]

pour les propriétés avec deux tirets

Code :

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

border-left-width  => borderLeftWidth

et pour les textDecoration:

Code :

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

text-decoration: underline =>textDecorationUnderline

[riete]

Je me permet d'intervenir sur ce fil de discussion pour poser une question.

Ayant découvert très récemment la création dynamique d'objets DOM.
Je me demande si dans ce cas, cette solution ne serait pas bien mieux adaptée que la recherche de la position du pointeur ?

[RomainVALERI]

Pour tous ces problèmes de dimensions dans la page, même si je ne suis pas un fan du MSDN, il y a cette page qui donne des repères :
(MSDN) Positions et mesures dans un document HTML

[bylka]

Merci pour toutes les réponses

Après de multiples recherches , je me permets de poser la question suivante:

comment déterminer les valeurs (X,Y)? afin de mettre:

Code :

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

1
2
3
 
mon-div.style.top = x + "px"; 
mon-div.style.left = y + "px";

j'essaye des trucs de ce genre :

Code :

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

1
2
 
x = document.body.scrollTop + document.documentElement.scrollTop + document.body.clientHeight/2;

Mais sans succès

Merci par avance pour vos réponses

A+

[RomainVALERI]

Une petite fonction javascript pour calculer les coordonnées absolues d'un élément, en additionnant les coordonnées relatives ( offsetTop et offsetLeft ) de l'élément, puis de son parent, puis du grand-parent, etc. jusqu'au body lui-même :

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
 
function calculerPosition(elementId)
{
	var tabPosition = new Array();
	var feuille = document.getElementById(elementId);
	tabPosition[0] = feuille.offsetLeft;
	tabPosition[1] = feuille.offsetTop;
 
	while(feuille.offsetParent)
	{
		feuille = feuille.offsetParent; // récursivité
		tabPosition[0] += feuille.offsetLeft;
		tabPosition[1] += feuille.offsetTop;
	}
	return tabPosition;
}

Je ne suis pas un expert de la discipline, mais j'ai écrit ça pour mes propres besoins il y a quelques jours et ça fonctionne très bien ^^

Ca s'utilise de la manière suivante :
PARAMETRE entrant (elementId) : l'ID ( donc une string ) de ton élément
RETOUR de la fonction : un tableau à deux postes, contenant les coordonnées X et Y à attribuer à ton élément.

Exemple d'appel à partir de ton exemple :

Code :

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

1
2
3
4
 
var positionRelative = calculerPosition('mon-div')
mon-div.style.left = positionRelative[0] + "px";
mon-div.style.top = positionRelative[1] + "px";

Si des plus costauds que moi trouvent que ça pose des problèmes ou que ce n'est pas optimisé ou quoi que ce soit d'autre.... je suis intéressé par vos remarques n'hésitez pas ( mais pas trop fort sur la tête svp )

( edit : ca fonctionne sous IE6 et FF3 mais je n'ai pas testé sur d'autres navigateurs donc éventuellement attention )