Timed Content Replacement

A certain amount of time after a page loads, content (ads, images, quotations, prompts) can be replaced. Perhaps after a minute. Or two minutes.

In the case of ads, if the first ad isn't of interest, the second might be. In the case of images, prompts, and other informational content, the replacement can provide additional information after sufficient time to see the original.

This article was written in response to a "Was this article helpful to you?" request from the bottom of an article about slide shows. The request was for how to change an ad if they don't click on it after a couple minutes.

With this Timed Content Replacement system, you're not restricted to one replacement. Any number of replacements may be made. And the content may be mixed (image once, text the next then, perhaps, an ad).

To avoid the potential of creating a huge web page file by loading all the delayed content at once, Ajax is used to pull in the content as needed from external files.

How It Works

The content to be replaced is in a div with an id value.

How long to wait before replacing the content in the div, and a list of external files to pull in to replace the content, are specified with JavaScript.

When the page loads, a timer replaces the content every so often.

Implementation is all HTML and JavaScript. No PHP.

An Example

The example div content changes every minute. After two changes, the rotation begins again with the original content.

The example div is responsive to available screen width.

The Timed Content Replacement Code

The code is HTML and JavaScript. The HTML is original and the JavaScript has three places to customize.

The HTML is a div, the div with content that will be replaced. The div must have an id value. That id value will be specified in the JavaScript so the JavaScript knows which div's content to replace.

Here's an example div:

<div id="to-be-replaced">
This content will be replaced.
</div>

The example div id value is colored blue.

The div may have CSS styles applied to it.

And here's the JavaScript. Paste it anywhere in the source code of your web page. If you're using WordPress, of if you want to import the JavaScript, see how to import JavaScript from an external file.

Customization notes follow.

<script type="text/javascript"><!--
/* 
   Timed Content Replacement
   Version 1.0
   April 13, 2015

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2015 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

var ReplacementFileURIs = new Array; // Leave line as is.

/* *** *** Customization Section *** *** */
//
// Three places to customize:

// Place 1:
// Specify the id value of the div with the content for 
//    replacement.
var IDofDivWithReplaceableContent = "to-be-replaced";

// Place 2:
// Specify the number of seconds to wait before replacing 
//    the div content.
var NumberOfSecondsUntilReplacement = 60;

// Place 3:
// Specify the URIs of the external files to pull in. It's 
//    important that the number in square brackets begins 
//    with 0 and the subsequent numbers are consecutive.
ReplacementFileURIs[0] = "/subdirectory/some-content.html";
ReplacementFileURIs[1] = "/subdirectory/more-content.html";
ReplacementFileURIs[2] = "/subdirectory/still-more-content.html";

//
/* *** *** End of Customization. *** *** */

var divID = document.getElementById(IDofDivWithReplaceableContent);
var MaximumNumber = ReplacementFileURIs.length - 1;
var OriginalContent = divID.innerHTML;
var NextNumber = 0;

function ReplaceContent()
{
   if( NextNumber > MaximumNumber )
   {
      divID.innerHTML = OriginalContent;
      NextNumber = 0;
      return;
   }
   var http = ObtainHTTP();
   if(! http) { return false; }
   http.onreadystatechange = function() { ReplaceDivContent(http); }
   http.open("GET",ReplacementFileURIs[NextNumber],true);
   http.setRequestHeader("Connection", "close");
   http.send('');
   NextNumber++;
} // function ReplaceContent()

function ReplaceDivContent(http)
{
   if(http.readyState == 4)
   {
      if(http.status == 200) { divID.innerHTML = http.responseText; }
      else { alert('\n\nContent request error, status code:\n'+http.status+' '+http.statusText); }
   }
} // function ReplaceDivContent()

function ObtainHTTP()
{
   var http;
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch (e)
   {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); }
      catch (e2)
      {
         try { http = new XMLHttpRequest(); }
         catch (e3) { http = false; }
      }
   }
   return http;
} // function ObtainHTTP()

setInterval(ReplaceContent,parseInt(NumberOfSecondsUntilReplacement*1000));
--></script>

Customization notes:

Three places need to be customized. The customization section is colored blue in the source code.

Each of the values to be replaced are colored red.

• Place 1:
  Specify the id value of the div with the content for replacement. For ease of recognition, the id value in the example div further above is colored blue.

  Copy the id value you assigned to your div and replace the red colored value in the JavaScript at the place indicated.

• Place 2:
  Specify the number of seconds to wait before replacing the div content. The number may be a decimal number, 1.5, for example to replace the content in 1½ seconds.

  Replace the red colored value in the JavaScript with your preferred number of seconds.

• Place 3:
  You'll need the URIs of the external files to pull in. The URI is the URL minus the http and domain name. As an example, the URI of URL http://example.com/page.php is /page.php

  (Because it's Ajax, the content must be pulled in from a location on the same domain as the web page.)

  At the relevant red colored customization section of the JavaScript, you'll see this (underscores represent URIs):

  ReplacementFileURIs[0] = "_____";
  ReplacementFileURIs[1] = "_____";
  ReplacementFileURIs[2] = "_____";
  

  The number of lines can be more or less than three, depending on how may URIs you have. Replaced the underscores with your URIs.

  It's important that the number in square brackets begins with 0 and the subsequent numbers are consecutive.

Paste the JavaScript anywhere into your web page source code.

You're good to go. Your content will be replaced with custom content at your custom timing.

(This article first appeared in Possibilities ezine.)

Will Bontrager