Get Pixel Location of a DIV element 1

[Billkamm]

I have a div tag with an id attribute set.

I have searched all over google and I can't figure out for the life of my how to get the screen position in pixels of this element.

I want to position a tooltip relative to this div tag, so I wanted to add these numbers to the tooltip's .style.top and .style.left properties.

 

[BillyRayPreachersSon]

You don't need to know its position to position something relative to it. For example, if this is your div element:

<div id="myDiv">

   ... some stuff here ...

</div>

then this will make sure that a tooltip is always positioned relative to it:

var myDiv = document.getElementById('myDiv');
myDiv.style.position = 'relative';

var toolTipDiv = document.createElement('div');
toolTipDiv.style.width = '100px';
toolTipDiv.style.height = '20px';
toolTipDiv.style.position = 'absolute';
toolTipDiv.style.top = '10px';
toolTipDiv.style.left = '10px';
toolTipDiv.style.backgroundColor = 'gold';

myDiv.appendChild(toolTipDiv);

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Billkamm]

My control is actually a <span>. I'm using ASP.Net and it renders the labels as <span> tags apparently and when I use that code it tells the object does not support that method.

I tried using the offsetTop and offsetLeft properties, but they return a really small number and the <span></span> tag is really far down on the page. Is there something I'm not understanding?

 function displayToolTip(tooptipId) {
 	var tooltiptop;
 	var tooltipleft;
 	var target;

   	target = document.getElementById( tooptipId );
   	tooltiptop =  lblStateTooltip.offsetTop + 20;
 	tooltipleft = lblStateTooltip.offsetLeft + 15;

   	target.style.visibility = "visible";
 	target.style.top = tooltiptop;
 	target.style.left = tooltipleft;
 }

 

[BillyRayPreachersSon]

Did you not get any joy using the code I gave in my previous example?

You might also want to look into the "scrollLeft" and "scrollTop" properties.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Billkamm]

I was getting an error on the line:
myDiv.appendChild(toolTipDiv);

saying that the object does not support this method.

Are there any tools for debugging javascript? The useless error message pop-up in MSIE isn't very helpful to me to figuring out what is wrong. I wish I could step through the code.

 

[BillyRayPreachersSon]

Does myDiv point to a real element? In the example I gave, the div happened to have an ID of "myDiv". If yours does not, obviously you will need to change this.

MS do a free script debugger here:

http://www.microsoft.com/downloads/...e0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en

Or you can download Firefox and the Venkman debugger - also free.

Hope this helps,
Dan




[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Billkamm]

I couldn't get the debugger to work I'm using VS.Net which is supposed to be able to debug this as well, but I can't get that to work either.

Anyway I got your .appendChild code to work, but when it appears it is behind the dropdownboxes on the page. Is there a way to get this to appear in front of my dropdownlists?

 

[BillyRayPreachersSon]

Not without using iframes, no.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Billkamm]

Yeah I looked up an iframes example it works really well.

I only have one problem my target (that object that has the tooltip dispalyed for it) changes after the tooltip is displayed so that it now displays above everything.

I didn't code that to happen, so I'm not sure what is going on. Oh well.

 

[BillyRayPreachersSon]

You could possibly try setting its z-index... could be a factor?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Billkamm]

I tried changing its z-index to - 1 of that of the tooltip after the tooltip is displayed and after it is removed, but I still have the same problem. I don't seem to make much logical sense why it is doing this.

For the moment I have put it aside as something to come back to.