I have some problem, i need to block/shut down some click action for some little time. What i'm trying to do is fire all actions after my click, but block this click when this actions is under procesing. So this is my code, thx for help:
carousel_controls_buttons.live('click', function(e){
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
carousel_controls_buttons.removeAttr('disabled');
}, 450);
});
I am presuming you are wanting something like this:
$(document).ready(function () {
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
carousel_controls_buttons.removeAttr('disabled');
}, 1000);
carousel_controls_buttons.live('click', function(e){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
});
});
Related
I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.
Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});
Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file
I am having an issue with jQuery animate on an iPad Mini (Safari).
I run the following animation when a button is clicked:
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000);
});
This button sends a request that makes the page reload. As it is starting to reload I want the loadBar to animate.
This does not happen as no animation is fired.
It works if you add return false; and stop the page reload from occurring.
Are there any ways around this. I have tried CSS3 animations and get the same issue.
The animation must occur at the same time as the submit event.
Thanks!
You can reload the page in js after the animation completes
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000, function(){
window.location.reload();
});
return false;
});
Maybe something like this is what you're looking for:
http://plnkr.co/edit/2v0s6oIw8jNn8BmoTemi?p=preview
$(function(){
$('body').on('click', '#submitBtn', function (e) {
e.preventDefault();
$('#loadbar').animate({ width: '95%' }, 8000);
setTimeout(function(){ //remove this line
$("#form").submit();
}, 5000); //simulate slow loading page. remove this line
});
});
The idea here is that you prevent the default behavior of the browser, force it to animate, and then continue the submit.
Assuming its a submit form with id "myform":
$('body').on('click', '#submitBtn', function(e) {
e.preventDefault();
$('#loadBar').animate({ width: '95%' }, 8000, function() {
$( "#myform" ).submit();
});
});
EDIT :
Check beforeunload() in http://www.w3schools.com/jsref/event_onbeforeunload.asp
$(window).on('beforeunload', function(){
$('#loadBar').animate({ width: '95%' }, 8000);
});
Does anyone know if there's a way to preventDefault(), but on a timer, so default actions are restored after a certain time?
Here's what I have so far:
function setResetInterval(bool){
var el = $('article');
if(bool){
timer = setInterval(function(){
setTimeout(function(){
console.log('default prevented');
e.preventDefault();
}, 500);
},1000);
}else{
clearInterval(timer);
}
}
if(object.touch.touch){
object.header.menu_button.attr('href',null);
object.touch.articles = $('article');
object.content_blocks.on('click','article',{},function(e){
object.touch.articles.removeClass('on');
$(this).addClass('on');
e.stopPropagation();
setResetInterval(true);
setTimeout(
function() { setResetInterval(false); }, 500);
});
}
Problem is, the function is called after the clickthrough and the action is not prevented. The alternative is the prevent the default action on click, which stop scrolling on mobile devices.
Thinking about it more clearly, the real problem is the click tag in question is basically the entire screen width on mobile.
To build on what Cayce said, one way to approach this is to tie the functionality to a class you later remove.
Demo Fiddle:
In the example, the default will be prevented as long as the div has the .red class, the setTimeout will remove the class after 3 seconds.
JS:
$('body').on('click', '.red', function (e) {
e.preventDefault();
console.log('I only show up while default is prevented');
});
$('body').on('click', 'div', function () {
console.log('I will always show up');
});
setTimeout(function () {
$('div').removeClass('red');
},3000);
I am trying to perform a simple animation on click of a link. I want that the link should get disabled after the 1st click and should be re-enabled only after the animation, that started as a result of the first call, completes.
HTML:
<a id="link" href="#">Click</a>
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>
jQuery:
$('#link').click(function(e){
$('#link').bind('click', disableLink);
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
Fiddle: http://jsfiddle.net/uHR7a/2/
You can use anonymous function where you declare a variable in_process and depends on it start new animation or not.
Demo: http://jsfiddle.net/dUarG/1/
(function () {
var in_process = false;
$('#link').click(function (e) {
e.preventDefault();
if (!in_process) {
in_process = true;
$('#test').animate({height: '+=50'}, 2000, function () {
in_process = false;
});
}
});
})();
use this code as you jquery:
$('#link').click(function(e){
$('#link').removeAttr('href');
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
You can use on() and off() for this:
$('#link').on('click', anim); //bind click
function anim(e) {
$(e.target).off('click'); //unbind click when animating
ht = $('#test').height();
$('#test').animate({
height: '+=50'
}, 5000, function() {
$(e.target).on('click', anim); //rebind when done
});
$('#test2').html(ht);
}
FIDDLE
Here's the fiddle I'm working with: http://jsfiddle.net/Scd9b/
How can I delay the href function after the click?
For example a user clicks on the link, the message slides down One moment... and after 2 seconds the user continues to the page its linked to.
Sorry everybody forgot to mention there are some anchors that are not linked.
You can simulate navigating to a page by settings window.location. So we will block the normal function of the link with preventDefault and then in a setTimeout, we will set the correct window.location:
https://codepen.io/anon/pen/PePLbv
$("a.question[href]").click(function(e){
e.preventDefault();
if (this.href) {
var target = this.href;
setTimeout(function(){
window.location = target;
}, 2000);
}
});
Check this fiddle: http://jsfiddle.net/C87wM/1/
Modify your toggle like this:
$("a.question[href]").click(function(){
var self = $(this);
self.toggleClass("active").next().slideToggle(2000, function() {
window.location.href = self.attr('href'); // go to href after the slide animation completes
});
return false; // And also make sure you return false from your click handler.
});
Cancel the click and use setTimeout to change the location.
$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
$(this).toggleClass("active").next().slideToggle("slow");
e.preventDefault();
var loc = this.href;
if(loc){
window.setTimeout( function(){ window.location.href=loc; }, 2000 );
}
});
});
$(document).ready(function(){
$("span.answer").hide();
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
var Link = $(this).attr("href");
setTimeout(function()
{
window.location.href = Link;
},2000);
});
});
Prevent the default action of the link, first of all. Then add a timeout of 2 seconds, after which the page is redirected to the url found in the href attribute of the link.
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout(function(){
location.href = $(this).prop("href");
}, 2000);
});
Example.
How about e.preventDefault in your click handler. Then do a setTimeout that takes you to your destination?
$("a.question").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("slow");
setTimeout('window.location.href=' + $(this).attr(href), 2000);
});
This should do it:
$("a[href]").click(function () {
var url = this.href;
setTimeout(function () {
location.href = url;
}, 2000);
return false;
});
Setting window location didn't sound like a good idea to me, So here's what I did
On click it checks whether the user clicked the link if yes it waits 2 seconds then triggers the click again and since it's not user-triggered it doesn't wait this time
document.getElementById("question").addEventListener("click", function(e) {
//if user clicked prevent default and trigger after 2 seconds
if(e.isTrusted) {
e.preventDefault();
//after 2 seconds click it and it'll not wait since it's not user triggered
setTimeout(function() {
e.target.click();
}, 2000);
}
});
Bing