PDA

View Full Version : Can i track clicked tag name?



rajug
03-11-2007, 05:05 AM
Hello there all,

I have tracked the click and its x and y coordinates. But now I want to track whether the clicked tag is anchor or not. I want to track the clicked x and y coordinates only if the clicked tag is anchor.

Is it possible to track the clicked tag name?

Help would be appreciable.

jscheuer1
03-11-2007, 06:18 AM
document.onclick=function(e){
var e=e? e : window.event;
var targ=e.target? e.target : e.srcElement;
if(targ.tagName.toLowerCase()=='a')
alert('it\'s an anchor')
}

rajug
03-11-2007, 06:59 AM
Thank you jscheuer1 for the code. I was not careful on my code before. But when i tried to find clicked X and Y coordinates the following code give me the different values in different clicks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
document.onclick = function(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;
}
//var e = e ? e : window.event;
var targ = e.target ? e.target : e.srcElement;
if(targ.tagName.toLowerCase() == 'a')
alert('It\'s an anchor\r\nX = ' + posx + '\r\nY=' + posy)
}
</script>
</head>
<body style="margin:0px;">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
<tr>
<td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
</tr>
<tr>
<td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
<td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">

<tr>
<td colspan="4" align="left"><a href="javascript:void(null);">New Tab</a></td>
</tr>
<tr>
<td width="100%" colspan="4" align="left">&nbsp;</td>
</tr>
<tr>
<td colspan="4" id="TabsCol"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
</tr>
</table>
</body>
</html>


Please find the mistake that i had taken on this code. How can i track the exact x and y coordinates in at least two browsers IE and FF?

jscheuer1
03-11-2007, 07:24 AM
You have the coords. They are for the click. Perhaps you want the x and y offset of the clicked element?

rajug
03-11-2007, 07:31 AM
Oh yes exactly.

How can i do this?

Actually i also want to track the offset of the first element of the page. Suppose sometime if the page is 100&#37; width the first element's offset x and y will 0 and if the page is centered with some specified size, then how can find that how far the first element is from the left so that i can track the offset of the clicked element only of inside the first element.

Could i make you understood what i mean to say?

jscheuer1
03-11-2007, 07:40 AM
<script type="text/javascript">

document.onclick = function(e){
var curleft = curtop = 0;
var e=e? e : window.event;
var obj=e.target? e.target : e.srcElement;
if (obj.offsetParent&&obj.tagName.toLowerCase() == 'a') {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
alert('It\'s an anchor\r\nX = ' + curleft + '\r\nY=' + curtop)
}
}

</script>

rajug
03-11-2007, 08:00 AM
Thank you very much jscheuer1. It worked.
I am sorry if i am expecting too much from you but how can i find that clicked element's offset values from the first element of the page not from the absolute left? Suppose table is the first element after body and the table has the width 780px that is centered. So i want to know the offset of the clicked element from that table not from the absolute left.

rajug
03-12-2007, 05:03 AM
Is any one javascript expert caring about my post and problem there please? Please if anyone is known to this issue, help me out.

jscheuer1
03-12-2007, 05:28 AM
I think that you already know that there is a bug in FF that prevents this being done in the usual manner with centered tables. FF sees the offsetLeft of a centered table as 0. It could probably be worked out for your layout though but, it would be specific to that (or that type of) layout.

jscheuer1
03-12-2007, 05:44 AM
For instance, this works with the specific layout you used:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
function findPos(obj) {
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];
}
document.onclick = function(e){
var e=e? e : window.event;
var obj=e.target? e.target : e.srcElement;
if (obj.tagName.toLowerCase() == 'a') {
var curleft = curtop = 0;
var firstel=document.body.getElementsByTagName('*')[0];
firstel.offL=0;
if(findPos(firstel)[0])
firstel.offL=findPos(firstel)[0];
else if(window.innerWidth&&document.body.clientWidth)
firstel.offL=Math.round(document.body.clientWidth/2-firstel.width/2);
curleft=findPos(obj)[0]-firstel.offL, curtop=findPos(obj)[1]-findPos(firstel)[1]
alert('It\'s an anchor\r\nX = ' + curleft + '\r\nY=' + curtop)
}
}

</script>
</head>
<body style="margin:0px;">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
<tr>
<td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
</tr>
<tr>
<td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
<td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">

<tr>
<td colspan="4" align="left"><a href="javascript:void(null);">New Tab</a></td>
</tr>
<tr>
<td width="100%" colspan="4" align="left">&nbsp;</td>
</tr>
<tr>
<td colspan="4" id="TabsCol"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
</tr>
</table>
</body>
</html>

