For some reason, my .mouseup() event is not being called. Ideally I'd like to console.log when the user activates mouseup().
Would anyone know what is wrong?
http://jsfiddle.net/cBh3B/
$('.circle').mousedown(function () {
console.log('mousedone');
$(document).mousemove(function (e) {
console.log(e.pageY);
$('.circle').offset({
left: e.pageX,
top: e.pageY
});
});
});
$('.circle').mouseup(function () {
console.log('up');
});
var p = $('.square').position();
console.log(p.left);
You are moving the circle away from the cursor once the mousedown event is triggered. By the time the mouse button is moved up, the cursor is no longer over the circle, which means that the $('.circle').mouseup event will not be called.
If you keep the circle under the mouse then the mouseup event will be captured. (See this jsFiddle demo.)
EDIT: If your element is actually a 'circle' then your problem will most likely be the one evoked by #Peter Olson.
I recommend you try using
$('.example').on('mouseup', function(){ console.log('mouseup'); });
Here is an example: http://jsfiddle.net/Grimbode/qsE56/
Seems this way your events are being called.
$('.circle').on('mousedown',function () {
console.log('mousedone');
$(document).on('mousemove', function (e) {
console.log(e.pageY);
$('.circle').offset({
left: e.pageX,
top: e.pageY
});
});
});
$('.circle').on('mouseup', function () {
console.log('up');
});
var p = $('.square').position();
console.log(p.left);
You can also check the log, there is a clear 'up' written on it.
Related
I create a div and then:
$("#div").resizable({
disabled:true
});
Then I enable the resize behaviour and at the same time i want to handle a click on the div:
$("#div").on("click", myHandler);
$("#div").resizable( "option", "disabled", false);
function myHandler() {
console.log("div clicked");
}
If now I drag the bottom-right corner of the div I can resize it, but when I release the drag if the mouse pointer is inside the div (this happens when shrinking it) myHandler() is also called. Since myHandler() is supposed to handle a different behavior - and not the resizing - how can I solve this?
What I've tried so far with no success:
$("#div").resizable({
disabled:true,
stop: function(event) { event.stopPropagation(); }
});
How about only doing the click handler when the mouse position is at the same place as it started?
var left = 0;
var top = 0;
("#div").on({
mousedown: function(e) {
left = e.pageX;
top = e.pageY;
},
mouseup: function(e) {
if (left === e.pageX && top === e.pageY) {
console.log('click');
}
}
});
in the snippet below, only the 'mousemove' event is working. 'mousedown' has no effect and I'm not able to decipher why this is happening. If I replace 'mousedown' with 'click', it does work, however I want to use mousedown so the fadeOut event happens immediately (at the start of a click, rather than using click which relies on the users mouse going down and then back up.
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
},
mousedown: function() {
$('.drag-indicator').fadeOut(300);
}
});
As per my comment, your code works fine - with one exception. The mousedown fadeout doesn't work because you technically aren't clicking the carousel but instead the drag indicator. I've updated the code as per below where I have changed the mousedown target accordingly;
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
}
});
$('.drag-indicator').on({
mousedown: function(e){
$(this).fadeOut(300);
}
})
A working fiddle can be found here: https://jsfiddle.net/o3cdLjp7/2/
I have to move a div by clicking on it, clicking again I must stop the div in that position. Now the problem is: when I want to move again the div, does not activate the mousemove event ... how can I fix it?
$('.move_div').live('click', function() {
$('html').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div').css({'top': y, 'left': x});
});
$("html").live('click', function() {
$('html').off('mousemove');
});
});
var ele = '.move_adv';
var moveBool = false;
$(function () {
$('html').on('mousemove', function (e) {
console.log($(this).width());
if (moveBool == true) {
var x = e.pageX - $(ele).width()/2;
var y = e.pageY - $(ele).height()/2;
$(ele).css({
'top': y,
'left': x
});
}
});
});
$(ele).live('click', function () {
moveBool = !moveBool;
});
http://jsfiddle.net/6y24s/2/
The main logic is storing the 'moveability' state of the div in a boolean.
You would also like to refine the code more.
Fiddle here , if you want to keep your code then only thing you need to add is
event.stopPropagation();
When you click on the div the mousemove handler is added to the div. Then an event handler is added to the document that removes any mousemove event handlers.
You then move the mouse and the div follows, you click and the mousemove handler is deleted.
You click on the div again, a mousemove event handler is added, though then the click event handler from the document takes away the mousemove handler.
So whenever you click after the first two clicks the mousemove handler is simultaneously created and destroyed.
Also use .on() instead of .live()
.live() was deprecated in JQuery 1.7
I am using mousedown and mouseup to trigger a setInterval function like so:
$("#rotateRight").mousedown(function() {
intervalIRight = setInterval(rotateRight, 0);
}).mouseup(function() {
clearInterval(intervalIRight);
});
This works great, however, if I release the mouse (mouseup) when I am not hovering over $("#rotateRight") then there is technically no 'mouseup' so the interval goes on forever and is never cleared.
I cannot use hover because I want the even to be when a user clicks and holds a mouse. But at the same time, I need to fix this 'mouseup bug.' Any ideas?
UPDATE: New code is as follows, but still does not clear interval because mouseup happens on an iframe, not the DOM.
var intervalIRight;
var intervalILeft;
$("#rotateRight").on('mousedown', function() {
intervalIRight = setInterval(rotateRight, 0);
});
$("#rotateLeft").on('mousedown', function() {
intervalILeft = setInterval(rotateLeft, 0);
});
$(document).on('mouseup', function() {
clearInterval(intervalIRight);
clearInterval(intervalILeft);
});
clear the interval on any mouseup by attaching the event handler to the document.
var intervalIRight;
$("#rotateRight").on('mousedown', function() {
intervalIRight = setInterval(rotateRight, 0);
});
$(document).on('mouseup', function() {
clearInterval(intervalIRight);
});
FIDDLE
I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.
To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});
Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.
I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()