We Keep Coding

Javascript\Jquery mouse cursor - Inconsistencies when hovering items

I'd like to replace the mouse cursor on my website with a custom one, composed of two elements:
a cursor;
a trail that follows the cursor and lags behind it.
Doing that with jquery is extremely easy.
1) You hide the default cursor in CSS:
html, body {cursor:none;}
2) You create two different divs (one for the cursor itself and one for the trail) and style them:
<div id="mouse_cursor" class="mouse_cursor"></div>
<div id="mouse_trail" class="mouse_trail"></div>
3) You create the logic for each one of them:
function moveCursor(e) {
$('#mouse_cursor').css({'left' : e.pageX,'top' : e.pageY });
}
$(window).on('mousemove', moveCursor);
function moveTrail(e) {
TweenMax.to('#mouse_trail', 0.35, {
css: {left: e.pageX,top: e.pageY},
ease:SlowMo.easeIn
}
)};
$(window).on('mousemove', moveTrail);
(In my case the trail effect is made using Greensock's GSAP).
Now... this works perfectly as long as the cursor style isn't changed. Here's a fiddle, for your reference: https://jsfiddle.net/collederfomento/jvy1zfg8/27/
I'd like to change the style of the cursor once it hovers specific elements, however, and that's where I am encountering a few issues.
The way I have attempted to do that is the following:
1) Create a function bound to the mouseenter \ mouseover events that adds a class to the cursor if it's hovering the element:
$(".hover").bind( "mouseenter mouseover", function() {
$("#mouse_cursor").addClass("mouse_cursor_hover");
});
2) ... and then a second function that removes the class once the cursor is not hovering the element anymore:
$(".hover").mouseleave(function() {
$("#mouse_cursor").removeClass("mouse_cursor_hover");
});
3) Lastly, of course, I added the style for the "hover" cursor:
.mouse_cursor_hover {width:300px;height:300px;}
As you can see in this fiddle ( https://jsfiddle.net/collederfomento/z4e1qjbc/13/ ) the hover event is not firing properly, and the mouse cursor flickers.
I have tried several other approaches (using Javascript event listener rather than the above mentioned functions, using the css property rather than toggling a class, etc.) but they all behave in the same way.
What's curious is that if I remove the functions that make the cursors move, then the hover event is handled flawlessly. I believe the combination of the two functions is causing the issue, but I have no clue why (or how to solve it).

I think the cursor and the trail elements are interfering with the hover events. Even though they are at a high z-index, the browser still has to take them into account to figure out which element is actually getting hovered. The mouse cursor is still going over them after all, since they are not a “real” cursor, but actual elements positioned in that place.
Adding pointer-events none to both of them seems to fix the issue for the most part (checked in Chrome and Firefox, in both it seemed to significantly improve), so please give that a try:
.mouse_cursor,
.mouse_trail {
pointer-events:none;
}
https://jsfiddle.net/aur39py4/1/
I am assuming that you are not going to need any sort of hover effect on the cursor and trail themselves, so setting pointer-events:none should not have any adverse effects on the rest of what you’re doing on the page.

HTML: Turn off Drag and Drop Shadow/Ghost

I would like to turn of the dragging-shadow that html's drag and drop shows by default. I saw this: http://www.kryogenix.org/code/browser/custom-drag-image.html for changing the image, but not completely removing the image.
When i used this:
var dragIcon = document.createElement('img');
dragIcon.src = '';
dragIcon.width = 100;
dragIcon.style.display = 'none';
event.originalEvent.dataTransfer.setDragImage(dragIcon, -100, -100);
the ghost did dissapear, but i was no longer able to drag the image. This could have to do with me having to use angularJS as well...but there is no way around that anymore at this point.
Problem:
Move a div on a page that resizes ONLY the div right above itself dynamically (inside dragging function).
Question:
I wanted to know if there is a way to turn off only the ghost, but keep all the rest of the functionality as is? This is most cosmetic than anything, but the ghost really does not add anything for me, since i am resizing everything on the fly.
Any help would be appreciated.

How to do a drag and drop on a dynamic list inside a div with scroll?

thanks for your time.
I'm developing a mobile app with PhoneGap. I have a view that has some records, and those records need to be rearranged by doing a drag and drop. The number of this records might variate from 2 to 12, and they are inside a container that implements a scroll by the native properties of css, like this:
div#parentDiv {
-webkit-overflow-scrolling: touch;
overflow: scroll;
width: 100%;
}
Now, the thing is. I have tryied to do this but there seems to be some sort of events conflict. When you tap down or do a "finger down" event, the event that lasts is the scroll of the inner container, instead of being able to drag and drop the inner elements of that view.
I tryied an alternate option that is not acceptable, as you will see in this screenshot:
Here I made a scroll down to the last element of the list.
As you will see, I need to keep both the scroll and do a drag and drop.
Do you have any idea of how can I solve this?
I have tried by using plugins, HTML native drag and drop, and so far, nothing has worked for me.
Thanks again.

