Hide woocommerce-message in couple seconds - javascript

I tried to use this code to hide woocommerce-message but it doesn't work.
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast');
}, 5000); // <-- time in mseconds
Do you any another solutions ? I tried to put this code into header.php and my template has space for Custom Header JavaScript Code but nothing works.

if the element pops up and is inserted into the dom randomly you can use an approach like this to remove it.
$(document).ready(function(){
$(document).on('DOMNodeInserted', function(e) {
if ($(e.target).is('.woocommerce-message')) {
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast');
alert("node fading");
}, 5000);
}
});
//object inserted after 2 seconds
setTimeout(function(){
$('<div class="woocommerce-message">Test node inserted </div>').appendTo('body');
alert("node inserted");
},2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This worked for me.
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast')
}, 5000);
If you're using wordpress, try
setTimeout(function() {
jQuery('.woocommerce-message').fadeOut('fast')
}, 5000);
This link may help you as well: jQuery | on click fade out and / or automatically fade out

It show the error when we use $(e.target).
so ignoring the I have add tweak.
jQuery(document).on('DOMNodeInserted', '.woocommerce-error,.woocommerce-message', function(e) {
setTimeout(function() {
jQuery('.woocommerce-error,.woocommerce-message').fadeOut('fast');
}, 6000);
});
Good luck.

Related

make auto click using jquery

I'm using trigger click for auto click wit trimmer on an item can anyone help me to put this in infinity loop so it keep repeat it self again and again but using jQuery not JavaScript.
setTimeout(function() {
$('#click2').trigger('click');
}, 4e3);
setTimeout(function() {
$('#click2').trigger('click');
}, 8e3);
setTimeout(function() {
$('#click3').trigger('click');
}, 12e3);
setInterval(function() {
$('#click2').trigger('click');
setTimeout(function() {
$('#click3').trigger('click');
}, 500)
}, 1000 /* in milliseconds */);
This triggers both button clicks every second.
Not sure why you need this though. I am sure there is a better way to achieve what it is you are trying to accomplish.
use setInterval
setInterval(function() {
$('#click2').trigger('click');
}, 1000);

How to display content after certain amount of time?

how can I display a div container after a certain amount of time, say 10 seconds. Also, I'm using a CLASS and no ID.
I already tried:
$(document).ready(function() {
$(".contentPost").delay(5000).fadeIn(500);
});
And CSS:
.contentPost {
display: none;
}
However that doesn't really work for me anymore... Any other ideas?
Use setTimeout
$(document).ready(function() {
setTimeout(function(){ $(".contentPost").fadeIn(500); }, 10000);
});
You can use plain javascript also.
setTimeout(function() {
document.querySelector('.contentPost').className = "";
}, 5000)
https://jsfiddle.net/ananthaprakashb/8jrdwrrL/

Adding a delay to to a form scroller

I am using http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/ to build a form - I want a delay before the page scrolls down after the click event.
I've been trying to achieve this using setTimeout but have been struggling.
For example I thought this would work:
// show next field
setTimeout(function() {
this.ctrlContinue.addEventListener( 'click', function() {
self._nextField();
} );
}, 1000);
You can see the full code at https://github.com/codrops/FullscreenForm/blob/master/js/fullscreenForm.js
Thanks
This should work, you should set timeout after click event not before.
this.ctrlContinue.addEventListener( 'click', function() {
setTimeout(function() {
self._nextField();
}, 1000);
});

Delay in show after 2 second by jquery

I want if user moved the mouse for two seconds (Keep the mouse button for two seconds) on a class, show to he hide class. how is it? ()
If you move the mouse tandem (several times) on class, You will see slideToggle done as automated, I do not want this. How can fix it?
DEMO: http://jsfiddle.net/tD8hc/
My tried:
$('.clientele-logoindex').live('mouseenter', function() {
setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})​
Please try this below link Your Problem will solve
http://jsfiddle.net/G3dk3/1/
var s;
$('.clientele-logoindex').live('mouseenter', function() {
s = setTimeout(function(){
$('.clientele_mess').slideDown();
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
clearTimeout(s)
})
Write your html like this
<div class="clientele-logoindex">Keep the mouse here
<div class="clientele_mess" style="display: none;">okkkkkkko</div></div>
Record when a timer is started and check if one exists before starting a new one:
window.timer = null;
$('.clientele-logoindex').live('mouseenter', function() {
if(!window.timer) {
window.timer = setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
window.timer = null;
}, 2000 );
}
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})​
Take a look at hoverIntent is a jquery plugin to ensure hover on elements.

Issues with clearTimeout

I am trying to build a simple navigation with sub-navigation drop-downs. The desired functionality is for the drop-down to hide itself after a certain amount of seconds if it has not been entered by the mouse. Though if it is currently hovered, I would like to clearTimeout so that it does not hide while the mouse is inside of it.
function hideNav() {
$('.subnav').hover(function(){
clearTimeout(t);
}, function() {
$(this).hide();
});
}
$('#nav li').mouseover(function() {
t = setTimeout(function() { $('.active').hide()}, 4000);
//var liTarget = $(this).attr('id');
$('.active').hide();
$('.subnav', this).show().addClass('active');
navTimer;
hideNav();
});
What am I missing? Am I passing the handle wrong?
You should also clear the timeout in mouseover, before setting the new timeout.
Otherwise a timeout started before will still be active, but no longer accessible via the t-variable.
you can make the timer variable global.
function hideNav() {
$('.subnav').hover(function(){
clearTimeout(window.t);
}
}
$('#nav li').mouseover(function() {
window.t = setTimeout(function() { $('.active').hide()}, 4000);
});
Try doing it the recommended way (JS statement as a string):
t = setTimeout("$('.active').hide()", 4000);

Categories