Clicked Element Position

**Strangeplant** · 12-11-2008, 06:32 PM

I have an onClick event and I need to determine the screen Y position top of the <li> element that is clicked on. How can I do that? (vertical displacement from the top of the screen) The <li> element just happens to be in a scrollable div.

**jscheuer1** · 12-12-2008, 03:44 AM

The event.screenY will get you the vertical screen offset of the click event. Is that good enough?

If you need the vertical screen offset of the element clicked though, you would need to find the difference between the vertical offset of the element in the window and the vertical offset of the click event in the window and apply that to the vertical offset of the click event in the screen.

Unfortunately, getting a vertical offset (generally its offsetTop) relative to the window/page for an element that can be scrolled as you described may not be possible, I just don't know for sure, I'd have to test it out with your markup and other script code. The scrollTop & offsetTop of the container division combined with the li's offsetTop in the division might be useful though. These would only be available and necessary in some browsers. In other browsers, the offsetTop of the li might be accurate. There may be some browsers that neither approach would work in.

I'm curious though, why would you even want a screen Y position in the first place? It would vary widely depending upon whether the window were maximised or not, and if not - upon where on the user's screen the window is located.

Some useful stuff:

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

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

http://www.quirksmode.org/dom/events/index.html

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

**vwphillips** · 12-12-2008, 11:51 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Test(id){
 var zxcobj=document.getElementById(id);
 document.Show.Show0.value=zxcPos(zxcobj);

}
function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft-zxcpar.scrollLeft;
  zxctop+=zxcpar.offsetTop-zxcpar.scrollTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}

/*]]>*/
</script></head>

<body>
<input type="button" name="" value="Test" onclick="Test('tst');"/>
<div style="overflow:auto;width:100px;height:100px;border:solid black 1px;" >
<div id="tst" style="width:400px;height:200px;border:solid black 1px;" >rrrrrrrrr<br />RRRRRRRRR</div>

</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

</body>

</html>

**Strangeplant** · 12-12-2008, 02:35 PM

Thanks, John, for the link. The first one had it - and I was trying something like that, but had not figured out the 'do' loop. Ended up with this extracted from the first link you provided:

Code:

	<script type="text/javascript">
		var curtop = 0;
		function findTop(obj) {
			curtop = 0;
			if (obj.offsetParent) {
				do {
					curtop += obj.offsetTop;
				} 
			while (obj = obj.offsetParent);
			return curtop;
			}			
		}
	</script>

I needed this function to call in an element, like this:

Code:

	<li onMouseover="findTop(this)"><a href="someLinkToCall">Index<br>line</a></li>

to return the container offset value which I used to fix jQuery for the vertical slider correct orientation of the pointer to the text holding element. Now works perfectly. Thanks.

Thread: Clicked Element Position

Thread Tools

Search Thread

Clicked Element Position

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions