We Keep Coding

Position mouse pointer on line/path in Raphael

In this jsFiddle I have a Raphael canvas with a line/path where the user can drag it.
Problem is that the exact top pixel of the mouse pointer has to be on the line to be able to drag it. I need Raphael to be more "forgiving" and let the user drag the line if it touches the top, say, 3 pixels of the pointer.
I added mouseover/mouseout events to actually tell when the mouse is over the line, otherwise is very difficult to know.
So the question is: is there a way to drag the line without having to accurately position the mouse pointer?
var paper = Raphael("canvas", 600, 600);
var line = this.paper.path('M10 10 L50 50');
var start = function () {
this.odx = 0;
this.ody = 0;
},
move = function (dx, dy) {
this.translate(dx - this.odx, dy - this.ody);
this.odx = dx;
this.ody = dy;
},
up = function () {};
line.drag(move, start, up);
line.mouseover(function(e) {
line.attr('stroke', 'red');
});
line.mouseout(function(e) {
line.attr('stroke', 'black');
});

The Raphael library creates an SVG element (not a CANVAS element) for drawing purposes, and drawing lines creates PATH elements within the SVG element.
I had some success by increasing the line width on hover. You do have to trigger the width change by at least moving the mouse over the line, but it is a lot easier to select afterwards. While the visual effect produced may not be perfect (some width flicking can occur) continuing the drag operation proceeds without problem.
You could try increasing the line width by either modifying the stroke-width attribute in the mouseover and mouseout handlers:
line.mouseover(function(e) {
line.attr('stroke', 'red');
line.attr('stroke-width', '9')
});
line.mouseout(function(e) {
line.attr('stroke', 'black');
line.attr('stroke-width', '1')
});
or by modifying the stroke-width styling when hovering over all path elements in CSS using
path:hover {
stroke-width: 9;
}
According to this question Raphael does not provide an abstraction of all possible CSS styling so it could use VML in XML documents. If you can live without IE 9 support and expect users to have a modern browser you may be interested in the following snippet which
increases the width of a line on mouseover by setting class name draggable, which sets a move cursor,
when a move is started replaces draggable with dragging ( which removes the width increase) and sets a move cursor over the svg container,
removes class draggable, but not dragging, on mouseout
cleans up classes and the cursor in the up function.
"use strict";
var container = document.getElementById("canvas");
var paper = Raphael("canvas", 600, 600);
var line = this.paper.path('M10 10 L50 50');
var start = function () {
this.odx = 0;
this.ody = 0;
},
move = function (dx, dy) {
this.translate(dx - this.odx, dy - this.ody);
this.odx = dx;
this.ody = dy;
if( this.node.classList.contains("draggable")) {
this.node.classList.replace("draggable", "dragging");
container.classList.add("moveCursor");
}
},
up = function (e) {
line.node.classList.remove("draggable", "dragging");
container.classList.remove("moveCursor");
};
line.drag(move, start, up);
line.mouseover(function(e) {
if(!e.target.classList.contains("dragging")) {
e.target.setAttribute("class", "draggable");
}
});
.draggable:hover {
stroke-width: 9;
stroke:red;
cursor: move;
}
path.dragging {
stroke: red;
}
.moveCursor{
cursor:move;
}
svg {
border: thin solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<!-- body-html -->
<div id="canvas"></div>
The code is basically for demonstration - if you drag a line outside the SVG element you can't see it or grab it to drag back.
Some CSS rules (i.e. path.dragging) needed additional specificity to take priority over the defaults supplied by Raphael.

Hover not working on animated div

I've made a codepen with a Tweenlite animated box. The box has a :hover in the css.
If you place your mouse in the path of the animated box so it 'hits' the mouse you see the hover effect doesn't happen. It only happens when the mouse moves on it.
How do I fix that?
http://codepen.io/anon/pen/EfAGn
.box {
width:50px;
height:50px;
position:relative;
margin-bottom:2px;
}
.red {
background-color:red;
}
.red:hover{
background-color: white;
}

Here's a continuation of Jcubed's answer:
Essentially it's calculating the mouses position and checking it against the objects position, and then seeing if the distance between the two is less than 25px every 100ms.
If the object is less than 25px (half of the object width) then it is inside of it and will add the hover class. If it is greater it will remove the hover class.
CodePen
(function() {
$("#restart").on("click", function() {
tl.restart();
})
var mX, mY, distance, mousePosition,
$distance = $('#distance span'),
$element = $('#redBox');
// Movement
var tl = new TimelineLite()
tl.to($element, 15, {x:550});
setInterval(function() {
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
mousePosition = (mX, mY);
$distance.text(distance);
});
distance = calculateDistance($element, mX, mY);
if(distance < 25){
console.log("Mouse Has Entered");
//adding hovered class
$($element).addClass('hovered');
}
else{
// removing hovered class
$($element).removeClass('hovered');
}
// Setting Timeout
}, 100);
})();
Here's some additional information from Chris Coyier

