Develop Reference

HostListener mouseLeave and pointerLeave not triggered when element is hidden

I'm sitting with a problem where I use the following 2 hostlisteners to call a close function on a element.
#HostListener(
'pointerleave',
)
#HostListener(
'mouseleave',
)
The problem is, the icon it mouseleaves or pointerleaves, is a icon that is shown on hover of another element and hidden when no longer hovering, fixed with css.
My assumption is that if you leave the element fast enough, the display:none is set which will make the hostlisteners not called anymore, so the close function is no longer called.
Anyone has a fix for this?

Turned out to have pointer-events:none; on the css somewhere which breaks this!

jCarousel show arrows only when mouseover the container

I'm trying to get the arrows for my jCarousel to show only when I mouse over the container (I will have multiple containers in same page)
But I have no idea how to even approach this.
Does anyone have any hints as to how this can be done?
It would be greatly appreciated!

First you have to hide your arrows by default, so in CSS do:
.arrow-class {display:none;}
Then use jquery to show when you hover over the image
$(".image-class").hover(function(){
$(".arrow-class").show(); //this happens when you mouse in
},
function(){
$(".arrow-class").hide(); //this happens when you mouse out
});

div fades out if mouse does not hover over it

I want code in which a div fades out if mouse does not hover over it. This is the code which makes the div visible. As soon as it is displayed it fades out. I want that if a user hovers over it while it is fading out it stops fading and becoming as it was initially. And then as user hovers out of it it fades again.
$('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(2000);

jQuery has a stop() function which stops all animations taking place on an element. Use it in a mouseover() event handler and you're done.

Check this fiddle. http://jsfiddle.net/6WMDz/1/
$('#popuup_div').on('mouseover', function() {
$(this).fadeIn();
});
​
I have used mouseover to fadeIn the div.
You can also use stop, but it is not resetting the display to initial state.

How do I force the mouse cursor to change without a mouse movement in Javascript?

In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.
When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.
The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.
Note that the click still works - this is a purely cosmetic (but annoying) aberration.
Can I force the browser to re-evaluate the point under the cursor?

The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.
Javascript:
var theButton = document.getElementById('theButton');
theButton.disabled = true;
theButton.setAttribute('style','cursor:default;');
// animation is complete
theButton.disabled = false;
theButton.removeAttribute('style');
jQuery:
var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');
// animation is complete
$theButton.prop('disabled',false).css('cursor','pointer');

Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.

Try to set the curser of all elements using the * wildcard in jquery. See if this will update the cursor.

It seems like the root of your question was to how to prevent double animating. Instead of placing a <div> over it, you can just do it with JavaScript.
Set a global variable called isAnimating to true when you start your animation. At the top of your click handler add this line if (isAnimating) return false; Obviously, you need to set isAnimating to false as soon as the animation is completed, either through a timer or in some kind of callback function.
This will prevent double animating, without doing anything silly with the DOM that would affect the hover states, or so I'd hope!
Let me know if that's not what you meant and I'll take another look at it!

I have a div with scrollbars. How can I detect if someone mousedowns on the scrollbar?

I have a div with scrollbars. How can I detect if someone mousedowns on the scrollbar?

You can use the jQuery scroll function .scroll() and pass it a function to be called when scrolling occurs. See here for more info.
Example:
$('#targetdiv').scroll(function(event) {
//Stuff to do when scrolled
});
You then might be able to use the event data to see if a mouse button is pressed.

You can use the scroll event. jQuery also has a scroll convenience function.
I'm not sure if you can detect the scroll direction.

I dont think you can. But I believe you can bind something to the scroll event of the div that will trigger when the div actually has it's content's scroll position changed.