New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<html>
<head>
<style type="text/css">
/*specify height of broken up content */
.multiparts{
height: 50px;
}

</style>

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}


function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>
</head>

<body>

<div class="multiparts" style="display: block">
<p>Content 1 here</p>
</div>

<div class="multiparts">
<div>Content 2 here</div>
</div>

<div class="multiparts">
<table><td>Content 3</td></table>
</div>

<div id="formnavigation" style="width:200px; display:none">
<a id="backbutton" href="javascript:cycleback()" style="float:left">Back</a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">Forward</a>
</div><br>

</body>
</html>

Sweet Ads X