I want to use javascript to detect the mouse position once the mousedown event has fired. It appears I am not getting an onmousemove event when the left button is held down. The cursor is changing to some circle with a cross through it.
My whole goal is to detect the start position of the cursor on mousedown and change the top left style of a image in a div with overflow set (kind of fake pan effect).
Thanks
Set up an ondragstart handler:
function dragstart(ev)
{
if (!ev) ev = window.event;
ev.returnValue = false;
return false;
}
image.ondragstart = dragstart;
Related
I want to zoom in/out a part in openGL using mouse. Now I can do it well using the scroll button in mouse. But my goal is now to perform the same operation by holding the left mouse button and moving the mouse to and fro in the screen.
I don't know how to perform the zooming action by detecting the to and fro motion of mouse.
// function for mouse scroll events
void VDUI_GLWidget::wheelEvent (QWheelEvent * e) {
// here comes the code for zoom in / out based on the scrolling
MouseWheel (e->delta () / float (WHEEL_STEP), QTWheel2VCG (e->modifiers ()));
updateGL();
}
Now I want to perform the same using mouse move and mouse press events. I'm unable to pick the event which detects the to and fro motion
Now I have found the solution. Finding the difference between the current & previous Y axis position, I can zoom in / out the Please refer this below mentioned code.
// function for mouse move events
void GLWidget::mouseMoveEvent (QMouseEvent * e) {
static int curY = 0, prevY = 0;
if (e->buttons()) {
curY = e->y(); // current position of Y
if( (curY - prevY) > 0 ) // call zoom in function
else // call zoom out function
updateGL();
}
prevY = curY;
}
I am playing with <canvas> tag and just encountered a problem:
https://jsfiddle.net/awguo/6yLqa5hz/
I want to get the coordinates of a point when I click on a canvas.
I searched for a while and found some functions, but as a 300x300 canvas, the point of its right-bottom point is (300,150). Shouldn't it be 300,300 (because the img is 300x300 and the canvas is 100% on it)?
Why?
What should I do to get the 300x300?
You must adjust the event.clientX and event.clientY coordinates returned by your event handlers by the offset of the canvas element vs the window. To do that you can use canvas.getBoundingClientRect to get the left & top canvas offsets. Be sure to listen for resize & scroll events. When those events happen you must re-fetch the canvas's current offset.
// Fetch offsetX & offsetY variables that contain the
// canvas offset versus the window
// Re-fetch when the window is resized or scrolled
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
Here's how to use the offsets to calculate correct mouse coordinates in an event handler:
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// calculate the mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// your stuff
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX,
y: evt.clientY
};
}
Is enough to work. You image is 350px big, not 300px.
I have some custom styles for buttons. To simulate the 3D look of it being pressed, I'm shifting the text down a few pixels using the :active pseudo-class, like this:
input[type=button] {
padding-top: 4px;
padding-bottom: 4px;
}
input[type=button]:active {
padding-top: 6px;
padding-bottom: 2px;
}
Trouble is, when I do this, in Chrome there are 2 pixels of dead space under the text. When those pixels are clicked, the "click" event is not triggered.
You can see it in action here: http://jsfiddle.net/yg775/ I exaggerated the shifting to make it more obvious. Click below the text on the button to see the effect.
Observations:
The size of the dead space is directly proportional to the number of pixels I am shifting the text.
The dead space is only under the text. Moving the mouse left or right on the X axis, you can see that the click event triggers when not directly under the text.
This only happens on Google Chrome
Someone else noticed this a while ago (Small dead space on a div button in chrome) but this problem is actually more pervasive than just the case he mentioned. Also the "answer" was to trigger on mousedown, but that won't work for me. "click" has different behavior than "mousedown", and I need "click".
Any thoughts how to get around this?
Unfortunately, it seems to be a bug with the .click() command: https://stackoverflow.com/a/5081144. In summary (quoted from above link):
If you mousedown on the padding move the mouse and mouseup on the padding, click event fires.
If you mousedown on the padding move the mouse but now mouseup on the text, there is no click event.
Since you need to use the .click() command, here may be a fix: http://jsfiddle.net/yg775/12/.
JQuery:
$('#button_box').mousedown(function() {
clicked = true;
});
$('#button_box').mouseup(function() {
if (clicked) {
paddingClicked = true;
$("#button_box").trigger( "click" );
}
});
$(document).mouseup(function() {
if (!paddingClicked) {
clicked = false;
}
});
$('#button_box').click(function() {
clicked = false;
if (paddingClicked) {
numClicks++;
$('#display').text(numClicks.toString()+' clicks');
paddingClicked = false;
}
});
I have a container div called button_box that gets used with .mousedown() and .mouseup(). These set two flags, which then calls .trigger( "click" ) that simulates a click.
The $(document).mouseup(...) is in place to catch if you click in the button and then drag the mouse outside before the .mouseup() buttons is called to reset the flag. Without it, you can then click outside of the button and then drag the mouse back in and it would register the .mouseup(). A bit hacky, but it works.
In flex, I am using the following code:
mx:HBox id="box1" mouseOver="onBox('box1')" mouseOut="outofBox('box1')"
// adding label
// closing HBox
onBox adds an image as child of box1:
var crossImage:Image = new Image();
crossImage.source = "cross.png";
crossImage.id = "cross";
box1.addChild(crossImage);
and outofBox removes them.
I believe that image is child of HBox so mouseOut should not be triggered when I hover the mouse over image. But, the moment I hover my mouse pointer over image, mouseOut is triggered. Why is it so?
Set the mouseChildren property of the container to false
I've been having trouble creating a mechanism to allow the user to select a span of time from a timeline. Basically i want them to be able to click and drag horizontally, and retrieve the start and end positions of that event.
I especially need to include the case where the event goes off the edge of the screen (even if the end position is snapped to the edge of the screen that's fine).
While doing all of this, I want to be able to draw a box that goes from the start of the event to the current position of the mouse, so that it's obvious which area if being selected.
Basically, it doesn't seem to me that you're dragging something. You just have a sequence of press, move and release. You will have to click on something, I bet you could consider the press event on the timeline itself. So it'll be something like:
timeline.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
timeline.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
// the next line just considers that leaving the object surface is the same as depressing the mouse button
timeline.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
function onMouseDown(evt:MouseEvent):void {
// add the event listener for the mouse move action
timeline.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// create the movie clip for the box
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseMove(evt:MouseEvent):void {
// adjust the selection width and height
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseUp(evt:MouseEvent):void {
// remove the event listener for the mouse move, that means that the function onMouseMove will no longer be called
timeline.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// brush up and send the final coordinates of the selection to the next function
}
For the selection graphics itself, you can either use an instance of a movie clip from your library, or you could simply create an empty movie clip, make it semitransparent and draw a rectangle in it, like so:
var selection:MovieClip = new MovieClip();
selection.alpha = 0.5;
selection.graphics.beginFill(0x000000);
selection.graphics.drawRect(x,y,width,height);
selection.graphics.endFill();
this.addChild(selection);