Delayed Content

Some content can intentionally be delayed from appearing on a page for a specified amount of time.

The delayed content may be something you want particular attention paid to, like a subscription form or a time-limited special. Or it may be something else, for a different reason.

Watch this space:

Whatever the purpose, publication of certain content can be delayed for a specified amount of time.

The method uses Ajax. If you're unfamiliar with Ajax, see Ajax, How It Works and How To Use It.

How Delaying Content Publication Works

There's an empty div on the web page with an id value. On the same domain as the web page is the content that will be published within the currently empty div.

After a specified amount of time, Ajax fetches the content to publish and inserts it into the div. (If the div contains content before the new content is published, the previous content will be replaced with the new.)

Note that JavaScript won't run in content that's published with Ajax after the web page is loaded. Therefore, the content you publish in the empty div needs to work without JavaScript.

Implementation

An empty div is created. The div will contain content after a certain amount of time. The id value of the div will be specified in the JavaScript further below.

Here's an example div:

<div id="example-div-id"></div>

On the same domain as the web page is content that will be published within the div. Make a note of the content's URI, which is the URL minus the http and domain name. Example:

With those two items of information at hand, you're ready for the Ajax engine JavaScript. Paste the JavaScript into your web page somewhere below the div where Ajax will insert the content.

Here's the JavaScript. (Customizing information follows.)

<script type="text/javascript">
/* 
   Delayed Content Publication with Ajax
   Version 1.0
   January 17, 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. 
*/

/***********************/
/* Begin customization */

var ContentDivID = "example-div-id";

var URI = "/books/graph.html";

var SecondsToPause = 7;

/* End of customization */
/************************/

function GetHTTPconnection()
{
   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 GetHTTPconnection()

function RequestAPage()
{
   var http = GetHTTPconnection();
   if(! http) { return false; }
   var params = new Array();
   params.push( "one=" + encodeURIComponent('hi buddy') );
   params.push( "two=" + encodeURIComponent('hello back to ya!') );
   http.onreadystatechange = function() { HandleRequestedPage(http); }
   http.open("GET",URI + "?" + params.join("&"),true);
   http.setRequestHeader("Connection", "close");
   http.send('');
} // function RequestAPage()

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

setTimeout(RequestAPage,parseInt(SecondsToPause*1000));
</script>

Customization notes:

About two dozen lines from the top of the JavaScript (colored blue), you'll see a customization section. Three places need to be customized.

1. var ContentDivID = "example-div-id"; — Replace example-div-id with the ID of the div within which the content will be published.

2. var URI = "/books/graph.html"; — Replace /books/graph.html with the URI of the content to publish in the div.

3. var SecondsToPause = 7; — Replace the number 7 with the number of seconds to delay before publishing the content. A decimal number is acceptable.

Implementation is now complete and ready for testing.

When the page is loaded, there will be a delay for the number of seconds specified in the JavaScript. Then, the content specified in the JavaScript will be retrieved and inserted into the div with the specified id value.

The Willmaster Library's Ajax to Fill Div is a tutorial showing how Ajax can be used in various ways to fill a div with content obtained from the server. And change the content on demand.

(This article first appeared in Possibilities ezine.)

Will Bontrager