Develop Reference

Detect if mouse is on top or bottom half of an element

I have javascript/jquery code that will allow the user to drag/drop records to re-sort them. But currently it always sorts the item above whatever item they move it to.
I would like for it to sort above if the mouse is on the top half, and below if the mouse is on the bottom half. And I would like to show a line or border that indicates which side it will be sorted to based on where the mouse currently is.
The only part of this process I'm not sure of is how to tell if the mouse is on the top or bottom half of an element. I suspect I will need to do some math to divide the height by 2 and then see if the relative y coordinate of the mouse in the element is above or below that number.
As I'm writing this, I'm thinking perhaps the title should reflect specifically that I want to know how to get the relative coordinate of the mouse in an element, but I also know when I'm too specific then I end up having to explain the bigger picture anyway as there are often alternative solutions that are better. So there you have the big picture and the specific way I think I need to solve the problem.

You didn’t specify if you’re using the HTML Drag and Drop interface, but assuming you are, you could use the drop event object to get the mouse (or touch) offsetY position and compare that to the height of your target element. If the offsetY is more than half the height of the target, append your record after the target element, and if not append your record after the previousSibling.
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var target = ev.currentTarget;
var domRect = target.getBoundingClientRect();
console.log("offsetY: " + ev.offsetY + " height: " + domRect.height);
// do the logic and append your record to the right position
}
And if you're not use the HTML Drag and Drop interface, the concept of comparing the event offsetY to your drop target should still be possible.

Javascript click and drag background not working as expected

I'm trying to make a click and drag the background in Javascript, so I made this fiddle. But it has a problem.
When you click and drag to the left, the background moves to the right, so I track the position of the mouse, compare it to the mousedown, and with the difference I scroll the body. But, when it reaches to 0, the difference is negative so if you move past that difference and then move to the right again, you have to move the amount of pixels that you are past, which makes it weird.
So to fix this, I put this code:
if(difX < 0){
md.x = mm.x;
}
which makes that, if the difference is less than 0 (i.e: reached the edge), the mousedown position is the same as the mousemove, so that when you move to the other side, the difference is no longer negative and can start increasing again.
The problem is that it jumps when you reach the edge.
I did this only with the X position, but I'll do the same for the Y once I solve it. Thanks in advance!

Nevermind, solved it out, the problem was the the sl variable didn't change when it reached a negative difference, so it used the one stored on mouseup and it jumped because of the difference between those numbers, here's the solved fiddle

Popup menu onclick at mouse location

I'm relatively new to coding, so bear with me. I'm trying to create a menu (for an app) that appears when the user taps and holds on the screen. Basically I'm looking to make a menu similar to the Pinterest app click and hold menu functionality. (see it here: http://techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/ )
I've found the code to create something similar (http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html) but I'd like it to appear where the user holds on the screen, not in a fixed location. I've talked with a professor about this and he suggested using offset(), but I'm not quite sure how to implement it. The menu would be hidden until the user triggers it.

Some general advice for programming is to break the program down into the smallest logical pieces you can and tackle those little pieces one at a time. a
attempt to alert a message upon clicking somewhere on the page, or in your active area
then try to create a 100 by 100 black box (div element) anywhere on the page when you click somewhere
Then try to get the box to appear where you clicked using the offset as your professor suggested
Then change what you previously did to be on mousedown and have another function happen on mouseup to remove that black box.
Once you have all that you can style that black box to look like a menu, and have functional buttons on it. You could create/destroy the menu item each time you click, or you could create it once, and toggle it's visibility / position on mousedown / mouseup.
Continue to check your work after every small step to ensure you have no errors. I recommend working in a html file on your local machine, at jsfiddle.net, some javascript editing software (I don't know any), or a combination of those.
Here's some help to get you started https://jsfiddle.net/rz7dayfy/ Click the orange box to try it out.
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousedown', function(e){
xPos = e.clientX - myDiv.offsetLeft;
yPos = e.clientY - myDiv.offsetTop;
alert('myDiv clicked at x: ' + xPos + ', y: ' + yPos);
});
It creates an event listener on the area in question, sounds like that would be the body of your page. Then it finds the x y coordinates of where that area was clicked. Y axis starts at 0 at the top and increases positively as you go down. X axis starts at 0 on the left and increases positively as you go right. The offset is because jsfiddle creates some padding around your results in the results window.

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.