Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Delayed Content

What is delayed content?

It's content that appears on a web page only after a specified amount of time has elapsed.

What can it be used for?

Wouldn't you like to know!

Hopefully you just saw a silly answer to that question so you can see what this script does. If not, make sure Javascript is enabled in your browser and try reloading the page.

Now, for the real answer...

One reader wanted his visitors to view a short commercial before a link appears. I've seen this technique used to delay a buy button, on newspaper sites to hide advertising until (they hope) the reader is interested in the story, and in many other places.

You can use it to temporarily hide anything. You could have a trivia quiz and tell the users they have 10 seconds to answer each question. At the end of 10 seconds the answer appears along with a link to go to the next question. If you have advertising that pays per impression, all those page views can add up to a nice payday.

You can probably think up other uses, including just doing it for fun, so I'll just get right to showing you how it's done.

First, place the following JavaScript in the head section of the page where you want to use it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//Script courtesy of BoogieJack.com
$(document).ready(function(){
  $(function(){
    $("#delayed").delay(3000).fadeIn(4000);
  });
});
</script>

This script does two things:

1. It hides the content for the amount of time you specify.
2. It fades the content into view after the specified time.

Those are two things you can change to your liking. In line 6 you'll see this:

.delay(3000).fadeIn(4000);

The delay is set to 3000 milliseconds (3 seconds). The fade in time is set to 4000 milliseconds (4 seconds). Change those numbers as you like, but don't change anything else in the script. Those two actions need to be chained as shown, do not separate them.

Note: When writing the milliseconds number do not use a comma in the number as many do when writing large numbers (this is wrong: 3,000) or it will break the script.

That's all there is to that part, now let's look at the part that hides the content until the specified amount of time has passed.

<div id="delayed" style="display:none;">
This content is hidden until the specified amount of time has passed.
</div>

It's just a division with an ID name of “delayed” to match the script. There's also a snippet of CSS to hide the division until the time has expired, after which the JavaScript will reveal the content.

You can put any content you like inside the division—links, buy buttons, text, images, even a video.

Pretty easy, right? Yeah there hey, you betcha my boots!