Mouse event capture failing in Firefox?

I'm trying to make this thing work in Firefox, because I know the client my game is on is pondering switching to Gecko (they're currently using something very similar to IE4 for browser windows launched in the client). This tooltip script works fine in IE, and the coordinates are apparently being read and changed in Firefox (I tossed in a div for debug), but I keep getting an "ev has no properties" error in Firefox and the tooltip div fails to appear.

Following is the entirety of the document I'm working on:

Expand|Select|Wrap|Line Numbers

 <head>

    <style type="text/css">

        #tooltip_div

        {

            position: absolute;

            visibility: hidden;

            z-index: 20;

            top: 0px;

            left: 0px;            

        }

        .tooltip_table

        {

            border: 0px;

            width: 250px;

            height: 80px;

            margin: 0px;

            padding: 0px;

            background-color: #404040;

            background: url('table_bg.PNG');

            color: #aaaaaa;

        }

        .tooltip_head

        {

            border: 0px;

            text-align: center;

            vertical-align: middle;

            height: 10px;

            font-family: verdana,sans-serif;

            font-size: 10px;

            background: url('title_bg.PNG');

            background-color: #808080;

            color: #aaaaaa;

        }

        .tooltip_content

        {

            border: 0px;

            margin: 0px;

            text-align: center;

            vertical-align: middle;

            font-family: verdana,sans-serif;

            font-size: 10px;

            color: #aaaaaa;

        }

    </style>

    <script type="text/javascript">

        if(!document.all) document.captureEvents(Event.MOUSEMOVE);

        document.onmousemove = realign_tooltip;
 
        var body_width = 0;

        var body_height = 0;

        var tooltip_x_offset = 15;

        var tooltip_y_offset = 15;

        var tooltip_div;
 
        function init_tooltip()

        {

            if(document.all)

            {

                body_width = document.body.clientWidth;

                body_height = document.body.clientHeight;

            }

            else

            {

                body_width = window.innerWidth;

                body_height = window.innerHeight;

            }

        }

        function show_tooltip(title,content)

        {

            tooltip_div = document.getElementById('tooltip_div');

            tooltip_div.innerHTML = ('<table class="tooltip_table"><tr><td class="tooltip_head">'+title+'</td></tr><tr><td class="tooltip_content">'+content+'</td></tr></table>');

            realign_tooltip();

            tooltip_div.style.visibility = 'visible';

        }

        function hide_tooltip()

        {

            tooltip_div.style.visibility = 'hidden';

            tooltip_div = null;

        }

        function realign_tooltip(ev)

        {

            ev = (ev || window.event);

            init_tooltip();

            if(tooltip_div)

            {

                if(document.all)

                {

                    tooltip_div.style.left = ((((ev.clientX+tooltip_x_offset+tooltip_div.clientWidth) <= body_width) ? (ev.clientX+tooltip_x_offset) : (body_width-tooltip_div.clientWidth))+'px');

                    tooltip_div.style.top = ((((ev.clientY+tooltip_y_offset+tooltip_div.clientHeight) <= body_height) ? (ev.clientY+tooltip_y_offset) : (body_height-tooltip_div.clientHeight))+'px');

                }

                else

                {

                    tooltip_div.style.left = ((((ev.pageX+tooltip_x_offset+tooltip_div.clientWidth) <= body_width) ? (ev.pageX+tooltip_x_offset) : (body_width-tooltip_div.clientWidth))+'px');

                    tooltip_div.style.top = ((((ev.pageY+tooltip_y_offset+tooltip_div.clientHeight) <= body_height) ? (ev.pageY+tooltip_y_offset) : (body_height-tooltip_div.clientHeight))+'px');

                }

                document.getElementById('debug').innerHTML = (''+body_width+'x'+body_height+'<br>'+tooltip_div.style.left+', '+tooltip_div.style.top);

            }

        }

    </script>

</head>