I'm not sure I completely understand the problem at hand. But, here's my take on a solution:
window.addEventListener("mousedown", function(e1){
timer = setTimeout(startDrag_disableScroll, 500);
window.addEventListener("mousemove", function(e2){
//if not dragging, and |e1_location-e2_location|
//exceeds a certain threshold, cancel the timer
//otherwise, drag the object, if dragging
});
});
window.addEventListener("mouseup", function(e){
//disable dragging
});
function startDrag_disableScroll(e){
//disable scrolling
//enable dragging
}
Wait until the user clicks on an item
If they hold the same position for a small amount of time (< .5s), we switch from "scrolling" mode to "dragging" mode; if they move too much, we can assume they want to scroll instead, so we don't enable dragging.
Once in "dragging" mode, we disable scrolling by changing the CSS overflow to hidden
Wait until the user releases their finger/mouse before switching back to "scrolling" mode.
Here is a JSFiddle with a complete demo. If you quickly click and drag your mouse, nothing will happen (if you were on a mobile device, it should scroll). However, if you click and hold for .5 sec, scrolling will be disabled and the draggable item will turn red. Once you release the mouse, it should reset.
I assume you also want to be able to scroll whilst dragging. To do this, you'd have to do auto-scrolling with JavaScript. If they drag the item far enough up/down the screen, it will start to auto-scroll up or down, respectively.

Use this.
Drag and drop library for a two-dimensional resizable and responsive list of items.
Almost definitely addresses the problem you are having, and will allow for features & expandability that will definitely be useful as you continue development :)

I would use a TapHold (also known as "long press") event to trigger the "sortable lists".
The user won't be able to sort the list of articles unless he presses for a few seconds on the list. At that moment, he'll be able to order the list items.
You can use any jQuery UI Sortable or any other "sortable" plugin.
If you don't want to use the TapHold, you can use the following code:
var pressTimer;
$(function(){
// By default, disable the sortable list
$("#sortable").mouseup(function(){
// Disable the sortable list
clearTimeout(pressTimer);
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() {
// Enable the sortable list
},1000);
return false;
});
});

Canvas onmousedown causes text cursor no matter what CSS I use

Interesting glitch. It turns out that if you try to use CSS to style the cursor (as in to hide or use a crosshair cursor), when you fire an onmousedown event, the cursor is changed to a text cursor.
Here's a code snippet from the Experiment where I noticed this:
mouse=[[0,0],false];
snap_mouse_by=10;
canvas.onmousedown=function(evt){
var X=evt.clientX,Y=evt.clientY;
mouse[0]=[X-X%snap_mouse_by,Y%Y-snap_mouse_by];
//set mouse coordinates
mouse[1]=true;
//set mouse is down to true
}
Along with this, a self-executing function runs and checks for the mouse coordinates and whether the mouse is down or not. Based on this data, it draws a box.
Of course, when I hit the mouse button, the cursor's style goes to text instead of doing nothing.
No need to answer this question, answer is below.

I did a quick google search to see if I was doing the CSS wrong, or if there's a documented bug.
I found nothing, but then got an idea that should seem pretty obvious.
canvas.onmousedown=function(evt){
...
evt.preventDefault();
return false;
}
I tested that out to see if it was a browser function causing the CSS inconsistency, and it worked like a charm, I now have full control of the cursor's style.
Here's the link, if anyone's curious.
Just thought I'd share this in case anyone else runs into this glitch.

How to get tooltipsy to move with the mouse

I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.
Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.
Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)
This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.
Here is the example:
http://jsfiddle.net/MarkKramer/HwpEs/2/
Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.
If someone can solve this I will be very grateful.
Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.

That plugin seems to be way too complicated if you want basic tooltip behavior.
The code for a tooltip like that is quite simple:
$('#tooltip-container').mousemove(function(e) {
$('#tooltip').css('left', e.pageX + 20);
$('#tooltip').css('top', e.pageY + 20);
});
$('#tooltip-container').mouseleave(function() {
$('#tooltip').hide();
});
$('#tooltip-container').mouseenter(function() {
$('#tooltip').show();
});
If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/