This is probably a browser bug. It seems that the browser is only reevaluating the hover state when the mouse moves, not when the animation changes.
What you'll need to do is probably to manually check where the box is and where the user's mouse is every frame, and update the css through JavaScript instead of relying on :hover.
Or, simply wait for browsers to fix this bug. As #Pondwater pointed out, it works in firefox 30.

Arrows navigation based on which section are you in

Does anyone know if there exists a plugin or similar to achieve navigation like on this website: http://discover.store.sony.com/tablet/#entertainment
I am talking about up and down arrows that appear when hovering over top pr bottom part of the screen.

In theory, this shouldn't be too difficult to write yourself. Here's a starting point to achieve the arrows when hovering over certain parts of the page. You would just need to handle attaching specific links to the arrows depending on which section the user is currently looking at.
See the comments for more details.
Fiddle
Note that in the Fiddle I have used event.pageX and event.pageY to get the current mouse position, but in reality you should use event.screenX and event.screenY. Because the demo in the fiddle is embedded as a small window into the actual page, using the latter would not work.
// Define how wide the areas should be
// where the arrow appears
var top_nav_height = 70;
var bottom_nav_height = 70;
// Get some dimensions
var page_height = $(document).height();
var half_arrow_size = $('.uparrow').width() / 2;
// Listen to the user moving their mouse
$(document).mousemove(function(event) {
// Where is the mouse?
var pos_y = event.screenY; // Distance from top of the page
var pos_x = event.screenX; // Distance from left of the page
var in_area;
// Leave a 5px space to hide the arrows when
// the pointer moves outside of the page
if (pos_y <= top_nav_height
&& pos_y > 5) {
in_area = 'top_nav';
}
else if (page_height - pos_y <= bottom_nav_height
&& page_height - pos_y > 5) {
in_area = 'bottom_nav';
}
// Show the arrow when in a nav area
switch(in_area) {
// We are in the top nav area
case 'top_nav':
// Show the .uparrow and have it follow the mouse
$('.uparrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We are in the bottom nav area
case 'bottom_nav':
// Show the .bottomarrow and have it follow the mouse
$('.bottomarrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We aren't in a nav area
default:
// Hide both arrows
$('.uparrow, .bottomarrow').hide();
}
// Decide where the arrow should link
});
To handle the links, I guess you could also have a separate set of arrows on each section of your page, so the targets they link to can pretty much be hardcoded.

How to drag a DIV so its width and height are negative values?

I'm a bit stumped here. I am developing a feedback utility that will allow the user to "draw" boxes on a web page to highlight problem areas. Right now I have an overlay DIV that fills the screen and jQuery allows you to draw red outlined DIVs by clicking and dragging.
Here is the JS:
{
var $feedbackOverlay = jQuery('#feedbackOverlay');
var $original = { top: 0, left:0 };
$feedbackOverlay.bind('mousedown', function (e)
{
jQuery('<div id="currentHighlight"></div>')
.css('width', '1px')
.css('height', '1px')
.css('border', 'solid 3px #ff0000')
.css('border-radius', '5px')
.css('position', 'absolute')
.css('left', e.pageX)
.css('top', e.pageY)
.css('z-index', '8000001')
.appendTo('body');
$original = { top: e.pageY, left: e.pageX };
});
$feedbackOverlay.bind('mousemove', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
if ($currentHighlight.length > 0)
{
var $pos = { top: e.pageY, left: e.pageX };
if($pos.top < $original.top) $currentHighlight.css('top', $pos.top);
if ($pos.left < $original.left) $currentHighlight.css('left', $pos.left);
$currentHighlight.height(Math.abs($pos.top - $original.top));
$currentHighlight.width(Math.abs($pos.left - $original.left));
}
});
$feedbackOverlay.bind('mouseup', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
$currentHighlight.removeAttr('id');
});
var $feedbackInstructions = jQuery('#feedbackInstructions');
$feedbackInstructions.fadeIn(1000, function ()
{
setTimeout(function ()
{
$feedbackInstructions.fadeOut(1000);
}, 3000);
});
$feedbackOverlay.height(jQuery(document).height());
});
Here is a jsFiddle for the above:
http://jsfiddle.net/Chevex/RSYTq/
The problem is that I can't drag the boxes up or left. The first click puts the top left corner where the mouse clicked. After that subsequent dragging will change the width of the box. Letting go of the mouse completes the box and you may then start drawing another one. If you try to drag the DIV left or up while drawing it's width will remain at 0 but won't go negative.

