click time and where

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
fred
Forum Newbie
Posts: 7
Joined: Wed Jul 24, 2002 11:18 am
Location: England / Deutschland

click time and where

Post by fred »

Hi folks,

I want to know how long somone clicked on an image and where. (ie. the time difference between mouse down and mouse up).

Should be simple!

This data will be passed as parameters to a php script.

I'm a newbee hacker at javascript :? and I've got some ideas of how to do it but I suspect there is a better way...

Code: Select all

<script>
	down_time =  new Date();
	up_time   =  new Date();
    function up()
	&#123;
		up_time = new_date;
		difference= up_time - down_time;  // milliseconds!
		
		location="foo.php?clicktime=" .difference . "&" . XY coords???? 
	&#125;
    function down()
	&#123;
		down_time = new Date;
	&#125;
 </script>
and the image to be clicked on:

Code: Select all

<img src="foo.gif" width="50" hight="50" onMouseUp="up()" onMouseDown="down()">
I don't have any ideas on how to get the X Y Coords yet.

----------------

So any thought or help would be great.

> Fred
User avatar
llimllib
Moderator
Posts: 466
Joined: Mon Jul 01, 2002 2:19 pm
Location: Baltimore, MD

Post by llimllib »

Fred,

look on this page, about halfway down, at the screenX and screenY properties. This is just a quick guess - I find javascript such a pain that I avoid it when possible, but when I do need it, the reference I linked to is indispensible.
daemorhedron
Forum Commoner
Posts: 52
Joined: Tue Jul 23, 2002 11:03 am

Post by daemorhedron »

I just went through this, as I've recently been working with JS and now DOM. I am sure there is better, but I wrote a little lib to track the x and y of the users mouse. Seems to work in ns6, moz1, and ie6, but not tested beyond that.

Code: Select all

<!--

var 
    isNetscape=false;
    var cx=0;
    var cy=0;

function xpos() &#123;
   return cx;
&#125;

function ypos() &#123;
   return cy;
&#125;

function xy(x,y) &#123;
    cx = isNetscape ? x : window.event.x;
    cy= isNetscape ? y : window.event.y;
   window.status=cx+":"+cy;
&#125;

if (navigator.appName=="Netscape") &#123;
  isNetscape=true;
  document.captureEvents(Event.MOUSEMOVE);
&#125;

-->
HTH! =)
daemorhedron
Forum Commoner
Posts: 52
Joined: Tue Jul 23, 2002 11:03 am

Post by daemorhedron »

oops! you have to have onmousemove="xy(event.pageX,event.pageY);" in the <body> tag of your html doc. I am trying to find a way to avoid that, as I want the lib to be more stand alone. Any advice on that would be helpful (and document.onmousemove=xy in the script doesn't count! heh) .
User avatar
fred
Forum Newbie
Posts: 7
Joined: Wed Jul 24, 2002 11:18 am
Location: England / Deutschland

Post by fred »

Thanks llimllib, great link. So the Click time problem is solved.

But the XY coords of the image is still a problem: :(

event.x event.y give the coordinates of the page not the image.

How can I find the Origin of the Image relative to the page.


Here's my code so far...

Code: Select all

downDate = new Date();
diff=0;
document.write("Hello" + diff + "World");

function down()
&#123;
	downDate = new Date();
&#125;

function up()
&#123;
	upDate = new Date();
   diff = upDate-downDate;
	alert("time:" + diff + " x:" + event.x + " y:" + event.y);
	//netscape: event.layerX
&#125;
I can "hack" code so the Forum doesn't have to write the complete solution for me.
Fred
User avatar
llimllib
Moderator
Posts: 466
Joined: Mon Jul 01, 2002 2:19 pm
Location: Baltimore, MD

Post by llimllib »

did you try the screenX and screenY properties too? they seemed right, but one of the problems with javascript is that each browser interperets the 'screen' differently - some include the nav bar, some don't, some include the scrollbar, some don't, so I don't think you're ever going to find an exact solution. Oh well, enough tangent for the morning.
fatalcure
Forum Contributor
Posts: 141
Joined: Thu Jul 04, 2002 12:57 pm
Contact:

:O :) :| :/ :) :P :o

Post by fatalcure »

hey, see if this is what u wanted:

Code: Select all

<script language="javascript">
function BrowserCheck() &#123;
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.v = parseInt(navigator.appVersion)
	this.ns = (this.b=="ns" && this.v>=4)
	this.ns4 = (this.b=="ns" && this.v==4)
	this.ns5 = (this.b=="ns" && this.v==5)
	this.ie = (this.b=="ie" && this.v>=4)
	this.ie4 = (navigator.userAgent.indexOf('MSIE 4')>0)
	this.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0)
	if (this.ie5) this.v = 5
	this.min = (this.ns||this.ie)
&#125;

// automatically create the "is" object
is = new BrowserCheck();

originX = 0;
originY= 0;

function GetXY(e) &#123;
	originX = (is.ns)? e.pageX : event.x+document.body.scrollLeft;
	originY = (is.ns)? e.pageY : event.y+document.body.scrollTop;
&#125;

down_time =  new Date(); 
up_time   =  new Date(); 

function up() &#123;
	up_time = new Date(); 
	difference= up_time - down_time;  // milliseconds! 
	alert("Time: "+difference+"ms\nX: "+originX+"\nY: "+originY);
&#125; 

function down(e) &#123; 
	down_time = new Date();
	GetXY(e);
&#125; 

if (is.ns) document.captureEvents(Event.MOUSEDOWN);

</script>

<img src="foo.gif" width="50" hight="50" onMouseUp="up()" onMouseDown="down()">
If you want the ACTUAL location of the image, and not the X-Y coordinates of WHERE ON THE IMAGE the mouse was clicked, this isnt the way to go, you need to mess around with the <DIV> for that, and using javascript you'll be able to get the X-Y coordinate of the IMAGE and not where the mouse was clicked on the image.

Play around with it, if you still need help w/ the div tag, post again.

:)
Post Reply