Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript to detect the presence of Mouse inside a DIV

Posted on 2007-04-02
8
Medium Priority
?
1,327 Views
Last Modified: 2012-05-05
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?
0
Comment
Question by:MattCoatney
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 2

Expert Comment

by:cookiej
ID: 18839965
<div id="mydiv" onmouseover="alert('I am in the div');">This will pop up an alert</div>
0
 

Author Comment

by:MattCoatney
ID: 18840082
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.
0
 
LVL 6

Accepted Solution

by:
ije earned 2000 total points
ID: 18840153
make sure your timing function has a name - ie:

var objTimer = setTimeout('move()', 10);

document.getElementByid('mydiv').onmouseover = function(){
  objTimer.clearInterval();
}
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:cookiej
ID: 18840198
Could it be as easy as:

<div id='scrollwindow' onmouseover="scrolling=false" onmouseout="scrolling=true"></div>

And have your recurring function just check to see if scrolling is true/false?
0
 
LVL 2

Expert Comment

by:cookiej
ID: 18840215
Allow me to be more clear and not use reseved keywords:

<div id='scrollwindow' onmouseover="iShouldBeScrolling=false" onmouseout="iShouldBeScrolling=true"></div>

function timedScroller() {
    if(!iShouldBeScrolling) return;
...

[scrolling code goes here]

...
}
0
 

Author Comment

by:MattCoatney
ID: 18840511
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.


0
 
LVL 2

Expert Comment

by:cookiej
ID: 18850818
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.
0
 

Author Comment

by:MattCoatney
ID: 18874214
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.
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question