rajug
03-12-2007, 06:06 AM
So, can i say that it is totally impossible to find the exact position of an anchor element in both IE and Firefox? Is there any tricky way to find such. I am sorry to say that i am not talking about specific layout. Can you suggest me to solve the problem. I need this.

jscheuer1
03-12-2007, 07:04 AM
Nope, it is a known bug. If you need it so badly, show me the actual pages it will be used on. That way I can at least tell you if there is any code you can use in your situation. The code I did write out for you will work with a table as the first element as long as it has a width attribute expressed as an integer (as yours does).

rajug
03-12-2007, 07:22 AM
OK i will come after a few minutes having my lunch and post my situation. But the situation varies not specific.

rajug
03-12-2007, 07:50 AM
I am preparing a site which tracks others' site registered in my site. So actually this is my tracking web site. When someone registers his/her website to my website i will generate some javascript code that is to be installed in his/her website. Now i want to track where (in which link) the users are clicking in his/her website. I want to know the exact clicked position of his/her web page so that i can later generate the heat map image with those click values. If the values vary (in IE and FF), then my heat map image may not be proper.

So, there wont be any known specific layout. That may be of any width of the site's page.

Does this make any sense to understand about my situation.

jscheuer1
03-12-2007, 08:35 AM
Heat Maps are where people look, not where they click. Javascript can do nothing for this.

You could track which link was clicked by giving each a unique id. Positions would shift beyond what you seem to anticipate though in many designs. Fluid pages could have the same link appear at 300x200 and 150x800 and it wouldn't matter what element on the page it was relative to, there would still be wide variations.

rajug
03-14-2007, 08:23 AM
Hello jcheuer1,

I have seen that one site which creates the heat maps has probably done this. I mean they have tracked the absolutes values then they have created the heat maps and other things. Please have a look on the following link and see so that you can find whether they have tracked or not. I am not saying that you have to do for me if you see this you may know they have done this or not.

http://crazyegg.com/snapshots/windshield/18

With Regards
Raju Gautam

jscheuer1
03-14-2007, 05:08 PM
That example has no tables.

You can do a 'heat map' (it's really a Click Map not a Heat Map) like that for pages that don't rely upon a table as their top element. You had specified that you have no control over the other pages though and seemed to indicate that you wanted a table - at least as a possibility for the top element.

In reality, the top element is the body and many times the designer just uses that. When there is a container for the page it can be various things (elements) and it may or may not be centered. The table element in itself is only a problem for this due to the bug in FF. The code I wrote you for that will usually take the left offset if available and figure it out in another manner if possible.

I think that what you are looking for though is a bit beyond the scope of the forums here. You should be able to take code suggestions and use them for your project. Not have me or other members of the forum complete the project for you.

rajug
03-15-2007, 04:54 AM
I am sorry that i made you guys disturbed here. I thought that it is possible to do and my client also wants me to do this anyway. I am not sure that whether i can do this or not. Hoping to have at least a solution from the forums i am just roaming around the forums.

Thank you very much jcheuer1 that you took my post and tried from your side. I would like to come to you again and again for other some types of problems.

jscheuer1
03-15-2007, 03:44 PM
I don't think disturbed is the right word. I just have a finite amount of time and although I will often complete a small project in some cases here in the forums, I will only undertake what looks to be a major one if I have a lot of free time and the project interests me and I think it can be done. I may have been a little too hard on you though, rajug. It is a fine line between offering code solutions and actually doing the whole project for someone. Sometimes the testing required to determine if a given solution is adequate amounts to nearly doing the entire project. In this case, there could need to be cross domain testing which is always more involved than a local demo. If you could take the code I offered, try it out, find and report any limitations, I may be able to advise you further on this matter, such as additional code tests to determine which method of finding the first element's left offset is most appropriate. It is unfortunate that FF has this bug, otherwise the matter would be quite simple. Except, I question your apparent premise that your link will be contained within the first element on any given page. It could be a direct descendant of the body or perhaps of the third element. If the third, that element may descend directly from the body, making the first element potentially irrelevant as far as the left offset of your link goes, this could probably be tested for and taken into account, perhaps not in the case of certain types of floats. As the design becomes increasingly complex and/or fluid, no method may be adequate as, the entire appearance of the page would vary from browser to browser and in various sized windows. The web is not a magazine.

The real problem with this whole concept is that it appears to assume a certain type or types of layout while, at the same time, you say that isn't under your control.

I will look at other posts from you about other matters as separate from this.