I noticed that the CSS hover function doesn't trigger when dragging an element from outside the page. I wanted to have a "drop it here" div that lights up when the mouse is over it, but hover didn't work and neither does this:
// Cosmetic thing
$('#dropzone').on({
dragover: function(e) {
$('#dropzone').addClass('on');
},
dragleave: function(e) {
$('#dropzone').removeClass('on');
}
});
I can see in the inspector the class IS being added, but it doesn't light up.
I also tried closing my popup drop area, with a mousemove event while dragging, but the event doesn't seem to work until after I let go of the mouse:
$(document).on('mousemove',function(e){
console.log('x:'+e.pageX+' y:'+e.pageY);
if (e.pageX <= 0 || e.pageX > $(document).width() || e.pageY <= 0 || e.pageY > $(document).height())
{
dropperOff();
$(document).unbind('mousemove');
}
});
Lastly I tried to just have a constant mousemove tracking event that populates a mouseX and mouseY variable at all times. When I move the mouse, it works fine, but the moment a dragenter event fires, the mousemove event stops working too.
This behavior is making it very hard to make the page work. Is there a way around this or do I have to give up on making my dropzone light up and detect when the drag event leaves the page?
Related
I have a parent div with two inner divs, part of a Google Maps OverlayView:
<div id="container">
<div id="inner1">inner 1</div>
<div id="inner2">inner2</div>
</div>
I want to fire a mouseout event only when the user moves their mouse outside the boundaries of #container. At the moment I have this code:
google.maps.event.addDomListener(this.$content.get(0), "mouseout", function (e) {
console.log('InfoWindow mouseleave', $(e.fromElement));
});
But it's firing whenever the user moves their mouse into #inner1 too. In fact, looking at e.fromElement, it seems to fire whenever the user moves their mouse into the container! What can I do?
The correct answer in jQuery seems to be to use the mouseleave event, but I don't appear to have access to that in Google Maps - at least, if I change mouseout to mouseleave, the event no longer fires at all.
This jsFiddle demonstrates the basic problem: http://jsfiddle.net/pvB4u/1/
If its not working, you can try alternative. get pageX and pageY for mouse pointer(need to initialize it in document.ready(). Then check if it is inside the boundries of the outermost container. Something like this
$(document).mousemove(function (e) {
if ($("#container").offset().left > e.pageX || (parseInt($("#container").offset().left) + $("#container").width()) < e.pageX
|| $("#container").offset().top > e.pageY || (parseInt($("#container").offset().top) + $("#container).height()) < e.pageY) {
// This will be your required mouseout event
}
});
I am a demo here
function mouseTagObject() {
var x = document.getElementsByTagName("img")[0];
x.addEventListener('mouseover', function(){document.getElementById('arrow').style.display = 'none';}, false);
x.addEventListener('mouseout', function(){document.getElementById('arrow').style.display = 'block';}, false);
}
function mousemoveDiv(e) {
document.getElementById('arrow').style.top = e.pageY - 10 + "px";
document.getElementById('arrow').style.left = e.pageX - 15 + "px";
mouseTagObject();
}
document.addEventListener('mousemove', mousemoveDiv, false);
And html
When I mousemove on image tag (slowly), <div> tag not hide, how to fix it ?
I'll admit, it gave me the slip for a minute. But the slow vs. fast thing is what did it. Imagine, why would it not work when moving slowly? Well, look at your mouse. If you move very quickly, the button gets out from under the mouse. But if you move slowly, the button stays under the mouse the whole time, meaning that it never actually enters the image. Get rid of that button or put it next to the cursor, not under it.
Also, why are you adding the event listeners from within the mousemove handler? You're going to re-add those listeners every time the mouse moves.
on the http://www.associationtsunami.org/ site if i make a mousedown on the document the cube rotates depending on the direction the user moves the mouse.
the code is:
key code ...
).bind('mousedown touchstart', function (evt) {
delete mouse.last;
if ($(evt.target).is('a, iframe')) {
return true;
}
evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
mouse.start.x = evt.pageX;
mouse.start.y = evt.pageY;
$(document).bind('mousemove touchmove', function (event) {
dragging = 1;
// Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
if (!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
event.preventDefault();
// Get touch co-ords
event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
$('.viewport').trigger('move-viewport', { x: event.pageX, y: event.pageY });
}
});
$(document).bind('mouseup touchend', function () {
dragging = 0;
$(document).unbind('mousemove touchmove');
});
});
full code https://github.com/AssociationTsunami/tsunami/blob/gh-pages/js/cube.js#L72
i would like to disable this event if a user makes the mousedown on a scrollbar - for example on the 'ONSONPARLA' page there is a TAB with ACCORDIONS, if you open any of the accordion content you get a scrollbar on the edge or within the accordion and if you try to move the scrollbar, this also moves the cube.
what is the correct way to overwrite this in the cube.js so that the cube does not turn if the event is on a scrollbar element?
It can't be done in such manner.
But there is an alternative solution. Use some custom scroll bar plugin to replace classic scroll bar. You will be able to prevent events on him. I understand this is not an excellent solution, but according to you web page you like to take a chance. :)
Here you can find few good plugins.
Good plugin example is here.
I am tracking mouse movements using the following JavaScript:
var mouseX = 0;
var mouseY = 0;
document.onmousemove = function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
}
My problem is that if the mouse hasn't been moved since the page had been loaded, the mouseX and mouseY values both equal 0. How can I get the mouse values when the page is loaded as well as when the mouse is moved?
The browser doesn't know where the mouse is until it moves.
It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?
For the same reason, you can't get hover events on an item if the cursor is already hovering when the page loads. It takes a mouse movement for those events to fire.
Go to some site, hover over a link that has a hover effect (like underline), refresh the page (without moving your cursor) and you'll see that even though your cursor is hovering over the link, it doesn't get the hover treatment until you move the cursor.
Unfortunately this is a browser-level issue, not a javascript issue.
You can define mouseover event for the document in order to catch the first mouse interaction on page load.
I have an image with a hover effect (higher opacity when mouse is over it). It works as desired when the mouse moves in and out.
However, the image itself is moving (I'm periodically changing the css attribute top). When the mouse does not move and the image moves under the mouse cursor, no related events are triggered. That means, the hover functions are not called. I also tried using the mouseenter and mouseleave events instead, but they don't work either.
What would be a good approach to get the desired behavior (hover effect whenever the mouse is over the image, regardless of why it got there)?
You won't be able to trigger mouse events if the mouse isn't moving, though you will be able to check where the mouse is when the image is moving. What you need to do is track the mouse position in a global variable, and check to see if that position is inside your image when it moves.
jQuery has a nice article about how to do it using their library: http://docs.jquery.com/Tutorials:Mouse_Position
To find the position of your image you can use the jQuery position function: http://api.jquery.com/position/
With that position you can create a bounds using the height/width of your image. On your image move check to see if that global mouse position is inside your image bounds and you should be good to go.
This is how I would write the code(completely untested btw):
var mousex = 0;
var mousey = 0;
jQuery(document).ready(function(){
$(document).mousemove(function(e){
mousex = e.pageX;
mousey = e.pageY;
});
})
img.move(function(){
...move code...
var p = $(this).position();
if(mousex >= p.left && mousex <= p.left + $(this).width
&& mousey <= p.top && mousey >= p.top + $(this).height)
{
...opacity code...
}
});
You could manually test to see if the mouse is in the image when you move the image then fire the desired event.
Mouse position using jQuery outside of events will show you how to keep track of the mouse position. Then just find the offset of the image and see if it's inside the image.
In addition to wajiw's and ryan's answers, you should trigger the mouseenter and mouseleave events as you detect that the mouse is over/not over the image, so that whatever code you bound to .hover() is still executed:
$(".my-image").trigger("mouseenter");
$(".my-image").trigger("mouseleave");
#wajiw has posted a great solution, but unfortunately it's plagued with typos meaning it won't work out of the box until you fix it.
Here is a class you can use which is tested and works which will allow you to test if an object is under the mouse.
Class definition
// keeps track of recent mouse position and provides functionality to check if mouse is over an object
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover
// see http://stackoverflow.com/questions/4403518
function MouseTracker($) {
var mouseX, mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
return {
isOver: function(node) {
var p = $(node).offset();
if (mouseX >= p.left && mouseX <= p.left + $(node).width()
&& mouseY >= p.top && mouseY <= p.top + $(node).height())
{
return true;
}
return false;
}
}
}
Usage example
var mouseTracker = new MouseTracker(jQuery);
if (mouseTracker.isOver($('#my-object-in-question'))) {
$('#my-object-in-question').trigger("mouseenter");
}
Hope that helps.
I could make this into a jQuery plugin very easily if anyone wants it, just drop me a line and I'll go ahead.
Matt