Getting first element with javascript

**rajug** · 01-22-2007, 08:22 AM

Hello all,

Can i track that what the first element in the page is And its X and Y coordinates?

Thanx in advance.

With Regards
Raju Gautam

**jscheuer1** · 01-22-2007, 08:58 AM

Code:

function findFirstElPos(){
var firstEl=document.body.getElementsByTagName('*')[0];
var ol=firstEl.offsetLeft+document.body.offsetLeft+document.body.parentNode.offsetLeft;
var ot=firstEl.offsetTop+document.body.offsetTop+document.body.parentNode.offsetTop;
alert('The first element on this page is '+ol+' from the left and '+ot+' from the top')
}
onload=findFirstElPos;

**rajug** · 01-22-2007, 09:24 AM

Thank you very much jscheuer1 for the quick reply and it helped me out. But still I want to track the position of the first element from the absolute point. For example my first element <table> is centered with the width of 781px. And i want to track the position of the <table> tag's X position from the absolute point.

Umm! could i make you understood about my problem?

Is it possible?

With Regards.
Rajug

**jscheuer1** · 01-22-2007, 04:14 PM

What do you need that information for? Where will it be used? Here is a script that will do that but, if I knew what it was for, I would probably write it differently:

Code:

<script type="text/javascript">
function findPos(obj) {  //from www.quirksmode.org
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}  //end quirksmode code

function track_first_el(){
var el=document.body.getElementsByTagName('*')[0];
return findPos(el)[0];
}

function keep_track(){
document.getElementById('tracker').value=track_first_el();
}

function init_track(){
var tracker=document.createElement('input');
tracker.type='text';
tracker.style.position='absolute';
tracker.style.top=tracker.style.left='20px';
tracker.id='tracker';
document.body.appendChild(tracker);
setInterval("keep_track()", 300);
}

onload=init_track;
</script>

**rajug** · 01-23-2007, 04:59 AM

Hello jscheuer1,

I am really grateful to you that you made those functions for me. Thank you very much.

Actually i want to track those click X and Y positions that the visitor clicks on the page which clicks are actually inside my web pages actual contents. Not outside.

Therefore, yesterday i tried from different ways and i find that the problem is in the browser. It shows the actual value from absolute left in Internet Explorer but not in Mozilla (firefox).

So do you know how can we track that in Mozilla?

Thanx in advance.

With Regards
Raju Gautam

**jscheuer1** · 01-23-2007, 05:19 AM

Have a look here:

http://www.quirksmode.org/js/events_....html#position

**rajug** · 01-23-2007, 10:08 AM

So jscheuer1, isn't there any way to track the coordinates (X and Y) from absolute left? What may be the solution jscheuer1 for me? Can you help me on that something more?

**jscheuer1** · 01-23-2007, 10:17 AM

That is what the script at the link I supplied in my last post in this thread does, it tracks the mouse position in absolute terms.

**rajug** · 01-24-2007, 07:07 AM

I really could not find the exact value in Mozilla fire fox. What may be the solution. I saw that link that you given to me, but that also could not solve my problem.

It shows the exact absolute value from left in IE but just 0 in Mozilla Firefox.

Code:

	function calculeOffsetLeft(r){
		return calculeOffset(r, "offsetLeft");
	}
	function calculeOffsetTop(r){
		return calculeOffset(r, "offsetTop");
	}
	function calculeOffset(element, attr){
		var offset = 0;
		while(element){
			offset += element[attr];
			element = element.offsetParent;
		}
		return offset
	}
	function track_first_el(){
		//find the first element in the screen after body
		var el = document.body.getElementsByTagName('*')[0];
		alert(calculeOffsetLeft(el));
	}
	onload = track_first_el;

**jscheuer1** · 01-24-2007, 07:50 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {
text-align:right;
}
</style>
<script type="text/javascript">
function doSomething(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
document.getElementById('xval').value=posx;document.getElementById('yval').value=posy;
}
document.onmousemove=doSomething;
</script>
</head>
<body>
Mouse Left:<input id="xval" type="text" size="6"><br>Mouse Top:<input id="yval" type="text" size="6">
</body>
</html>

If you are using this as an attribute event, like an onclick event of an element, you need to include the event keyword for FF to pick it up:

<span onclick="doSomething(event);">Click</span>

Thread: Getting first element with javascript

Thread Tools

Search Thread

Getting first element with javascript

Bookmarks

Bookmarks

Posting Permissions