Jump to content

event . clientY/event . clientX


Recommended Posts

I've gotten this tooltip to work just like I want it to—in Opera 10.53 and Internet Explorer 6, with the latter probably being more of a bad sign than a good one. Unfortunately, it bugs out in Firefox 3.0 and 3.6, K-Melon 1.5.3, and Flock 3.0, and I've got no idea why. If I remove the scroll-detection model block, then ‹asdf› appears, but only in its normal position, not where the cursor is.

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html	lang="en"	dir="ltr"	xml:lang="en"	xmlns="http://www.w3.org/1999/xhtml"><head>	<title>test</title><script type="text/javascript"><!--var tooltip = function(a, b, c, d)	{	// ‹a› is the element id.	// ‹b› is the display type.	// ‹c› determines whether we're setting new text to be displayed or not.	// ‹d› is either a number used to select from the genericText array	// or a string of text.	// If the browser is Internet Explorer, use its window scroll-detection model.	if (navigator . appName == "Microsoft Internet Explorer")		{		var vertical	=	event . clientY  +  document . body . scrollTop;		var horizontal	=	event . clientX  +  document . body . scrollLeft;		}	else if (navigator . appName != "Microsoft Internet Explorer")		{		var vertical	=	event . clientY  +  window . pageYOffset;		var horizontal	=	event . clientX  +  window . pageXOffset;		}	var genericText = new Array();/*	DESCRIPTION	*/		genericText[0]	=	"Explanation 1.";/*	DESCRIPTION	*/		genericText[1]	=	"Explanation 2."/* DESCRIPTION	*/	genericText[2]	=	"Explanation 3."	if (c == 0 || c == 1)		{		document . getElementById (a) . style . display = b;		document . getElementById (a) . style . top = vertical + "px";		document . getElementById (a) . style . left = horizontal + 15 + "px";		if (c == 0)			{			document . getElementById (a) . innerHTML = d;			}		else if (c == 1)			{			document . getElementById (a) . innerHTML = genericText[d];			}		}	else if (c == 2)		{		document . getElementById (a) . style . top = vertical + "px";		document . getElementById (a) . style . left = horizontal + 15 + "px";		}	else		{		alert ('lol error\n\n\ncheck dat script yo');		}	}//--></script><style type="text/css">body	{	padding: 0px;	margin: 0px;	}div#asdf	{	display: none;	float: right;	position: absolute;	background-color: #FF0000;	}</style></head><body><span onmouseover="tooltip('asdf', 'inline', 1, 0);" onmousemove="tooltip('asdf', 'inline', 2, 0);" onmouseout="tooltip('asdf', 'none', 0, '');">TEST</span><div id="asdf">huh</div></body>

Edit: fixed the doctype and added + "px" to the end of the parts controlling ‹asdf›'s top and left properties, but still no dice.

Edited by BlueDigit
Link to post
Share on other sites

try adding event to function variables passedvar tooltip = function(event, a, b, c, d)<span onmouseOver="tooltip(event,'asdf', 'inline', 1, 0);" onmouseMove="tooltip(event,'asdf', 'inline', 2, 0);" onmouseOut="tooltip(event,'asdf', 'none', 0, '');">TEST</span>

Link to post
Share on other sites

Hey, that made it workwait, why did that make it work? If I'm reading the script right, it's basically making an in-script variable called event, which contains a JavaScript reference to event, so that in-script references to event are referencing the JavaScript event, which is basically what it should have been doing in the first place.Tangent aside, I'm grateful for the help. It works in all the browsers I mentioned.

Edited by BlueDigit
Link to post
Share on other sites

it was looking for the 'event' variable to refer to, 'event' refers to any action that has occurred be it onmouseover, onclick, onmouseout etc, on this event the variable is sent to the function so it has a reference to and can now process the rest of the code with this variable.var vertical = event.clientY + document.body.scrollTop;var horizontal = event.clientX + document.body.scrollLeft;

Link to post
Share on other sites

Another note, you should never ever use navigator.appName, or navigator.userAgent to detect which browser the user is using, as it can give misleading results, best option is to identify which method the browser is using 'window.event' or just 'event' then you can use below instead, in javascript only.var tooltip = function(e, a, b, c, d){if (!e){var e = window.event;}if (e){var vertical = e.clientY + document.body.scrollTop;var horizontal = e.clientX + document.body.scrollLeft;}else{var vertical = e.clientY + window.pageYOffset;var horizontal = e.clientX + window.pageXOffset;}rest of code....}EDIT: just usingvar vertical = e.clientY + document.body.scrollTop;var horizontal = e.clientX + document.body.scrollLeft;seems to work for all

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...