This code is working, when the mouse is "UP" in the document:
$(document).on("mouseup", function () {
alert("mouseup");
});
But how to make alert(), when the mouse is UP on the scroll button?
You can you the "scroll" event handler:
$(window).scroll(function() {
alert("mouseup");
});
With jQuery API:
.mouseup( handler(eventObject) )
$(document).mouseup(function(e){
if(e.which == 2){ //2 is the code for the middle button
//some codes...
}
});
http://jsfiddle.net/DerekL/3wmaK/
Related
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
I can stop mousewheel from scrolling the background when the popup image shows ... and I can do it by the following code.
So, I'm here trying to find a way to unbind and scroll the background again. After closing popup, all elements are blocked. The page doesn't scroll.
Any thoughts how to unbid it again?
Thanks.
Have you tried .unbind()?
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
$(document).on("click", ".unbind_button", function() {
$("body").unbind("mousewheel", function() {
// do something
});
});
I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});
I am trying to bring my menu button back to its original state once you click the body or close button.
What I mean is when you click the menu button you will see that it switches to an x. Once you click the x it will switch back to the menu icon. I would like to mimic this same event once you click outside the button or the close button.
$(".gn-icon-menu").click(function() {
$(this).toggleClass("on");
});
http://jsfiddle.net/f4fjf/18/
You can add a click event on the document like this:
$(document).click(function() {
if ($(".gn-icon-menu").hasClass('on')) {
$(".gn-icon-menu").removeClass('on');
}
});
You have to stopPropagation on your .gn-icon-menu click event:
$(".gn-icon-menu").click(function(event) {
event.stopPropagation();
$(this).toggleClass("on");
});
Demo JSFiddle
Try this:
$('body').click(function(evt){
if(evt.target.class == ".gn-icon-menu")
return;
$(".gn-icon-menu").removeClass('on')
});
$(".gn-icon-menu").click(function(e) {
e.stopPropagation()
$(this).toggleClass("on");
});
Working Demo
DEMO
Javascript
$("body").not(".gn-icon-menu").click(function() {
$(".gn-icon-menu").removeClass("on");
});
$(".gn-icon-menu").click(function(e) {
e.stopPropagation();
$(this).toggleClass("on");
});
Hope it helps
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>