<body onload="init_tooltip();">

    <a href="#" onmouseover="show_tooltip('Total mutes','This is the total number of automated mutes currently being applied. This number does not include mutes by staff or those who have logged out before an auto-mute expired.');" onmouseout="hide_tooltip();">blah</a>

    <br><br><br><br><a href="#" onmouseover="show_tooltip('lol','More text');" onmouseout="hide_tooltip();">lol</a>

    <br><br><br><br><div id="tooltip_div">&nbsp;</div>

    <div id="debug">0,0</div>

Feb 25 '07 #1

Subscribe Post Reply

5996

pronerd

392

Expert 256MB

I'm trying to make this thing work in Firefox, because I know the client my game is on is pondering switching to Gecko (they're currently using something very similar to IE4 for browser windows launched in the client). This tooltip script works fine in IE, and the coordinates are apparently being read and changed in Firefox (I tossed in a div for debug), but I keep getting an "ev has no properties" error in Firefox and the tooltip div fails to appear.

Following is the entirety of the document I'm working on:

Expand|Select|Wrap|Line Numbers

<head>

    <style type="text/css">

        #tooltip_div

        {

            position: absolute;

            visibility: hidden;

            z-index: 20;

            top: 0px;

            left: 0px;

        }

        .tooltip_table

        {

            border: 0px;

            width: 250px;

            height: 80px;

            margin: 0px;

            padding: 0px;

            background-color: #404040;

            background: url('table_bg.PNG');

            color: #aaaaaa;

        }

        .tooltip_head

        {

            border: 0px;

            text-align: center;

            vertical-align: middle;

            height: 10px;

            font-family: verdana,sans-serif;

            font-size: 10px;

            background: url('title_bg.PNG');

            background-color: #808080;

            color: #aaaaaa;

        }

        .tooltip_content

        {

            border: 0px;

            margin: 0px;

            text-align: center;

            vertical-align: middle;

            font-family: verdana,sans-serif;

            font-size: 10px;

            color: #aaaaaa;

        }

    </style>

    <script type="text/javascript">

        if(!document.all) document.captureEvents(Event.MOUSEMOVE);

        document.onmousemove = realign_tooltip;

        var body_width = 0;

        var body_height = 0;

        var tooltip_x_offset = 15;

        var tooltip_y_offset = 15;

        var tooltip_div;

        function init_tooltip()

        {

            if(document.all)

            {

                body_width = document.body.clientWidth;

                body_height = document.body.clientHeight;

            }

            else

            {

                body_width = window.innerWidth;

                body_height = window.innerHeight;

            }

        }

        function show_tooltip(title,content)

        {

            tooltip_div = document.getElementById('tooltip_div');

            tooltip_div.innerHTML = ('<table class="tooltip_table"><tr><td class="tooltip_head">'+title+'</td></tr><tr><td class="tooltip_content">'+content+'</td></tr></table>');

            realign_tooltip();

            tooltip_div.style.visibility = 'visible';

        }

        function hide_tooltip()

        {

            tooltip_div.style.visibility = 'hidden';

            tooltip_div = null;

        }

        function realign_tooltip(ev)

        {

            ev = (ev || window.event);

            init_tooltip();

            if(tooltip_div)

            {

                if(document.all)

                {

                    tooltip_div.style.left = ((((ev.clientX+tooltip_x_offset+tooltip_div.clientWidth) <= body_width) ? (ev.clientX+tooltip_x_offset) : (body_width-tooltip_div.clientWidth))+'px');

                    tooltip_div.style.top = ((((ev.clientY+tooltip_y_offset+tooltip_div.clientHeight) <= body_height) ? (ev.clientY+tooltip_y_offset) : (body_height-tooltip_div.clientHeight))+'px');

                }

                else

                {

                    tooltip_div.style.left = ((((ev.pageX+tooltip_x_offset+tooltip_div.clientWidth) <= body_width) ? (ev.pageX+tooltip_x_offset) : (body_width-tooltip_div.clientWidth))+'px');

                    tooltip_div.style.top = ((((ev.pageY+tooltip_y_offset+tooltip_div.clientHeight) <= body_height) ? (ev.pageY+tooltip_y_offset) : (body_height-tooltip_div.clientHeight))+'px');

                }

                document.getElementById('debug').innerHTML = (''+body_width+'x'+body_height+'<br>'+tooltip_div.style.left+', '+tooltip_div.style.top);

            }

        }

    </script>

