I have a button that fades in some html file, and then a back button that returns the user to initial view. However this only works once. They are unable to click the button again for a more detailed view.
$('.support').click(function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$('.back').click(function () {
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
});
If .back element is generated dynamically, you should delegate the event:
$('.main-view-wrapper').on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})
$(document).on('click', '.support', function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$(document).on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})
After you've clicked both buttons, you've faded out both .main-view and .return-main, but you never fade them back in. So nothing will happen on the next click. Do you need to fade them in on click of the opposite button?
Related
I've wanted to do smooth transition between tabs (first fadetoggle, then change content, fadetoogle again), but "changing content" part doesn't wait for the animation to finish. I.e. content changes before finishing the animation
$('.catalog__wrapper').fadeToggle('slow', executeTabChange(tab, () => $('.catalog__wrapper').fadeToggle()))
Link to jsfiddle
https://jsfiddle.net/Denchuk10111/cowypes2/34/
Something like this
$(document).ready(function() {
$('ul.catalog__tabs').on('click', 'li:not(.catalog__tab_active)', function() {
const tab = $(this);
$('.catalog__wrapper').fadeOut('slow', () => {
executeTabChange(tab, ()=>{
$('.catalog__wrapper').fadeIn()
});
});
});
function executeTabChange(form, callback) {
form
.addClass('catalog__tab_active').siblings().removeClass('catalog__tab_active')
.closest('body').find('div.catalog__content').removeClass('catalog__content_active')
.eq(form.index()).addClass('catalog__content_active');
callback();
}
})
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.
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 made this script to fadeout and fadein (fadeTo) a div when I hover another div, it's almost working perfect but when I quickly hover in and out the div the script keeps looping until it reaches the times I hovered it.
Is it possible to stop (timeout?) the fadeOut/FadeIn effect till the loop is completed? So it stops repeating with a quick hover in and out but that the script works again when the loop is finished
jsFiddle: (quickly hover in and out the red part a few times, you'll notice the text keeps going)
http://jsfiddle.net/v69Jk/
$(function () {
$('.one').hover(function () {
$('.show').fadeTo(600, 0);
},
function () {
$('.show').fadeTo(600, 1);
});
});
Solution 1: cancel the previous animation:
$(function () {
$('.one').hover(function () {
$('.show').stop().fadeTo(600, 0);
},
function () {
$('.show').stop().fadeTo(600, 1);
});
});
Demo
Solution 2: stop event when the animation is not done yet (as you wanted, but this might not work properly because of the hover function)
$(function () {
$('.one').hover(function () {
if (!$('.show').is(':animated')) {
$('.show').fadeTo(600, 0);
}
},
function () {
if (!$('.show').is(':animated')) {
$('.show').fadeTo(600, 1);
}
});
});
Demo
need help.. this is my fiddle.
it shows a pop up on first load..
the problem is when i click on the pop up it hides..how do i prevent this.. also when i click on a link it should show the pop up again and when i click outside of the pop up it will hide..
Script
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$("#popupBoxClose").click( function () {
alert('hello');
unloadPopupBox();
});
$("#popup_box").click( function () {
e.stopPropagation();
});
$('#global_wrapper').click( function() {
unloadPopupBox();
});
$('.secure').click( function() {
loadPopupBox();
});
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').show();
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
You aren't passing the event to the click handler, try updating this event handler, note the e passed as a parameter to the function:
$("#popup_box").click( function (e) {
e.stopPropagation();
});