Here you can find working solution: http://jsfiddle.net/RSYTq/34/

Something like this will get you closer to what you want: http://jsfiddle.net/RSYTq/18/
Doesn't quite handle move up and to the left and then switching to moving down and to the right quite right yet but it gives you the idea.

There's no such thing a a negative width - these are not coorindinates. You need to reposition and recalculate the corner positions relative to the corner that's not being moved.

Sounds like you need to check if the click origin (x,y) is > than the current mouse position, and then swap which one you use for the CSS top-left.

You would need to track the original start point somewhere (variables, data attributes on #currentHighlight, wherever you want), and check for width or height < 0. When so, set the #currentHighlight left/top CSS to be offset by original + (e.pageX - $currentHighlight.position().left) (for example). Then set the #currentHighlight width/height to the same difference (but positive: (e.pageX - $currentHighlight.position().left) * -1).

jquery mouse move capture inaccuracy

I'm facing an strange problem.
I capture the mouse movements with:
var mmoves = [];
jQuery(document).mousemove(function(event) {
mmoves.push({x:event.pageX, y:event.pageY})
}
Then I attach a div to the page like:
$("body").append('<div id="mouseemul" style="padding:0; margin:0; color: red; background-color: blue; width: 1px; height: 1px;">*</div>');
and then try to playback the moves
It works ok on most pages but on some pages the playback starts ("*" initial position) some pixels to the right (x). The y is ok but the x is about 120px to the right. On other pages it is accurate. On the not accurate pages, when the mouse goes close the right scrollbar it goes beyond the right page border and produces a horizontal scrollbar.
I think this has to do with some css styling of the page being playback.
Does anybody has an idea what may be causing this ?
How could I get the actual offset (in case there is an offset for such pages) ?
Thanks a lot,
Hernan
--Edited--
It is obvious that the x displacement is due to the positioning of the main document. The first element gives a $.position() of 0,134 and if I SUBSTRACT that amount from the recorded data the playback is accurate. The problem is that this displacement does not happen in every page and I dont know how to figure out when the displacement occurs and when not (to correct it by substracting).

Recording
If you want to capture and replay mouse movement you can try "recording" from the document.
This would use the x and y chords from the window.
To do this you can use the document DOM element:
var m = [];
// Using the document instead of body might solve your issue
$( document ).mousemove(function( e ){
m.push({ x : e.pageX, y : e.pageY });
});
Replaying
HTML/CSS
Your HTML/CSS should be a div on the page set with position: fixed which should match your javascript chord samples as fixed is absolutely positioned to the window:
<style>
.replay {
/* Use position fixed to match window chords */
position: fixed;
top: 0;
left: 0;
/* These are just for show */
border-radius: 20px;
background: red;
width: 10px;
height: 10px;
}
</style>
<div class="replay"></div>
Javascript
To replay your captured chords you can use something like this:
var $replay = $('.replay'), // Get mouse simulator
i = 0, l = m.length,
pos, t;
// Recursive animation function
function anim(){
// Cache current position
pos = m[i];
// Move to next position
$replay.css({ top: pos.y, left: pos.x });
i++;
// Exit recursive loop
if ( i === l )
clearTimeout( t );
// Or keep going
else
t = setTimeout(anim, 100); // Timeout speed controls animation speed
}
// Start animation loop
anim();
Demo
Try it out on this demo.