This example is using an iframe with its size set at 600 X 350 pixels.
In the page loaded into the iframe a div is created as the main container and its width set to 3260px and height set to 350px.
This div contains nested divs that are used to create content areas the same size as the iframe.
The total width of all these content areas should not exceed the width of the main container
As this example uses divs and css you must also take into account any padding, margins, and borders that are applied.
For this example I have used the following:
Content area width = 600
Content area border = 1
Content area margin-right = 50
Number of Content areas = 5
Therefore the container width is (600 + 2 + 50) * 5 = 3260px
The content area should not exceed the height of the main container otherwise the overflow will not be seen.
Providing you do the maths correctly you can have any number of Content areas
The script is coded into the parent page but the links in the parent page are written by the page in the iframe, this is to ensure that if muliple pages are used with a different number of content areas the number of links will correspond.
Iframe page example code
function createLinks(){
parent.document.getElementById("iframelinks").innerHTML='<a href="#null" onclick="scrollToDiv(\'div1\')">Div 1</a> '
+'<a href="#null" onclick="scrollToDiv(\'div2\')">Div 2</a> '
+'<a href="#null" onclick="scrollToDiv(\'div3\')">Div 3</a> '
+'<a href="#null" onclick="scrollToDiv(\'div4\')">Div 4</a> '
+'<a href="#null" onclick="scrollToDiv(\'div5\')">Div 5</a> '
}
Each link must correspond to the relative div id
<div id="div1">
Contents
</div>
Links can also be used in iframe page, if required
<a href="#null" onclick="parent.scrollToDiv('div1')">Div 1</a>
Note the reference to the parent in the link.
A table can be used instead of divs, load the table example to see