MattCoatney
asked on
Javascript to detect the presence of Mouse inside a DIV
I have a DIV which scrolls across the screen with JS.
I want to detect a mouseOver event in my JS fun to "pause" the scroll effect while the mouse is inside the DIV area.
How do I detect that the mouse is inside the DIV box?
I want to detect a mouseOver event in my JS fun to "pause" the scroll effect while the mouse is inside the DIV area.
How do I detect that the mouse is inside the DIV box?
cookiej
<div id="mydiv" onmouseover="alert('I am in the div');">This will pop up an alert</div>
ASKER
That won't work well in this case, since Im doing processing in another function, and this other function is what needs to know if the mouse is inside the div.
The function is looped with a timer. Every 10ms the fun is called and moves the DIV. BEFORE it moves the DIV it needs to check to see if the mouse is hovering in the area of the DIV, in which case the DIV would not be moved.
The function is looped with a timer. Every 10ms the fun is called and moves the DIV. BEFORE it moves the DIV it needs to check to see if the mouse is hovering in the area of the DIV, in which case the DIV would not be moved.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Could it be as easy as:
<div id='scrollwindow' onmouseover="scrolling=fal
And have your recurring function just check to see if scrolling is true/false?
<div id='scrollwindow' onmouseover="scrolling=fal
And have your recurring function just check to see if scrolling is true/false?
Allow me to be more clear and not use reseved keywords:
<div id='scrollwindow' onmouseover="iShouldBeScro
function timedScroller() {
if(!iShouldBeScrolling) return;
...
[scrolling code goes here]
...
}
<div id='scrollwindow' onmouseover="iShouldBeScro
function timedScroller() {
if(!iShouldBeScrolling) return;
...
[scrolling code goes here]
...
}
ASKER
Solutions getting close but not quite there. Ok let me clarify a couple points I was too vague about.
first, when I said scroll I meant that the div moves across the screen. Not anything to do with the scroll property or scrollable panels etc.
Second, the div has content. I think this is preventing these solutions from working, because the DIV is actually tightly wrapped around an image and other content so I dont think the mouse is being detected as inside the DIV by these methods.
first, when I said scroll I meant that the div moves across the screen. Not anything to do with the scroll property or scrollable panels etc.
Second, the div has content. I think this is preventing these solutions from working, because the DIV is actually tightly wrapped around an image and other content so I dont think the mouse is being detected as inside the DIV by these methods.
The proposed solution has no relationship to any sort of scrolling property. By your description, you're using a timed function to animate the div. This should be relatively straightforward. Put the "if (!shouldBeScrolling) return" in at the top oif the function that does the animation and I'll bet it will work. If not, post more of the code here.
The div having content should not affect the event from triggering correctly unless you're trapping events elsewhere.
The div having content should not affect the event from triggering correctly unless you're trapping events elsewhere.
ASKER
I tried the answer that ended up working before I came here but there were complications that prevented it from working. Once I understood those things, the answer was much simpler than I expected so... thanks. Thanks to all for effort.