Prevent Double Animation in jQuery - javascript

How can I stop this function from happening twice when a user clicks too fast?
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
});
});
The issue I'm having is that if a user clicks too fast the element won't fade back in, it just stays hidden.
The issue wasn't what I thought it was. When I was clicking on the same thumbnail it would try to load in the same image and stick loading forever. The .stop() answer does fix double animation so I'm accepting that answer, but my solution was to check if the last clicked item was the currently displayed item. New script:
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var last = $("#photo").attr("src");
var target = $(this).attr("href");
if (last != target) {
$("#photo").stop().fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
};
});
});

Well you use the correct word in your descripton. Use stop()
$("#photo").stop().fadeTo("fast", 0, function() {

You may use a setTimeout function to make a delay between click grabs. I mean, a second click will be processed only after sometime, after the first click. It sets an interval between clicks.

$(document).ready(function() {
var loaded = true;
$(".jTscroller a").click(function(event) {
if(!loaded) return;
loaded = false;
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
loaded = true;
});
});
});
});
Keep track of its state

I believe what you are looking for is .stop()
http://api.jquery.com/stop/
$("#photo").stop(false, false).fadeTo()

I would prevent it like this:
var photo = $("#photo");
if (0 == photo.queue("fx").length) {
foto.fadeTo();
}
I differs from stop as it will only fire when all animations on this element are done. Also storing the element in a variable will save you some time, because the selector has to grab the element only once.

Use on() and off() :
$(document).ready(function() {
$(".jTscroller a").on('click', changeImage);
function changeImage(e) {
e.preventDefault();
$(e.target).off('click');
$("#photo").fadeOut("fast", function() {
this.src = e.target.href;
this.onload = function() {
$(this).fadeIn("fast");
$(e.target).on('click', changeImage);
});
});
}
});

Related

Remove transparency on menu drop down Javascript

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!
Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!
see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).

Why Doesn't Modal FadeOut Slowly?

I inherited this modal/overlay/content close/empty method that works, but abruptly:
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
To fade out gradually, I modified the method like below, but elements are left behind and subsequent clicks don't open new modals loaded with content, only the overlay:
method.close = function () {
$modal.fadeOut('slow', function() {
$(this).hide();
});
$overlay.fadeOut('slow', function() {
$(this).hide();
});
$content.fadeOut('slow', function() {
$(this).empty();
});
$(window).unbind('resize.modal');
};
What am I missing?
UPDATE: The solution is a single nested callback, based on garryp's answer, like this:
method.close = function() {
$overlay.fadeOut('slow', function() {
$overlay.hide();
$content.empty();
});
$modal.hide();
$(window).unbind('resize.modal');
};
Hide is asynchronous; the calls you have in your original code do not block while the transition occurs, execution moves immediately to the next. You need to use callbacks, like this:
var me = $(this); //Added to ensure correct this context
$modal.fadeOut('slow', function () {
me.hide(function () {
$overlay.fadeOut('slow', function () {
me.hide(function () {
$content.fadeOut('slow', function () {
me.empty();
});
});
});
});
});
Assuming the rest of your code is correct this should ensure the transitions fire one after the next.
Firstly, you do not need $(this).hide(). JQuery fadeOut automatically set display: none at the end of fading animation (read more: http://api.jquery.com/fadeout/).
That mean, in your case $content element will also have display: none after fadeOut animation. I expect you forgot to add $content.show() in modal open method.

preventDefault() on a timer

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);

jQuery clickevent from a different page

I have a working clickevent handler (don't know if it's the right word for it) on a page which uses show/hide (like tabs) if you click on one of the on-page links. This works perfectly, but now I walk into another issue.
When I link to one of the tabs from a different page, eg. /page-slug/#tabtoshow it won't show the right tab, it just shows the first (open) tab. I want it to show the right tab when a URL contains the same id, eg #tabtoshow. The tabs will have the same id as the link.
This is my current script.
$(function() {
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
});
$(document).ready(function() {
$('a[href="#ondernemen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ondernemen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#groeien"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#spelen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#spelen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('a[href="#ontdekken"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ontdekken').slideDown(1000);
$('#spelen').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
$('a[href="#ontdekken"]').parent('.label').addClass("active");
});
Thanks in advance!!
If you're moving to another physical page, not a virtual page, you will need to handle the hash on the new page. You'd need to access location.hash or location.pathname and do something based on the hash value. You could handle it similarly to this:
$(document).ready(function() {
displayTab(location.hash);
});
Your code had some repetition, I have written a more general version for you. Also, I have used location.hash to determine what tab to activate.
$(document).ready(function() {
var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
$(selector).click(function() {
var that = this;
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$(selector).each(function() {
if ($(this).attr("id") !== $(that).attr("id")) {
$(this).slideUp(1000);
}
});
$(this).slideDown(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
$(location.hash).parent('.label').addClass("active");
});

How to combine Hover, Out, Click event together

var bar = $('.div_layer_Class');
$('a.second_line').click(function() {
$(this).unbind('mouseout');
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
bar.css('display','none');
});
now the issue with 'onBodyclick' when i click anywhere on body again i want to invoke mouseoutevent something like this
$('body').click(function() {
bar.css('display','none');
event.preventDefault();
});
when I do this it overlaps $('a.second_line').click(function() event. any idea how I can Achieve this.
http://jsfiddle.net/qGJH4/56/
In addition to e.stopPropagation(),
you can do 2 things:
make a variable to reference the mouseout event handler so you can re-bind it whenever the user clicks elsewhere to the body.
or
A variable to store to whether a.second_line is focused or not. Something like
var focused = false;
You code now will be:
var bar = $('.div_layer_Class');
var focused = false;
$('a.second_line').click(function(e) {
focused = true;
e.stopPropagation();
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
if (!focused)
bar.css('display','none');
});
$(document).click(function(e){
bar.css('display','none');
focused = false;
});
Example here
Try changing your code to this
var bar = $('.div_layer_Class');
$('a.second_line').click(function(e) {
bar.addClass('on');
e.stopPropagation();
}).mouseover(function() {
bar.css('display','inline');
}).mouseout(function() {
if(!bar.hasClass('on'))
bar.css('display','none');
});
$(document).on('click',function(){
bar.removeClass('on');
bar.css('display','none');
//return false;
});
Two lines to look at, first, the e in function(e)
$('a.second_line').click(function(e) {
and the stop e.stopPropagation();
That basically stops any parent handlers being notified. Read here

Categories