Multi-Part Content script
Description: This great script enables long content on your page to be viewed in sequential view. It break up arbitrary content into multiple parts, viewable one part at a time. The script automatically creates the necessary "back" and "forward" link when needed. For browsers that don't support this script, everything simply appears all at once like normal. Very cool!
Browser support for this script are IE5+ and NS6+.
Demo: Try cycling through the contents below:
Step 1: Add the below script to the <HEAD> section of your page:
Step 2: It's now time to break apart your content into many parts! The procedure is as simple as it gets- simply wrap each part in a special <DIV> tag as shown below:
<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>
Notice how the first <DIV> tag contains a "style:block" declaration.
This script should only
be used to break up content that
support division using <DIV> tags, for example, paragraphs,
images, entire tables etc. However, lets say you wish to break up
one table into multiple parts by doing:
<table> <div class="multiparts" style="display: block"> <tr> <td width="50%">Some text</td> </tr> </div> <div class="multiparts"> <tr> <td width="50%">Another text</td> </tr> </div> </table>This is NOT permitted, as semantically, you cannot divvy up table rows using <DIV> tags. In other words, <DIV> tags should never appear in such a setting. |
Step 3: Finally, we still need "back/forward" links so the viewer can browse through the various parts. Add the below HTML code to the bottom of your last content:
This creates a basic "back" and "forward" text link to be used for the task. Yes, you want to know if this portion is customizable. We made sure of that. You can in fact change most of what's in the code of Step 3 to help modify the look of the links, as long as the outside <DIV> is retained, the various IDs (ie: id="backbutton"), and the hrefs (ie: javascript:cycleback()). With that in mind then, here's a modified version of the "back" text link to use an image instead:
<a id="backbutton" href="javascript:cycleback()" style="float:left"> <img src="back.gif" border="0"></a>
That wasn't too hard was it?