Question

I read this article regarding creating popup notes with javascript and css

The problem is that this one works only in IE since window.event is undefined in Firefox.

// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;

So could you point me a fully working example? Or at least, how could i modify the javascript code to make it work in both internet browsers?

Answer 1

There are more than two browsers, but the following should work in most of them (adapted from the function on the page you linked to):

showNote = function(evt) {
    evt = evt || window.event;
    // gets note1 element
    var note1=document.getElementById('note1');
    // assigns X,Y mouse coordinates to 'note1' element
    note1.style.left=evt.clientX;
    note1.style.top=evt.clientY;
    // makes note1 element visible
    note1.style.visibility='visible';
};

The problem is that not all browsers have an event property of window and instead use an event object implicitly passed in as a parameter to an event handler function such as showNote. The evt = evt || window.event; line assigns window.event to the evt variable if no event parameter was passed into the function (which is what happens in Internet Explorer).