I am making a small image area in my clients site, WHere I have some buttons under a big image. The big image changes onclick of bottom buttons. Now what I need is to make an effect of the selected button. It means Active effect. I can do this with a onclick function but it stays intact even if I click on other buttons.
So, Basically What I need is if you can tell me a way so that I can remove the onclick effect from image/button 1 when another image/button is clicked.
You can see the page here :
http://goo.gl/S1oVS
Use $('.class-selector').off('click'); to unbind click event on all elements with class 'class-selector' (or whatever selector you might have).
You can also do it in implementation of your click event as following:
$('.button').on('click', function() {
// Do something here...
// Disable on click for this particular button, instead of all buttons.
$(this).off('click');
});
Related
This is pretty tricky, so I'll try to explain it well.
I have a web app where I want to allow my users to change background color of some divs. To do so I'd like to use a color picker interface, and I want to use contextmenu event on target divs to open it, as they already have another behaviour attached to click event.
So the idea is to have an input type color hidden in the screen, attach its click event to contextmenu event on target divs and change background color of target divs on input type color change event.
The funny thing is that when I try to chain events, color picker doesn't open if its click event is called from within contextmenu event handler, but it does if called from within click event.
Using jQuery for code simplicity and clearness:
//this works perfectly, color picker opens
$("#myTargetDiv").on("click", function() {
$("#inputTypeColor").trigger("click");
});
//this fails miserably
$("#myTargetDiv").on("contextmenu", function() {
$("#inputTypeColor").trigger("click");
return false;
});
The most weird fact is that, if I use a third element to pass the event, say, for example that I call to an intermediate input type text which passes the call from myTargetDiv to inputTypeControl, the click event in the intermediate element fires (even when called from within contextmenu event handler) while the event in the input type color doesn't fire.
But if you click directly on the intermediate input type text the color picker opens!
//If you right click on myTargetDiv "firing!" appears on console, but color picker doesn't opens
$("#myTargetDiv").on("contextmenu", function() {
$("#intermediateElement").trigger("click");
return false;
});
//If you click on intermediateElement, however, the color picker opens!!!
$("#intermediateElement")on("click", function() {
console.log("firing!");
$("#inputTypeColor").trigger("click");
});
I've reproduced this behaviour in Firefox and Chrome, and I'm not very sure if it's an expected feature, a bug in browsers input type color implementation or a problem with event handling from jQuery (I haven't tried launching the events myself yet).
https://jsfiddle.net/bardobrave/0z6ev4rd/1 If you click on "FIRE!" the color picker opens, but if you right click on it the color picker doesn't opens despite if you click on input type text it does.
Anyone can give some insight on the matter?
So to execute your own contextual menu, you may want to bind to the following:
$("#firestarter").on("contextmenu", function(e) {
// Execute your menu with Color Picker Option
return false;
});
This could be something simple like a List wrapped in a div, or more complex like JQuery UI Menu.
<div id="menu">
<ul>
<li class="menuItem" id="menuOption-1" data-action="color" data-rel="#myColor">Select Color</li>
<li class="menuItem" id="menuOption-2" data-action="reset">Reset to Default</li>
</ul>
</div>
Now the user has something to click on, which can be carried over:
$("#menu li.menuItem").on("click", function(){
switch($(this).data("action")){
case "color":
$("#menu").hide();
var target = $(this).data("rel");
$(target).trigger("click");
break;
case "reset":
$("#menu").hide();
// Do something else
break;
default:
$("#menu").hide();
}
});
I have not found all the details on the HTML5 input type='color'. This is a good start: https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29 I suspect that since the Color Picker dialog is generated by the browser itself as well as a Contextual Menu, I am guessing it's a security or control feature that is preventing it being triggered by a Right-Click type of event.
Ok, I've found a way to fix the functionality.
To trigger color picker opening through a div context menu event.
As this event cannot call the input type color click event (for reason unknown), a feasible solution is to add a hidden div which pops on mouse position when context menu event is called on target div.
This hidden div poses as a context menu and can include a message: "click to open color picker" or something like that.
Then, you attach color input click event to this hidden div click event.
Coming from another click event, the color picker opens correctly, you've forced your user to make one click more than desired (one right click to open the fake context menu and another one to open de color picker), but functionality works in the end and it's quite consistent with the effect seeked.
The real question still applies:
Why input type color click event fires when called from within any other click event handler but fails if called from within context menu event handler?
Some DOM events require user interaction to be fired programmatically,, i.e. you can trigger a click programmatically only in the process of handling some other click or keyup etc.
I want to trigger a function if a user clicks anywhere on the page, even clicking on no element or link. Is it possible?
The extension runs only on youtube.com so I can't add every element on the page to the trigger and I assume that every page has different element's ids.
Emmanouil Chountasis is correct, you can use the code at "Detect left mouse button press" to detect a left mouse click crossbrowser.
To the heart of your question, I think what you're looking for is Event Delegation. In jQuery,
// Select a wrapper for the events
$('body')
// Whenever any element in the <body> is clicked
.on('click', '*', function (evt) {
// Emmanouil Chountasis's suggestion would be called right here
if (isLeftClick(evt)) {
// ... do stuff
}
});
See http://learn.jquery.com/events/event-delegation/
Reed's answer works fine, but it triggers the action multiple times. I found this solution that only works on left mouse triggers and executes once per click.
$("body").unbind().click(function() {
//Do Stuff
});
I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}
I am making an image slider. I want to make it so when the user clicks on the image it should get hidden and i.e text which is behind the image should be visible.
In my image's OnClick event I have written code to hide the image, but what to do if I want it to be visible again when the user clicks again on that or any other option?
You can use jquery SlideToggle() or show() and hide() method like this:
<div id="yourid"></div>
$(document).ready(function(){
$('#btnid').click(function(){
$('#divid').show();
});
$('#btnid2').click(function(){
$('#divid).hide();
});
});
In your onclick event you can create a one time click event on document which will show image again.
This will display image when user clicks outside also.
Make sure that click event on document is one time only to avoid unnecessary action.
Similar to fadeToggle you can just use toggle(speed). This will switch between display none and block.
$(document).on('click','#imageContainer',function(){
$('#image').toggle();
)};
http://jsfiddle.net/mnbayazit/by3zy/2/
I want the popup to disappear when I click somewhere on the background. Problem is, it disappears when I click an [X] or the popup itself.
Imagine it being a calendar-picker if that makes my intentions more clear.
How can I get it to do that?
Set a click handler for the body to remove your popup.
Set a click handler for the popup itself that calls stopPropagation() on the event, to prevent it from bubbling up to the body.
Roughly:
function showMyPopup(){
...
$(myPopupDiv).click(function(e){
e.stopPropagation();
});
}
function closeMyPopup(){
...
}
$(document.body).click(closeMyPopup);
The basic jist with this technique is to have a wrapping (or independent element layered with z-index) that 'captures' the click event, and hides the elements you desire. I've updated your fiddle with an example of how this would work, except imagine that the blanket element would have a height and width of 100% (to cover the entire viewport).