New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Multi-Part Content script

Author: Dynamic Drive

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:

Renaissance Art and Architecture, painting, sculpture, architecture, and allied arts produced in Europe in the historical period called the Renaissance. Broadly considered, the period covers the 200 years between 1400 and 1600, although specialists disagree on exact dates.
The word renaissance literally means “rebirth” and is the French translation of the Italian rinascita. The two principal components of Renaissance style are the following: a revival of the classical forms originally developed by the ancient Greeks and Romans, and an intensified concern with secular life.
During the Renaissance, artists were no longer regarded as mere artisans, as they had been in the medieval past, but for the first time emerged as independent personalities, comparable to poets and writers. They sought new solutions to formal and visual problems, and many of them were also devoted to scientific experimentation. In this context, mathematical or linear perspective was developed, a system in which all objects in a painting or in low-relief sculpture are related both proportionally and rationally. As a result, the painted surface was regarded as a window on the natural world, and it became the task of painters to portray this world in their art.

Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

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.

Important Note
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:

Select All

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?