I want to prevent clicking on an element, while it performs some animations and then enable it later. I have tried to use unbind and then bind, but clicking remains permanently disabled.
Is there any other way to do it?
$("something").on("click", function() {
$("selected").unbind("click");
$("selected").animate({...}, function() {
$("selected").unbind("click");
});
basically, i don't want someone to click on the selected div while the animation is in progress, as clicking on it will start another set of animations which i don't want to start in between.
Try this, using a flag variable to store the info if the animation is happening:
var animating = false;
$("something").on("click", function () {
animating = true;
$("selected").animate({...
}, 1000, function () {
animating = false;
});
});
$("selected").click(function(){
if (animating) return false;
});
Use on and off this way you can "bind" the function foo to a click event on a particular element, switch it off and on again, as many times as you like. Have fun ;-)
DEMO: http://jsfiddle.net/4yBbb/2/
var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );
edit: updated answer, my example used delegation and this was not necessary.
applied to your example it would look like this:
$("something").on("click", function() {
$("selected").off( "click", foo );
$("selected").animate({...}, function() {
$("selected").on( "click", foo );
});
clicking remains permanently disabled.
Because when never bind the "click" again to $("something"). Try:
$("something").on("click", function animate() {
var _this = $(this);
_this.off("click");
$("selected").animate({...}, function() {
_this.on("click",animate);
});
Here I use named function to make it easy to refer to the function again.
How about adding a check in your click function to perform the animation only when the clicked element is not animating?
$("something").on("click", function() {
$("selected").animate({...});
});
$("selected").on("click",function(){
if(!$(this).is("selected:animated")){
//Start other animation
}
});
Demo fiddle
Use .on() & .off() event of jquery. here is the example Jquery API
you need to do somthing like as follows:
function flash() {
// do your stuff here
}
$("something").on("click", function() {
$( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
$( "body" ).on( "click", "Your Div Selector", flash );
});
Related
I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.
You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/
Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});
I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/
I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
// Perform an AJAX call here.
});
});
Here is a demo of my code so far:
DEMO
I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.
Should not code click event inside click, but after modifying in your code.
var third_click= false;
$(document).ready(function() {
$( 'button#c' ).click( function() {
third_click = true;
})
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
if( !third_click ) {
// Perform an AJAX call here.
alert( 'ajax call in progress' );
} else {
alert( 'Can\'t call ajax' );
}
});
});
})
here is demo.
What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.
example:
$('.btnB').hide();
$('.btnA').on('click', function() {
$('.btnB').toggle();
});
Unless it needs to all display at one time this method wouldn't be able to work in that type of situation
You can just remove the click events from #a and b# when clicking on #c with:
$('#c').click(function () {
$('#a,#b').off('click')
})
jsFiddle example
How can I temporary disable onclick event until the event is finished?
So far that's all I've come up with:
<script>
function foStuff(a){
//no modifications here to be done, just some code going on
}
$(document).ready(function(){
$("#btn").click(function(){
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
obj.prop('onclick',action);
});
});
});
</script>
<div id="btn" onclick="doStuff(500)">
</div>
EDIT:
I've tried it this way: but it doesn't unblock the click event
$("#btn").click(function(){
var obj = $(this);
obj.off('click');
$.when( doStuff(500) ).then( function(){
obj.on('click'); // it actually comes here, but click event is being unset
} );
});
<script>
$(document).ready(function(){});
</script>
<div id="btn">
</div>
Well, you can create a variable that tells your function to ignore it while it's true;
var isIgnore = false;
$("#btn").click(function(){
if(isIgnore)
return;
isIgnore = true;
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){
obj.prop('onclick',action);
isIgnore = false;
});
});
This code is not tested but I think this will work.
Simply reference the handler, and detach it before performing your action, then at the end attach it again ...
$(document).ready(function () {
var handler = function () {
var obj = $(this);
obj.off('click');
whenDoStuffFinishes.(function () {
obj.click(handler);
});
};
$("#btn").click(handler);
});
use pointerEvents.try this:
$("#btn").click(function(){
document.getElementById('btn').style.pointerEvents = 'none';
whenDoStuffFinishes.(function(){
document.getElementById('id').style.pointerEvents = 'auto';
});
});
Using a combination of bind and unbind
https://api.jquery.com/bind/
https://api.jquery.com/unbind/
Turn the event off once it is triggered and reattach it at the end of the callback.
jQuery( '#selector' ).on( 'click', function voodoo( event ) {
jQuery( event.target ).off( event.type );
// Do voodoo...
jQuery( event.target ).on( event.type, voodoo );
});
Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.
jQuery( '#selector' ).on( 'click', function( event ) {
event.stopImmediatePropagation();
});
I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.
Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});
I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)
You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});