find X Y positions of an element

[ericc]

Hello all

I have a strange problem.
I made a web page with a search box. When you type something in the box an Ajax function retrieve suggestion from the server and display them in the div below the box. (you can even click on a name in the suggestion list).

Actually, I have a template build mostly with table and it works nicely !

I try to make a new template where I use a lot of div (for transparency mainly).
When I use this template, the position of the search box is not correctly computed any more and the suggestion list appear at a wrong position :confused:

I have searched for a solution with Google and tested various javascript function but all with the same result !
I tried function from this page : http://www.roscripts.com/snippets/show/225 (which is very similar to what I already used)
and also this one : http://www.javascripttoolbox.com/lib/objectposition/index.php
but all give me the same result ...

The page is located here :
http://fgs.ericc-dream.fr.nf/index.php?module=player
the search box is "Rechercher un joueur" ('search a player' in french)

Someone have any suggestion ?

Thanks in advance for your help

ericc

[molendijk]

Maybe you can use this (http://www.let.rug.nl/molendyk/follow_mouse/follow_mouse.html). (Click on the links to see how it works).

Bonne chance,
Arie Molendijk.
===

[ericc]

Heel bedankt voor het antwoord ;)

Tracking the mouse position ! This is an idea.
At first, I thought that it was not applicable for my page but after some try I made it work.

it's not perfect because my site is build in a modular way and I like to keep everything related to a module in this module (here I'm obliged to put the div in the main file and also the style in the main css file) and also the popup appear at the mouse position instead of just under the text box as it was previously

Anyway, I think I can live with it as I don't have a better solution for the moment

*nb : I have rewritten some part of your code to adapt it to my particular case.
I have also added a control to avoid that the popup appear (partially) out of the visible part of the document.
Also you know that when you have a lot of "document.getElementById(which)" , you can use an object instead.

//Hide div
function hide_div(which)
{
if(document.getElementById(which).style.visibility=='visible' && document.getElementById(which).style.display!='inline-block')
{document.getElementById(which).style.visibility='hidden';document.getElementById(which).style.top='-10000px';}

else if(document.getElementById(which).style.display=='inline-block' && document.getElementById(which).style.visibility!='visible')
{document.getElementById(which).style.display='none'}
}
become

//Hide div
function hide_div(which)
{
var obj = document.getElementById(which);
if(obj.style.visibility=='visible' && obj.style.display!='inline-block')
{
obj.style.visibility='hidden';
obj.style.top='-10000px';
}
else if(obj.style.display=='inline-block' && obj.style.visibility!='visible')
{
obj.style.display='none';
}
}
faster and clearer (imho)

ericc

[ggalan]

i asked a similar question not too long ago
http://www.dynamicdrive.com/forums/showthread.php?t=59180

[jscheuer1]

If you want the top and left coords of an element:

http://www.quirksmode.org/js/findpos.html

is a good explanation. Unfortunately it doesn't show the finished code, which is:


function findPos(obj) {
var curleft = curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}

It does explain that this outputs an array, but doesn't spell out how to use that, here's an example (say you have an element with an id of test):


var testOff = findPos(document.getElementById('test'));
alert("test's left offset on the page is: " + testOff[0] + '\n' +
"test's top offset on the page is: " + testOff[1]);