</head>

<body onload="init_tooltip();">

    <a href="#" onmouseover="show_tooltip('Total mutes','This is the total number of automated mutes currently being applied. This number does not include mutes by staff or those who have logged out before an auto-mute expired.');" onmouseout="hide_tooltip();">blah</a>

    <br><br><br><br><a href="#" onmouseover="show_tooltip('lol','More text');" onmouseout="hide_tooltip();">lol</a>

    <br><br><br><br><div id="tooltip_div"> </div>

    <div id="debug">0,0</div>

You need to have something link realign_tooltip(event) as a method call instead of realign_tooltip(); You are not passing any event to the function for Firefox to get data from.

Feb 26 '07 #2

MikeFoster

Hi Mobius,

These are some things that I've wanted to say in response to a lot of different people's questions.

When you get an error like this, start using 'alerts' and look at the values of certain variables. realign_tooltip expects ev to be an event object, but adding "alert(ev);" as the first line in realign_tooltip shows that ev is not an event object - it is 'undefined'. So we look to see from where the function is called 'from' and we see that it is called from show_tooltip and no arguments are passed. show_tooltip is the function which we call the event handler (or 'listener') because it is called directly by the system when the event occurs. So show_tooltip needs to pass the event object to realign_tooltip. How does show_tooltip receive the event object? In IE (DOM0) you use 'window.event'. In DOM2 browsers the event object is passed as an argument to the event listener.

There are many general patterns and 'best practices' we can use when developing our applications. I will discuss a few of them in the following.

1. No Javascript in HTML.

For example, we want this:

Expand|Select|Wrap|Line Numbers

 
<a href="#" onmouseover="show_tooltip('lol','More text');" onmouseout="hide_tooltip();">

to look more like this:

Expand|Select|Wrap|Line Numbers

<a class="tt1" href="#">text</a>

of course we might like to put tooltips on 'any' element:

Expand|Select|Wrap|Line Numbers

<span class="tt2">text</span>

2. No HTML in Javascript.

For example, the HTML in this string:

Expand|Select|Wrap|Line Numbers

 
'<table class="tooltip_table"><tr><td class="tooltip_head">'+title+'</td></tr><tr><td class="tooltip_content">'+content+'</td></tr></table>';

should be in the HTML:

Expand|Select|Wrap|Line Numbers

 
<div id="tooltip_div">

<table id="tooltip_table">

<tr><td id="tooltip_title"></td></tr>

<tr><td id="tooltip_content"></td></tr>

</table>

</div>

I would not use a table but that's a personal choice.

3. Register event listeners in script instead of HTML attributes.

Elements are not available to script (as we say 'in the DOM') until after the 'onload' event. So let's register an onload listener and do all our initialization there (much more could be said about 'onload' techniques).

Expand|Select|Wrap|Line Numbers

 
window.onload = winOnLoad;
 
function winOnLoad()

{

  initTooltips();

  // initialize other things needed by the app

}
 
function initTooltips()

{

}

3. Using ID and CLASS for script access to elements.

Using ID and CLASS are not the only ways to access elements and this suggestion is more specific to the tooltip app.

Notice in the above HTML how I've used ID and CLASS attributes. I used ID where there could be only one of that type of object, and I used CLASS where there could be more than one.

I'm using class 'tt1' to associate any element with a specific tooltip. Class 'tt2' is a different tooltip, etc.

Let's store the tooltip titles and text in arrays:

Expand|Select|Wrap|Line Numbers

 
var tt_title = [

"title 1",

"title 2",

"title 3"

];
 
var tt_content = [

"text 1",

"text 2",

"text 3"

];

