Jump to content

"window.event Not Defined" Only In Ff

GerryH

By GerryH
in JavaScript

Recommended Posts

GerryH Newbie

GerryH

Posted
Posted

I'm sorry if this has been addressed before, but after Googling my head off, I'm still stuck in the mud. Simply I'm getting the mouse coords so I can position an element, which works great in Chrome, Opera, Safari, and even (GULP) IE, but FF kicks the error "window.event not defined". I've tried several varations, and tried some suggestions I found on google, but still no joy.

function showTip(e){	var evt = window.event? event : e  	var tip = document.getElementById('tool');	tip.innerHTML = ""+evt.clientX+" "+evt.clientY+"";	tip.style.left = ""+evt.x+"px";	tip.style.top = ""+evt.y+"px";	tip.style.visibility = "visible";}

<div class="tooltip" id="tool" onmousemove="showTip(event)" onmouseout="hideTip()">

Any ideas would be welcomed, thanks!

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Reverse your syntax, which you can also simplify:evt = e || window.event;e might not have a value in older versions browsers, but it will always exist by virtue of being defined as a function parameter. So check for its value first.

Link to comment
Share on other sites
GerryH Newbie

GerryH

Posted
  • Author
Posted

Thank's for the quick reply DD, but still kicks me in the teeth tossing the same error "evt is undefined if FF".

function showTip(e){	var evt = e || window.event;	//var evt = window.event? event : e 	var tip = document.getElementById('tool');	tip.innerHTML = ""+evt.clientX+" "+evt.clientY+"";	tip.style.left = ""+evt.x+"px";	tip.style.top = ""+evt.y+"px";	tip.style.visibility = "visible";}

This is using FF version 3.0.14 BTW.Thanks again for responding! :)

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Weird. I stripped it down to just this, and it works fine:

function showTip(e){	var evt = e || window.event;	alert (evt);}

Try putting this line at the top of the function as a temporary test:alert(e);return;If e still comes up undefined, then the event is not getting passed to the function correctly. But I'm using your <div> tag also, and it works for me. So that would be a puzzle.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I wonder if part of the problem is using onmousemove instead of onmouseover . No one much uses the former anymore. Try changing it.If that doesn't work, or even if it does, try assigning the handlers in the script itself (which is best practice anyway):

function init () {	document.getElementById("tool").onmouseover = showTip;	 document.getElementById("tool").onmouseout = hideTip; }window.onload = init;*	 *	 *<div class="tooltip" id="tool">

The absence of quotes and parentheses is correct, by the way. We're assigning a function reference, not a string to be evaluated. The event object is passed implicitly.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

made amendments and works fine(1) closing </div> tagEdit: (2) x and y are undefined possibly should be tip.style.left = ""+evt.clientX+"px"; tip.style.top = ""+evt.clientY+"px";(3)created hideTip() function(4)temporarily div height, width to 100px.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showTip(e){ var evt = window.event? event : e var tip = document.getElementById('tool'); tip.innerHTML = ""+evt.clientX+" "+evt.clientY+""; tip.style.Left = ""+evt.x+"px"; tip.style.Top = ""+evt.y+"px"; tip.style.visibility = "visible";}function hideTip(){alert("just moved outside of div")}/*--*//*]]>*/</script> <style type="text/css">#tool {height:100px; width:100px; background-color: #FFFF99;}</style></head><body><div class="tooltip" id="tool" onmousemove="showTip(event)" onmouseout="hideTip()"></div></body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
style.top should be style.Top, and style.left should be style.Left
Javascript style properties should all be in lower camelCase. Maybe that'll work with a transitional doctype, but not with a strict doctype, not in Firefox.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

My bad!, should be lowercase, think i thinking of borderLeft etc, I should have checked, I changed to Left and javascript warning cleared.the problem with is ""+evt.y+"px" where y or x is defined, i don't know if this is defined somewhere else? or should they set with ""+evt.clientY+"px" or ""+evt.clientX+"px", if so you will need to set postioning to tip.style.position="relative";.

Link to comment
Share on other sites
GerryH Newbie

GerryH

Posted
  • Author
Posted

Thanks for all the help gents, but I think I have some other side issues on this page other than the snippet I provided. First trying the mouseover event didn't change anything (actually that event isn't really desirable for the "tool-tip" effect) however assigning the function to the event(s) in script rather than HTML worked without any problem.I believe something else in my scripts or perhaps my nasty nested tables :) is stoming on the event object in FF, as like DD had tried, had no problems isolating just that one function In a simple single <div> in the body.Thanks again!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...