Div content rotation using JavaScript

Our designer needed a way to rotate the contents of a specific div on a web page. The content to be rotated would include text and images in varying layouts. There are plenty of examples online showing how to change part of a web page using JavaScript, but most of the examples I found use JavaScript to generate the HTML. This means either the designer has to be comfortable programming in JavaScript, or they have to call on a programmer to make changes.

I wanted our designer (my wife) to be able to use their preferred design tool (DreamWeaver) to create the contents of the rotating divs, without having to call on a programmer (me) to make changes. I also didn’t want to place any restrictions on the HTML contents of the rotating divs. The solution I came up with is described below. You can see it in action here. The div that rotates is the Business Profile.

The divs
<div id=”before”>
    <p>this is the div before</p>
</div>
<div id=”destination”>
    <p>the contents of this div will be replaced</p>
</div>
<div id=”source1″ style=”display:none”>
    <p>contents of <span style=”font-weight: bold”>first</span> rotating div</p>
</div>
<div id=”source2″ style=”display:none”>
    <p>contents of <span style=”font-style: italic”>second</span> rotating div</p>
</div>
<div id=”source3″ style=”display:none”>
    <p>contents of <span style=”font-family: sans-serif”>third</span> rotating div</p>
</div>
<div id=”after”>
    <p>this is the div after</p>
</div>

What we have here is some arbitrary page content for illustration (div id=”before”), followed by the div we want to update with the rotating content (div id=”destination”). Next comes a series of divs (div id=”source1″ etc.), the contents of which will be rotated into the destination div one at a time. Finally we have some more arbitrary page content for illustration (div id=”after”).

The thing to notice about the divs to be rotated is the style=”display:none” property. This prevents them from being rendered or having any impact on the layout of the page. Without this property, the code above would render like this:

this is the div before
the contents of this div will be replaced
contents of first rotating div
contents of second rotating div
contents of third rotating div
this is the div after

Instead, what we see (without the JavaScript) is this:

this is the div before
the contents of this div will be replaced
this is the div after

The designer can create more divs to be rotated, using their favorite design tool, then paste them into the page source (as div id=”source4″ etc.), adding the display:none property to keep them from rendering or affecting the page layout.

The JavaScript
The following code is added to the body section of the HTML, below the set of divs, causing it to run when the page is rendered:
<script type=”text/javascript”>
    var sourceName = [“source1”, “source2”, “source3”];
    rotateDivContent(sourceName, “destination”);
</script>

When the designer adds more divs to be rotated, they include the corresponding names in the var sourceName array. This array determines which divs will be rotated into the destination, and in what order. This also allows the designer to bring specific divs into and out of rotation, simply by including them in or excluding them from the array.

The following code is added to the head section of the HTML:
<script type=”text/javascript”>
// select a source div and copy into destination
function rotateDivContent(sourceName, destName) {
    var divIndex = getCookie(“divIndex”);
    if (null == divIndex) {
        // initialize to a pseudo-random value
        var now = new Date();
        var index = now.getMilliseconds();
    } else {
        var index = parseInt(divIndex);
    }
    // adjust index to enable selection from array
    index %= sourceName.length;
    // increment so the next div will be selected next time
    setSessionCookie(“divIndex”, index + 1);
    // copy HTML from source div to destination div
    var sourceDiv = document.getElementById(sourceName[index]);
    var destDiv = document.getElementById(destName);
    destDiv.innerHTML = sourceDiv.innerHTML;
}


// search for named cookie and return its value, or null
function getCookie(name) {
    var cookieRE = new RegExp(“(^|; )” + name + “=([^;]*)(;|$)”);
    var found = document.cookie.match(cookieRE);
    if (found) {
        return found[2];
    } else {
        return null;
    }
}


// create or update a session cookie
function setSessionCookie(name, value) {
    document.cookie = name + “=” + value;
}


// prevent caching of this page
window.onbeforeunload = function () {
};
</script>

The function rotateDivContent does most of the work. In this example, a session cookie is used to keep track of the index of the next div to be displayed. My theory is that even users who are super-sensitive about privacy are reasonably likely to have session cookies enabled. The first time the user visits the page, the cookie doesn’t exist, so the index is generated pseudo-randomly by grabbing the current time in milliseconds. On subsequent visits to the page within the same session, the value is incremented and the destination div content is rotated.

Updating the contents of the destination div is as simple as setting its innerHTML property to that of the selected source div. Instead of writing elaborate JavaScript to generate a limited set of HTML, the code remains simple, and the designer can create arbitrarily complex HTML in the source divs using their preferred design tool.

An anonymous empty function is assigned to window.onbeforeunload to prevent caching of the page. This forces the script to run every time the user visits the page, ensuring that the div contents will rotate. (Unfortunately Safari 5.0 fails to re-render the page when the user clicks their back or forward button. Firefox, Camino and IE work as expected.)

You’re welcome to use or modify this code as you see fit. Please let me know if you find it useful.