Now let's finish the initialization function. We want to find all elements that have classes 'tt1', 'tt2', 'tt3', etc. and for each element we will register mouseover and mouseout listeners. Also, for each element we will add a new property 'tooltipIndex' which is an index into the tt_title and tt_content arrays. Note that there could be any number of elements with class 'tt1' - and likewise for 'tt2' etc.

I'm going to use my function xGetElementsByClassName but you can use anyone's version of this. As long as it returns an array of elements, all of which have a certain className.

Expand|Select|Wrap|Line Numbers

 
window.onload = winOnLoad;
 
function winOnLoad()

{

  initTooltips();

  // initialize other things needed by the app

}
 
function initTooltips()

{

  var a, i, tti = 1;

  a = xGetElementsByClassName('tt' + tti);

  while (a.length) {

    for (i = 0; i < a.length; ++i) {

      a[i].tooltipIndex = tti;

      a[i].onmouseover = ttOnMouseover;

      a[i].onmouseout = ttOnMouseout;

    }

    ++tti;

    a = xGetElementsByClassName('tt' + tti);

  }

}
 
function ttOnMouseover(e)

{

  // "this" points to the element moused over

  var e = document.getElementById('tooltip_title');

  if (e) e.innerHTML = tt_title[this.tooltipIndex];

  e = document.getElementById('tooltip_content');

  if (e) e.innerHTML = tt_content[this.tooltipIndex];

  // now position and show 'tooltip_div' 

  // here you could register a mousemove listener

}
 
function ttOnMouseout(e)

{

  // hide 'tooltip_div'

  // remove mousemove listener

}

Feb 26 '07 #3

Similar topics

mouse cursor position

by: Danny | last post by:

How can I get the coordinates of the mouse cursor in Mozilla browsers as well as Opera and IE6? I'm struggling to understand how to capture mouse movement events with Mozilla/Netscape/Firefox and...

Javascript

Need to track mouse cords in order to move a Panel object

by: Jay | last post by:

I need to be able to move a Panel on a windows Form at run time using the mouse. I have tried adding a MouseDown event handler to the Panel and then within the MouseDown handler adding a MouseMove...

C# / C Sharp

mouse move event

by: Logan Mckinley | last post by:

I need to be able to detect mouse movement even when it is not over my application. I can get the mouse cords using MousePosition but I am not sure if there is an event that hits my program when...

C# / C Sharp

How to capture Mouse Single click and mouse double click event

by: Sakharam Phapale | last post by:

Hi All, How to capture Mouse Single click and mouse double click event on Commnad Button. I am doing as follows. Private void Button1_MouseUp(Object sender,...

C# / C Sharp

Magnify Area under Mouse Coordinates

by: Henry Wu | last post by:

Hi, I see examples of Magnifying an area under mouse coordinates to a form or picturebox using VB6 and VC6, does anyone know how to do it under VB.NET? Its nice to use the new GDI+ for it. ...

Visual Basic .NET

Capture the mouse

by: Dave | last post by:

Hi, I have a control on my vb app form that dont cath a mouse event`s how can i catch a mouse event on that control and pass it to a function in my main form??? In VB-6 i used the setcapture api...

Visual Basic .NET

How to have .NET control ignore mouse events (or forward, or bubble, or transfer, ...)

by: bretth | last post by:

In a VB.Net Windows Forms application, I have a user control that handles mouse events. Another section of code programmatically adds a label to the control. I would like label to ignore all...

Visual Basic .NET

Capture mouse events inside an iframe

by: Venkatesh | last post by:

Hello All, I have an iframe in my main html and within iframe, I'm loading another HTML webpage. In my main html page, I've captured the mouse click event, by setting the "onclick" for <bodyof...

Javascript

Capture Mouse Coordinates to variable

by: mbatestblrock | last post by:

I hope this makes some sense. My ultimate goal here is to execute a block of code if the mouse has not moved in a minute or so within the broswer. The machine I am running this on is for internal...

Javascript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp