Split Text Script - Javascript - Neils Resource WebSplit Text Script - Javascript - Neils Resource WebSplit Text - Javascript - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
This javascript allows a large document to be split into manageable pieces with a forward / back buttons as necessary for navigating between the sections. Note that the first section has no back button and the last section has no forward button. The example is followed by the coding. I'm sure you will find a use for this nifty piece of coding courtesy of Dynamic Drive

A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.

example
The text below is an example of fitting a large amount of text in a limited space.

The sub-sections include photographs in.... Portugal, Ireland, Devon, Germany, Belgium, France, The Broads and anywhere else I may visit..... If you were 'there', and would like to have your own photographs included in this collection, please attach your digital format photo(s) using the email link below, or lend me your 'conventional' camera negatives or slides for scanning. They will be returned!
I will probably need to optimise, re-size etc., and (subject to web space) publish them as soon as possible, with an appropriate acknowledgement, if you don't like the result let me know!. Any contributions will be for use on these pages only and will, of course, remain your property.
As I attempt to add text comments to the pictures, please don't hesitate to let me know of any inaccurate details (names, places, dates etc.)

Code for Splitting Text into sections with Forward & Back buttons
Head Section
Style Statement
<style type="text/css">
/*specify height of broken up content */
.multiparts{ height: 50px; } each text section is 50px in height
</style>
Script
<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>
Body Section
Text Sections

<div class="multiparts" style="display: block; width:385px; height:162px">
<div>Text for Section 1 here</div>
</div>

<div class="multiparts" style="width: 385px; height: 162px">
<div>Text for Section 2 here</div>

</div>

<div class="multiparts" style="width: 385px; height: 162px">
<div>Text for Section 3 here</div>
</div>

Button Controls
<div id="formnavigation" style="width:370px; display:none; height:21px">
<a id="backbutton" href="javascript:cycleback()" style="float:left">
<span style="text-decoration: none"></span>
<img src="back button image" border="0" width="33" height="21"></a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">
<span style="text-decoration: none"></span>
<img src="forward button image" border="0" width="33" height="21"></a>
</div>

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

Top of the PageTop of the PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 19/01/2008 - Split Text Script - Javascript - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2