We Keep Coding

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/

Hide woocommerce-message in couple seconds

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.

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

How do I do 3 animations in jQuery and loop them? (Timing is messed up.)

I have a three different transitions for fading out and fading in my 3 images.
animate1 = function() {
$('#changingImage').fadeOut('fast', function() {
$('#changingImage').attr("src","../files/others/image1.jpg");
$('#changingImage').fadeIn('fast');
});
};
I have this same function two more times, just replacing the 1s with 2s and 3s.
I call my three functions with this, repeating every 5 seconds:
animate1().delay(5000);
animate2().delay(10000);
animate3().delay(15000);
I'm new at jQuery, and I don't understand why the timing is wrong. All that happens is image2 (the original) gets replaced with image1, and that's it.

Try using the setTimeout() javascript function.
Documentation: http://www.w3schools.com/jsref/met_win_settimeout.asp
For example:
setTimeout(function(){ animate1(); }, 5000);
setTimeout(function(){ animate2(); }, 5000);
setTimeout(function(){ animate3(); }, 5000);
This basically 'pauses' your JavaScript/jQuery code for 5 seconds before running the function and continuing.

.delay() does not repeat an event, it just delays its execution. You need .setInterval() if you want to repeat an event based on a given interval:
window.setInterval(function(){
setTimeout(animate1, 1000);
setTimeout(animate2, 500);
}, 5000);
Demo: https://jsfiddle.net/erkaner/bfb7jgaL/1/

Yay! I figured it out with a bunch of help.
var animations = function() {
setTimeout(function() {
animate1();
console.log("Animation 1")
}, 5000);
setTimeout(function() {
animate2();
console.log("Animation 2")
}, 10000);
setTimeout(function() {
animate3();
console.log("Animation 3")
}, 15000);
};
setInterval(animations, 15000);

Hi i have a suggestion for you in case that you have more than this 3 image so you will create a new function for it ?
so what about to use only 1 function that will call it self with an attribute that define image name as it is the only thing is changing every time so you can use this better and less code ,you have just the n value will change every time will increase and the max value witch define how many image you want
//if you want to set this animation for more than 3 image just change the max value
var max=3;
setTimeout(function(){ animate(2); }, 5000);
animate = function(n) {
$('#changingImage').fadeOut('fast', function() {
if(n<=max){
$('#changingImage').attr("src","http://www.imacros-scripts-for-free.is-best.net/image"+n+".jpg");
$('#changingImage').fadeIn('fast');
if(n==max){n=1}else{n++;}
setTimeout(function(){ animate(n); }, 5000);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="changingImage" src="http://www.imacros-scripts-for-free.is-best.net/image1.jpg" width="200px">

show div after 5 seconds and then refresh the div every 1 min

I have created a div into my page which i wanted to get load after 5 seconds the page get load. Then I wanted to refresh the div without refreshing the page after every 1 min. How can I achieve this functionality with the use of J query. My code look like this
$(document).ready(
function () {
setInterval(function() {
$('#newsletter').show();
}, 100000);
});
This upper block of code is only refreshing the div after 1 min. But on page load , i want the div to be shown to the user after 5 seconds and then this block of code should executed.

$(document).ready(function()
{
setTimeout(function()
{
// Perform actions you need to
setInterval(function()
{
// Perform them again every minute
}, 60000);
}, 5000);
});
I think what you were looking for is setTimeout

Try it:
$(function(){
setTimeout(function(){
$('#newsletter').show(); // to show div after 5 sec of page load
// To reshow on every one minute
setInterval(function() {
$('#newsletter').show();
}, 60000);
}, 5000);
});

You've already got the base functionality there, so all you'll need to do is add a message to appear after 5 seconds. Something like this should work.
$(document).ready(function()
{
setTimeout(function() {
// show message
},5000);
setInterval(function() {
$('#newsletter').show();
}, 60000);
});

Here is a jQuery solution:
$(document).ready(function () {
var $newsletter = $('#newsletter')
.delay(5000)
.show(function() {
setInterval(function() {
// update the newsletter, e.g. set new text
$newsletter.text(new Date());
}, 60000);
});
});