avoir les cordonnées du milieu de la page

Version imprimable

28/10/2008, 15h43
bylka

avoir les cordonnées du milieu de la page

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
28/10/2008, 16h34
E.Bzz

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

Il s'agit de 3 notions différentes.

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

A+
28/10/2008, 16h48
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 ;)
28/10/2008, 16h50
SpaceFrog

Faut positionner le div en tenant compte de la hauteur de la fenetre, la hauteur du div et le scrollTop de la page ...
28/10/2008, 16h51
bylka

Comment avoir toutes ces infos? :?
28/10/2008, 16h56
SpaceFrog

en regardant dans la FAQ ou dans les contributions
ou en recherchant avec de mots comme offsetHeight offsetTop scrollTop browser sniffer ...
28/10/2008, 16h59
E.Bzz

Citation:

Envoyé par bylka

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+
28/10/2008, 17h02
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 ;)
28/10/2008, 17h08
E.Bzz

Citation:

Envoyé par bylka

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 .... :mrgreen:

A+
28/10/2008, 17h28
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?
28/10/2008, 17h29
SpaceFrog

c'est pas le margin top qu'il faut fixer mais le style top de la div en positon absolute ...
29/10/2008, 09h43
bylka

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

Merci
29/10/2008, 09h45
E.Bzz

Citation:

Envoyé par bylka

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

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

Code:

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

;)
A+
29/10/2008, 10h21
bylka

Merci E.Bzz pour ta réponse , je vais regarder de ce coté la ;)
29/10/2008, 10h27
E.Bzz

Tu auras besoin du traducteur :mrgreen:

A+
29/10/2008, 10h37
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:

border-left-width => borderLeftWidth

et pour les textDecoration:

Code:

text-decoration: underline =>textDecorationUnderline
29/10/2008, 11h40
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 ?
29/10/2008, 14h07
RomainVALERI

un petit + ?

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
29/10/2008, 14h56
bylka
Merci pour toutes les réponses :king:

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

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

1 2 3 mon-div.style.top = x + "px"; mon-div.style.left = y + "px";
j'essaye des trucs de ce genre :
Code:

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+

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:

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:

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 :mrgreen: ( mais pas trop fort sur la tête svp :aie: )

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

29/10/2008, 17h17
bylka

Merci RomainVALERI pour le partage de ton code
je vais le tester de suite ;)
29/10/2008, 17h25
bylka

Je comprend pas mais le positionRelative me donne des coordonnées égales à 0?
29/10/2008, 17h34
RomainVALERI
attention à ne pas confondre :

'mon-div', ici passé en paramètre à la fonction : cette chaîne doit être la propriété ID de ton élément DIV dans ton doc HTML / PHP / autre

( genre : <DIV class='machin' id='mon-div' > )

et le nom que tu auras choisi pour désigner cet élément dans ton code javascript.
Code:

1 2 3 // par exemple divCentre = document.getElementById('mon-div');
Je ne sais pas si c'est la cause de ton problème mais je me suis dit après coup que ce n'était peut-être pas clair alors je précise... :fou:

Oui j'ai bien mis un ID à mon DIV

au niveau de la fonction

Code:

1
2
3
4
5
6
7
8
function calculerPosition(elementId)
{
	var tabPosition = new Array();
	var feuille = document.getElementById(elementId);
	tabPosition[0] = feuille.offsetLeft;
	tabPosition[1] = feuille.offsetTop;
	alert(tabPosition[0]); ====> déjà la sa me donne 0?
}

29/10/2008, 17h53
E.Bzz

Citation:

Envoyé par bylka

function calculerPosition(elementId)

Tu l'appelles comment ?

PS : merci de mettre les balises CODE ;)

A+
29/10/2008, 17h56
bylka
JS:
J'appelle la fonction calculerPosition('mon-div'); lors d'un onclick sur un bouton <a href...>
Code:

1 2 3 print "<a class=btn href='#' onClick = \"calculerPosition('mon-div'); ; return false;\">Afficher</a><br><br>";
HTML:
Code:

1 2 3 4 <div id='mon-div'> </div>
Peut être il s'agit d'un problème de navigateur , moi j'utilise FireFox2 ou bien IE7 (même en testant sur FF3 ça ne donne rien)
30/10/2008, 17h43
bylka

Alors aucune autre proposition :roll:

Depuis hier je en fais que des recherches, mais mystère...

Peut être j'ai mal expliqué mon problème:

en faite j'ai un tableau ,sur chaque ligne j'ai le lien "afficher", je veux que a chaque fois qu'on clique sur ce lien un div (caché au départ) s'affiche mais tjrs au centre de ma page,
Donc si on scroll il faut que le div s'affiche au centre et non pas en haut (dans ce cas on est obligé de remonter pour le visualiser ce qui n'est pas top)

En fin de compte ,la fonction proposée par Romain me retourne un résultat , mais on donnant l'id du lien "afficher" et non pas l'ID du div comme paramètre à la fonction calculerPosition(elementId) , mais le problème reste entier car j'ai pas un affichage exacte => au débuts du tableau le div est bien affiché puis plus je descend plus il est affiché au dessus du centre , donc je dois remonter pour le visualiser :(

je pense qu'il manque un détail a la fonction de Romain, sachant que j'ai même testé sous FF3 mais j'ai les mêmes résultats (FF2, FF3 ou iE)