PDA

View Full Version : 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
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:


<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_properties.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.



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
<!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>

rajug
01-24-2007, 10:14 AM
Thank you very much again jscheuer1 for the help. But i want the X and Y values of the first element in the page (or of any element) not the mouse position. Please test your this code in mozilla:


<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>


And see what and how the coordinates does it show?

Basically, I want the click values but i don't want to track the clicks before the first element. I mean i want to ignore the clicks outside the html. Suppose the main table after the body tag has width 780 and centered. So i want to track the clicks occured sinde that area.

I am sorry to bother you again and again.

With Regards
Raju Gautam

jscheuer1
01-25-2007, 06:10 AM
It is hard to hit a moving target. You seem to keep changing what you want. I have provided code and/or links to code with which you can achieve your objective.

If I understand, you want to 'track' clicks within a table. Depending upon what you mean by that, the simplest method would be:


<table onclick="alert('You clicked the table!');"><tr><td>Hi!</td></tr></table>

If you want the coordinates of those clicks:


<!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">
<script type="text/javascript">
function getCoords(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;
}

return [posx, posy]

}
</script>
</head>
<body>
<table onclick="alert(getCoords(event)[0]+' by '+getCoords(event)[1]);"><tr><td>Hi! Hi! Hi! Hi! Hi! Hi! Hi! Hi! Hi! </td></tr></table>
</body>
</html>

If you want to do this without an event or id attribute in the HTML markup, relying on your table being the first element on the page:


<!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">
<script type="text/javascript">
function getCoords(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;
}

alert (posx+' by '+posy);

}

function init_first_el(){
document.body.getElementsByTagName('*')[0].onclick=getCoords;
}

onload=init_first_el;
</script>
</head>
<body>
<table><tr><td>Hi! Hi! Hi! Hi! Hi! Hi! Hi! Hi! Hi! </td></tr></table>
</body>
</html>

Since I still haven't seen any reason why you are dong this, it is hard to be any more specific.