Dynamic Page Content using Links

Here I present a javascript that can be used to display different content in the same location on the page depending on which of several links is selected. Your visitor can either select a specific link to display the associated content or use arrow links at either end of the list to scroll through the list of entries.

The following code shows a simple example with three tables overlaying one another with only one visible at a time. The required code works in Internet Explorer, Opera, and Netscape 6+. This code does not work with Netscape 4 and all of the tables will always be invisible in that browser.

<< 1 2 3 >>


The code to place the fields in the form is as follows:

<p class="centre"><a href="#" onclick="showTable(lastnum - 1);">&lt;&lt;</a>
<a href="#" onclick="showTable(1);">1</a>
<a href="#" onclick="showTable(2);">2</a>
<a href="#" onclick="showTable(3);">3</a>
<a href="#" onclick="showTable(lastnum + 1);">&gt;&gt;</a></p>
<table class="centre" width="100" border="0"><tr><td>
<div style="position:relative;">
id="showone" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre"width="100" border="1"><tr><td class="centre">First</td></tr></table>
id="showtwo" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre" width="100" border="1"><tr><td class="centre">Second</td></tr></table>
id="showthree" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre" width="100" border="1"><tr><td class="centre">Third</td></tr></table>

The first section of the code (above the blank line) displays the links that your visitors will use to select which of the dynamic content that will be displayed. The second section contains the content to be displayed and uses Relative/Absolute styles to overlay the content into exactly the same position.

Each of the specific content links in the link line calls a showTable function that will make the wanted content visible and hide the other content. The arrow links at either end of the line make use of a field called lastnum that is set to the entry that is displayed to select to display the previous or next entry as required. The function code is as follows (which includes code to wrap around when either end is reached):

var lastnum = 0;
var tbl = new Array(
tblsz = tbl.length;

function showTable(num) {
num -=1;
if (num < 0) num = tblsz - 1;
if (num >= tblsz) num = 0;
for (i=0;i<tblsz;i++) {var d = findDOM(tbl[i],1);if (i != num) d.visibility = 'hidden';
else d.visibility = 'visible';}
lastnum = num+1;
return false;

The above code uses the Document Object Model detection code.

There is only one spot where you need to make changes to this javascript code in order to include as many alternate entries as you like and that is to update the list of ids in the tbl array to match the ids attached to the alternate content (which you of course also need to add). Of course there can be as much content in each table as you require but the page will look best when all of the tables are the same size (you may need to alter the content of the outer table from &nbsp; to perhaps several empty paragraphs or whatever is easiest to leave enough space for where the tables are to appear, alternatively you may wish to have the first table visible to start with).

Of course if you don't require the << and >> options then you can use the simpler script described on the page Dynamic Page Content by substituting an appropriate combination of toggleField calls for each showTable call in the links across the top.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow