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.
Related
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.
I'm trying to see how drag & drop works in native javascript. I'm writing a simple javascript function to make it happen. It works, but not correctly.
http://jsfiddle.net/FKM5S/
when you move the white box slowly towards the black box, the white box stops as designed. When you move the white box fast enough, it actually overlaps the black box.
In my javascript code, I check if the white box overlaps the black box then return false.
var beforeMovePassed = this.callbacks.beforeMove();
if( beforeMovePassed )
{
return false;
}
I'm not exactly sure why it's happening.
How do i stop the event correctly so that the white box doesn't overlap the black box regardless of your dragging speed?
Notice that event handler is called not for every change, there is some limit in ms between callings and it depends on many factors.
So for you will be good just each time check is white box are righter the black box, and if it is so, then move it by your self to the correct position.
I am not sure
But try using event.preventDefault() in that case you must have the reference of event object.
Hope it will work!!
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/
I made this map, following the demo on Raphaël website.
I want each shape (département) to be clickable and lead to a page.
I put a link, for example, on a yellow shape, more or less in the center of the map.
Here it's how it goes:
Not clicked, the shape looks great, I click it, it leads the page, perfect!
I click the previous arrow on my browser to go back and hover again that same shape, and it behaves really weird. The strokes seem broken or the shape going underneath the other ones (details here). Do you know what's happening?
Also, I would like to have your opinion and feedback about your experience with the map (usability and compatibility with browsers (IE?) mostly).
Thank you in advance for your help.
The reason it looks weird is because by adding a link to the element, Raphael wraps the <path> element (that defines the département shape) inside an <a href="">. But its toFront() method still works on the <path>, so that now just pushes it to the front of the <a>, instead of to the front of the entire set of départements. In other words, .toFront() doesn't work anymore.
That looks like a bug in Raphael to me, actually. I'm not sure how to fix it, other than replacing each occurrence of .toFront() you're using by a function that checks if the node has an <a> parent, and if it does, move that to the front instead (by reinserting it into the DOM).
Also,
It's broken in IE in a different way.
I think whoever made that demo already knew about it, because the if(current) block in the mouseover fixes it on the Australia example. But the scaling and stroke-width animation you added basically also need to be reset there.
If you replace that if(current) block by the following it should work:
if (current && current != departement) {
fra[current].animate({
fill: "#333",
stroke: "#666",
"stroke-width": 1
}, 500);
fra[current].scale(1,1)
document.getElementById(current).style.display = "";
}