11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Positionner un div dans une page avec scrolling

Bonjour,

J'ai une grande page web qui peut défiler sur plusieurs écrans. Dans cette page, à n'importe quel endroit, je voudrai placer un div exactement à l'endroit où j'ai cliqué.

Ca marche bien tant que je me trouve en haut de page... mais le div ne se place plus correctement par rapport au pointeur de la souris lorsque je suis par exemple au mileu ou tout à la fin de la page. Il y a un décalage entre les coordonnées de la souris qui est en relatif par rapport à l'écran et les coordonnées absolues en CSS de mon div. Et je ne sais pas comment solutionner ce problème!

Voici mon code javascript actuel:


//Fonction pour retrouver les coordonnées du pointeur en X
function mousepositionx(e)
{
  var mouse_x;
  if (parseInt(navigator.appVersion) >= 4)
  {
    if (navigator.appName == 'Netscape')
    {
    mouse_x = e.pageX;
    }
    else
    {
    mouse_x = event.x ;
    }
  }
  return mouse_x;
}

//Fonction pour retrouver les coordonnées du pointeur en Y
function mousepositiony(e)
{
  var mouse_y;
  if (parseInt(navigator.appVersion) >= 4)
  {
    if (navigator.appName == 'Netscape')
    {
    mouse_y = e.pageY;
    }
    else
    {
    mouse_y = event.y;
    }
  }
  return mouse_y;
}

//Fonction pour placer le div, lancée par un onclick sur la page
function test()
{
  document.getElementById("infobox2").style.top = mousepositiony(event);
  document.getElementById("infobox2").style.left = mousepositionx(event);
}


Pouvez-vous m'aider?

Merci d'avance.

A+
Modifié par Tranus (23 Jan 2007 - 19:50)
Heuu...

SOUS TOUTES RESERVES :

1/ Je crois que tu oublies scrolltop dans ton calcul :

event.y+document.body.scrollTop;

id pour x avec scrollLeft.

2/ Je pense qu'ensuite il te faudra concatener "px" à la fin de ton assignation à ... .style.top et .style.left.
Modifié par aCOSwt (18 Jan 2007 - 12:34)
Bonjour,

Non, ça ne change rien. D'ailleurs, quand je fait un:

alert(document.body.scrollTop);

La valeur renvoyée est égale à zéro, donc pas d'effet sur les coordonnées...

Une autre idée?

A+
1/ Dans tes deux procédures mousepositionx et mouseposition y,

écris donc e.x et e.y plutôt que event.x et event.y

2/ Et si tu remplaces document.body.scrolltop par :

document.documentElement.scrollTop ?
Sujet clos
Aller à