Testing for onMouseOver dynamically

[mtorbin]

Hey all,

 

I am working on a script that will call onMouseOut when the cursor leaves a fixed div but certain actions will be taken only if the cursor is now over a new dynamically placed div.  Therefore, I need something like the following but I can't find the right syntax:

 

function doThis() {
    if(document.getElementById("showMe").onmouseover == true) {
        // do this
    }
    else {
        // do that
    }
}

 

Any suggestions would be much appreciated.

 

- MT

[Psycho]

Yeah, that's an odd one. An onmouseout and onmouseover are events, they are not states. You will have to build your own logic for this.

 

I would create some global variables to track the onover/out state of the elements. But, I'm not entirely sure how the out/over events take place. I would assume that the out event triggers before the over event. So, let's say the user moves from object 1 to object 2. On the over event of object 2 you could check the saved state of object 1, but it would always be "out" because you have to leave object 1 to get to object 2. But, you are interested in knowing that object 1 was the last object that was moused over before getting to object 1.

 

The only was to do this definitively would be to put an onmouseover event on every single object on the page. There might be a way to script that, but I'm not sure - and it seems overkill. I would just record the onmouse event of object 1 and put a timestamp on it. Then when the user mouses over object 2 check the onmouseout time for object 1. If it is less than x milliseconds trigger your custom event.

[KevinM1]

Well, the OP only wants to know if the cursor left the fixed div and entered a dynamic one, right?  Why not simply have a top-level 'counter' that contains some sort of flag that can be checked to see if the last element visited was the fixed div?  So long as the dynamic divs aren't residing inside the fixed div, I would think it would work.  Something like (this is a really rough sketch):

 

var fixed = document.getElementById('fixed');
var lastVisited = "";

fixed.onmouseover = function(){
   //other stuff

   lastVisited = "fixed";  //or: this.id
}

//creating new div

var newDiv = createElement('div');

//yadda yadda

newDiv.onmouseover = function(){
   if (lastVisited == "fixed"){
      //do special stuff
   }
   else{
      //do generic stuff
   }

   lastVisited = "dynamic"; //or: this.id, if you give the dynamic divs an id
}

 

I could be missing something, but that seems to be the simplest way to do it, assuming, again, that the dynamic divs are not going to reside in the fixed div.

[Psycho]

The way I understood the request he wants to trigger an event if the cursor moves from one specific div directly to another specific div. If so, the logic above work unless you put an onmouseout or over on every other element on the page to reset the global variable. Suppose the user mouses out of the fixed div into "white space" on the page and then selects the second div. Unless there was an event to reset the var "lastVisited" it won't make a difference if the user took 1 millisecond or 1 hour to go from one div to the other since "lastVisited" will still be true.

 

Here is some code I put together. This may be a little more extravagant than you need. Basically, it allows you to do a test to see if the user has gone directly from one object to another. For all of the "from" objects you will have to add an onmouseout event to call "setOutTime(this)" so the system can capture the out time from that object.

 

Then for the onmouseover objects in the funtion you want to trigger you will need to pass the ID of the from object you are testing for. Then call "onMouseFromObj(obj2ID, 5)" to test whether the user moused directly from that object. I used '5' for 5 milliseconds. In testing I noticed that the number of milliseconds recorded from moving from one object to another, which were directly next to each other, varied from 0 to 1. But, if the objects are not directly next to each other you may need to modify that value.

 

Here is the test page

<html>
<head>
<style>
#obj1 {width:100px;height:100px;background-color:#cc0000;}
#obj2 {width:100px;height:100px;background-color:#00cc00;}
#obj3 {width:100px;height:100px;background-color:#0000cc;}

</style>
<script type="text/javascript">

var outTimes = new Array();

function setOutTime(obj)
{
    var now = new Date();
    outTimes[obj.id] = now.valueOf();
}

function onMouseFromObj(obj2ID, limit)
{
    var now = new Date();
    var objOnTime = now.valueOf();

//For debugging only (can be removed in final implementation)
var output = (objOnTime-outTimes[obj2ID]) + ' milliseconds passed between object 2 and current object';
document.getElementById('output').innerHTML = output;

    return ((objOnTime-outTimes[obj2ID])<=limit);
}

function showAlert(obj1, obj2ID)
{
    if (onMouseFromObj(obj2ID, 5))
    {
        alert ('true');
    }
}

</script>
</head>

<body>
A mouseover from 2 to 1 or from 2 to 3 will trigger an alert<br /><br />
<div id="obj1" onmouseout="setOutTime(this);" onmouseover="showAlert(this, 'obj2');"><br /><br />Object 1<br /><br /></div>
<div id="obj2" onmouseout="setOutTime(this);" ><br /><br />Object 2<br /><br /></div>
<div id="obj3" onmouseout="setOutTime(this);" onmouseover="showAlert(this, 'obj2');"><br /><br />Object 3<br /><br /></div>
<br /><br />
<div id="output"></div>
</form>
</body>
</html>

[KevinM1]

Ah, good point.