Develop Reference

Is there a way to listening on specific position "from left" in JS?

Hi all I'm working on a slider, and I would that my slide detect when the horizontal scroll reaches for example 1000px from left, hence I could trigger some dynamic event - animation, CSS style, etc.
Some here know how to listen on a specific position from left?
I have tried the while loop but the stack had just overflowed,
so any hint would be great,
thanks

If you want to detect scroll position of the whole page, it should be sufficient to attach an event handler to scroll event of window element, and inside check for the value of window.pageXOffset. I have made a small demo in this codepen. The html markup and css is just for example purposes (to have enoght content so that the whole page overflows in horizontal direction), so the important code is in js:
var scrollhandler = function(){
if(window.pageXOffset > 1000){
alert("over 1000");
window.removeEventListener("scroll",scrollhandler)
}
}
window.addEventListener("scroll", scrollhandler);

Disabling scrolling while dragging on mobile

I am trying to create a list of items that can be re-sorted. I have set it up on mobile where the item is to begin being moved after a long-hold, followed by a drag to re-position it.
It works fine when only a few items are present, but once enough appear to allow the div to scroll (only the div containing the ul scrolls, not the whole page), I can no longer re-position items as dragging causes a scroll.
I have tried using .preventDefault() on touchmove, but it does not appear to have an effect.
Basically, I have this:
$(document).on('touchmove mousemove', e => {
// check to make sure we're holding something
// if not, just return
e.preventDefault()
// this stops the text from being highlighted,
// but does not stop scrolling
// report the mouse/touch position to the actual move function.
})
Most solutions say that using preventDefault() stops it, but that does not appear to be the case.
What can I do here?
Edit: I have tried manipulating the overflow property, but that prevents the div from being programmatically scrolled as well, which it needs to do.

try to prevent scroll:
$('div').on('scroll', function(e) {e.preventDefault()});

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!

Custom cursor interaction point - CSS / JQuery

I'm trying to use a custom cursor for an online game, in this case it's a sniper scope.
The problem is when I reference the cursor via CSS, the interaction point is still the top left of the icon, whereas it needs to be dead center of the icon for the cursor to make any sense.
Here's the cursor:
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;
Here's a demo: http://jsfiddle.net/9kNyF/
If you put the red dot from the cursor over the red dot I created in the demo, it won't fire the click event. You have to attempt to aim the top left corner at it.
If you set the cursor back to cursor:default; you'll see the click event fires just fine, it's just a matter of "aiming" the cursor.
The game is coded in JQuery so if I need to add some logic there for cursor offset or something lame, so be it. Ideally I want this to be a CSS fix.
Thanks!

You just need to provide the hotspot's <x> and <y> position in your CSS:
In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;
http://jsfiddle.net/9kNyF/15/ see?

As far as it not firing the click event try placing this around your event listener.
$(function(){
$('#point').click(function(){
alert('clicked point');
});
});
With the centering of the cross hairs it might be easier to use a div with the background of the image and using jQuery to place the div over your cursor in the correct place.
<div id="crosshairs"></div>
<script>
$(function(){
$("body").mousemove(function(e){
var CrossHairWidth = $('#crosshairs').width();
var CrossHairHeight = $('#crosshairs').height();
$('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
$('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
});
});
</script>
You then hide the cursor doing something like so:
cursor: url(http://www.seancannon.com/_test/transparent.png), default;

whatever tool you used to create the cursor, should have an option for managing the click target area. You'd be chasing you tail looking for a javascript/css solution.

Trigger an event on a specific part of an image

I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?

Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)

You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.

i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map

An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});

I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.