how can I trigger two mouse events simultanious (hold right clic and mouse weel) I have to press the right button of the mouse and hold on and at the same time I roll the wheel
$("selector").bind("click mousewheel", (function(event, delta) {
console.log("xxx")});
This may be not exactly you want but it works...
Fiddle here
var rightButtonDown = false;
$(document).mousedown(function (e) {
if (e.which === 3) rightButtonDown = true;
});
$(document).mouseup(function (e) {
if (e.which === 3) rightButtonDown = false;
});
$(document).mousewheel(function (event, delta, deltaX, deltaY) {
if (rightButtonDown) {
console.log("fire!")
}
});
Include a jQuery plugin to handle the mousewheel event.
Try this demo http://jsfiddle.net/HeDPZ/
Try event mousedown for any kind of click i.e. right or left.
Behavior - with the mouse click of when you move wheel you will see an alert poping.
Another thing is there is a small syntax error in your closing brackets.
For OP: Do you mind telling us bit more as to what kind of functioanlity you are aiming for just so that we can help you out in more detail.
Captureing event like this http://jsfiddle.net/dQWNY/ more here: Detect middle button click (scroll button) with jQuery
Left - 1
Middle - 2
Right - 3
I hope this is fits your need :)
Code
$(".vendor-icon").bind("mousedown mousewheel", function (event, delta) {
alert("xxx");
});
Associated html
Related
On my bootstrap carousel, I trigger today an event based on slide.bs.carousel, but I would like to restrict it to only sliding to the right direction.
Current code (working)
$('#carousel').on('slide.bs.carousel', function(e) {
alert('slided a slide');
});
My attempt at only triggering it when user slide to the right (not working):
$('#carousel').on('slide.bs.carousel', {direction: 'right'}, function(e) {
alert('slide a slide in the right direction');
});
How to achieve this?
The event has an direction property (but in my case the direction are inversed 'right when I click on left'), can't you just make a condition on it like this ?
$('#carousel').on('slide.bs.carousel', function(e) {
if ('right' == e.direction) {
alert('slided a slide');
}
});
Can use preventDefault to restrict it
$('#carousel').on('slide.bs.carousel', function (event) {
if(event.direction === 'left'){
event.preventDefault()
}
})
i'm trying to use this code to get scrolling direction the problem is when scroll up the detection is not going well
$(window).bind('DOMMouseScroll scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
});
});
Here's a screen capture of the result enter image description here it shows scroll up then scroll down but i'm not scrolling down
You have way too many events bound.
Try this code, the only difference is that I use it on a div.
$('div').bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
}
});
Here is a working JS fiddle:
https://jsfiddle.net/r1sjv2tv/
Edit: The above answer works, albeit only when using wheel scroll.
However, the window can also be scrolled with mouse. If you to handle it as well, it will get a bit more complex.
I have made a solution that listens to onscroll event and simply compares the current scrolltop position with the last scrolltop position to determine the direction of a scroll.
$('div').bind('scroll', function(event) {
if ($(this).scrollTop() < $(this).data('last-scroll')) {
console.log('scroll up');
} else {
console.log('scroll down');
}
$(this).data('last-scroll',$(this).scrollTop());
});
This works independent of the original event trigger.
Please see the fiddle:
https://jsfiddle.net/r1sjv2tv/2/
My Problem is this:
I have a MouseWheel Event (from plugin: https://github.com/brandonaaron/jquery-mousewheel) that triggers a function:
$(document).on('mousewheel', onMouseWheel);
function onMouseWheel(event,delta)
{ Code... }
I Also have a Scroll Event that triggers another function:
$(document).on('scroll', onScroll);
function onScroll()
{ Code... }
However when using the mouswheel, both events are triggered and so both functions run, which I don't want them to. They have to be separate since using the mousewheel and dragging the scrollbar should give separate results. The problem only occurs that way around ie. the mousewheel function is not triggered by dragging the scrollbar.
EDIT:
I've realized with a little help, that the problem occurs because I use ScrollLeft() inside my mousewheel function, which of course causes the scroll event.
I've tried to think of a solution but with no luck. Can anyone help? Thanks!
EDIT: More code:
$(document).on('scroll', onScroll );
function onScroll()
{
code...
}
$(document).on('mousewheel', onMouseWheel ) );
function onMouseWheel(event,delta)
{
event.preventDefault();
if(delta<0)
{
detectDown();
}
else if(delta>0)
{
detectUp();
}
return false;
}
$(document).on("keydown", onKeyDown);
function onKeyDown(e)
{
event.preventDefault();
if (e.keyCode == 37)
{
detectUp();
}
else if (e.keyCode == 39)
{
detectDown();
}
}
function detectUp()
{
$("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad');
currentElement = currentElement.prev();
}
function detectDown()
{
$("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad');
}
Maybe this helps?
Add return false at the end of the onMouseWheel function.
function onMouseWheel(event, delta) {
// code
return false;
}
This will disable the default scroll action for the 'mousewheel' event, hence the 'scroll' event will not be triggered.
fiddle
I've come to the realization, that the best solution is to make a custom scrollbar. This way we can avoid calling the scrolling function and having the different types of scrolling interfering with one another.
This is a simple code :
HTML
<a id="link" href="#">Ciao</a>
jQuery
$('#link').click(function () {
alert("ciao");
});
in fact, left/middle button is triggered (the alert is printed) but with Right Click? Why not? And how can I trigger it?
Bind mousedown to handle left, middle and right clicks:
$('#link').mousedown(function(e) {
alert("ciao");
});
You can use e.which to determinate which button has been clicked. 1: left, 2: middle and 3: right.
Here's the demo: http://jsfiddle.net/fPhDg/9/
You can stop the contextmenu from appearing like this:
$('#link').contextmenu(false);
Demo: http://jsfiddle.net/y4XDt/
You should use this very very carefully! It only makes sense in some very rare cases.
Use .contextmenu(...):
$('#link').contextmenu(function () {
alert("ciao");
});
And if you want to catch both events, you could use the bind(...) function:
$('#link').bind('click contextmenu',function()
{
alert("ciao");
});
http://jsfiddle.net/fPhDg/4/
You can subscribe to the click event and the contextmenu event like so:
$('#link').on('click contextmenu', function (e) {
if (e.which === 3) {
// Right mousebutton was clicked
// 1 is left mousebutton
// 2 is centre mousebutton
}
});
try this...
$('#link').mousedown(function (event) {
if(event.which === 1)
alert("left click");
if(event.which === 2)
alert("center click");
if(event.which === 3)
alert("right clikc");
});
fiddle : http://jsfiddle.net/fPhDg/8/
you can capture right mouse click like this :
<head>
<script>
function whichButton(event)
{
if (event.button==2)
{
alert("You clicked the right mouse button!");
}
else
{
alert("You clicked the left mouse button!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
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()