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/
Related
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.
function move(event){
box.style.left=event.clientX-25+"px";
box.style.top=event.clientY-25+"px";
}
I created a dynamically div element named box, and then added mouseup and mousedown events, In mouseup, mousemove event will be added, in mousedown , it will removed
when mousemove event will be added with the function move, and also removed with the same
I want to make sure that this element doesnot go off Screen while i am moving the mouse or dragging the box
Thank you very much
You must define the dimensions of the dragged element beforehand, and then limit the the x and y based on the window's width&height:
var element_w = 50
var element_h = 50
function move(event){
box.style.left=Math.max(0,Math.min(window.innerWidth-element_w,event.clientX-25))+"px";
box.style.top=Math.max(0,Math.min(window.innerHeight-element_h,event.clientY-25))+"px";
}
mousemove event gives the delta from the last mousemove event position.
With this information, you have two options:
Get the current position when the user first pressed the mouse button, and add it's delta to the initial values
Get the current position of the box on every mouse move and add the delta to it.
The second one is more memory consuming and will create a lag for the move because of the position calculations, so the first option is the one you should go with.
Don't want to interfere with your learning curve. But this is a common situation and wherever you search it, you'll find a correct and working answer. You just needed to search it. For example here is one: javascript use drag to move element
Pretty simple question but nothing I try works. Basically I'm using drag events (dragstart and dragend) and once I've started dragging, the cursor is always the stop sign thing (the circle with a horizontal line through it).
I've tried: Adding a class to the body and changing the cursor with css. Setting event.dataTransfer.dropEffect = 'move', e.dataTransfer.effectAllowed = 'move'.
I've basically scoured all the google results and nothing has worked. Surely this is something that you can change. I don't want users thinking they can't drop domething somewhere because of this.
Demo: http://jsbin.com/afixay/3/edit
1) place cursor over red box
2) don't move cursor, just hit ctrl+r (page should be reloaded)
3) you'll get no alert.
Well, you will get an alert once you unhover/hover it back. The problem is, when cursor is placed over red box on a page load, hover event is not fired (also no mouseenter).
How do I fix this?
I know, browser's work seems to be true, but I really need to know if an element is hovered, even on page load.
$(function() {
function hovered(e){
e.type == 'mouseenter' ? alert('on') : alert('off');
}
$('.box').hover(hovered);
});
You aren't going to be able to do this, not with pure JS anyway.
You cannot get the mouse position manually on initial page load until there is an event fired. X and Y positions are 0. So there's no way to tell if the mouse is already over your element.
No mouse events are fired until it moves. You could listen for mousemove to immediately respond, but that still doesn't give you what you want.
The CSS trick that was pointed out in the comments is the closest you'll get, but it's hardly a solid solution.
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.