Div Layer Slide Show

We love getting feedback from our readers. As often happens, a person made a suggestion for software that is well worth developing. And here it is.

This article shows how to switch a div and its content every so often on a web page. An automated div layer slide show, one without next/previous buttons.

The div switch can be every second or larger intervals. The divs can contain any content a regular div can contain.

The effect is a section of the web page changing content every so often.

The divs should all be the same size so the page doesn't shift when one div is replaced with another. A CSS overflow:hidden or overflow:auto definition along with uniform width and height definitions can be used to ensure that.

Implementing the Div Layer Slide Show

Implementation requires two things:

1. The divs to switch.
2. The JavaScript

Let's use these three divs for the example.

<div id="divlayershow1" style="display:none; width:200px; height:90px; overflow:hidden; border:1px dotted red; padding:10px;">
<div style="font-size:22px; font-weight:bold"><a href="//www.willmaster.com">Willmaster.com</a></div>
<div style="font-size:16px; margin-top:9px;">Has friendly and efficient customer support.</div>
</div>

<div id="divlayershow2" style="display:none; width:200px; height:90px; overflow:hidden; border:1px dotted red; padding:10px;">
<div style="font-size:22px; font-weight:bold"><a href="//www.willmaster.com">Will Bontrager</a></div>
<div style="font-size:16px; margin-top:9px;">Writes software that works, <span style="letter-spacing:2px; font-weight:bold; color:red; background-color:yellow; white-space:nowrap;">&thinsp;really&thinsp;</span> works!</div>
</div>

<div id="divlayershow3" style="display:none; width:200px; height:90px; overflow:hidden; border:1px dotted red; padding:10px;">
<div style="font-size:22px; font-weight:bold"><a href="//www.willmaster.com">Willmaster.com</a></div>
<div style="font-size:16px; margin-top:9px;">Has been around for over a decade and a half, since 1998!</div>
</div>

A live implementation of the example is on the right.

Note that the three example divs all:

• Have a unique id value.

• Have a CSS overflow:hidden; definition. (Definition overflow:hidden; crops the content. Definition overflow:auto; can be used instead for a scroll bar whenever the div contains excess content.)

• Have identical CSS width and height definitions.

They also have other CSS definitions. Which yours may, too. Design your divs the way you want them.

Now, here is the JavaScript. (Customization notes below.)

<script type="text/javascript">
/* 
   Div Layer Slide Show
   Version 1.0
   February 28, 2011

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2011 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/
// Customization section.

// Specify the id values of the divs to switch, space separated.
var DivIDnames = "divlayershow1 divlayershow2 divlayershow3";

// Specify the number of seconds between div switching. A decimal number is OK.
var Interval = 3.5;

// End of customization section.
////////////////////////////////

DivIDnames = DivIDnames.replace(/^ */,"");
DivIDnames = DivIDnames.replace(/ *$/,"");
DivIDnames = DivIDnames.replace(/  +/g," ");
var ss_pieces = DivIDnames.split(" ");
var ss_now = 0;

function ss_SwitchDiv() {
document.getElementById(ss_pieces[ss_now]).style.display = "none";
ss_now++;
if(ss_now > ss_pieces.length - 1 ) { ss_now = 0; }
document.getElementById(ss_pieces[ss_now]).style.display = "";
}

for(var i=0; i<ss_pieces.length; i++) {
   document.getElementById(ss_pieces[i]).style.display = "none";
   }
setInterval("ss_SwitchDiv()",parseInt(Interval*1000));
document.getElementById(ss_pieces[ss_now]).style.display = "";
</script>

The JavaScript has two places to customize.

1. Specify the id values of the divs to switch, space separated. No commas. Just separate the id values with a space.

2. Specify the number of seconds between div switching. A decimal number is OK. The number 1.5 would mean 1½ seconds.

Put the JavaScript into the web page source code somewhere below the slide show divs.

When the web page is loaded into the browser, the slide show starts.

Adjust the interval between div switches as necessary for a pleasant experience.

The divs of the slide show can contain anything a div can contain.

Use the instructions in this article to implement your own div layer slide show.

Will Bontrager