Text Sections

James Kennedy Feb 24, 2006

General

This script allows a user to read a volume of text, without having to scroll the page and without having to load different pages. This makes for easier maintenance as only one page needs to be updated, yet the content is visible to search engines. Very useful for large amounts of text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..

Notes

Created by: James Kennedy
Web Site: http://foxweb.marist.edu/users/kbpc3/example.html
Posted: February 24, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: textSections.js

function toggleMe(a){
  var next=document.getElementById(a);
  var b=new String();
  b= a-1;
  var prev=document.getElementById(b);
  if(!next)return true;
  if(next.style.display=="none"){
    next.style.display="block"
    prev.style.display="none"
    window.scrollTo(0,0);
  } else {
    next.style.display="none"
  }
  return true;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="textSections.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="1" style="display: block;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..</p>
<input type="button" class="pagebutton button" onclick="return toggleMe('2')" value="Go to Section 2">
</div>

<div id="2" style="display: none;">
<p>
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.</p>
<input type="button" class="pagebutton  button" onclick="return toggleMe('3')" value="Go to Section 3">
</div>

<div id="3" style="display: none;">
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit?</p>
<input type="button" class="pagebutton  button" onclick="return toggleMe('4')" value="Go to Section 4">
</div>

<div id="4" style="display: none;">
<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
<p>
<strong>Do not put a button on the last section; your page is done, the user can't go any farther.</strong><p>
<p>
<em>You could always add a button to reload the page:</em></p>
<input type="button" class="pagebutton  button" onclick="window.location.reload()" value="Reload page">
</div>

Leave a Response

(4 comments)

[a href="http://javascript.internet.com/text-effects/layer-scroller.html"]This might be[/a] what you're looking for. [a href="http://javascript.internet.com/miscellaneous/scroll-div-horizontal.html"]This one[/a] scrolls horizontally.

Lee Dec 2, 2008

How can I make this proceed backwards through the text sections as well as forward? I'm looking for two buttons - such as "Previous" and "Next," so the whole page doesn't have to be reloaded if you've missed something in the text. Is there an easy way to do this?

Lafcadio Nov 21, 2008

Sure, it should work fine.

Lee Sep 5, 2007

hi[br /]can i replace the tab button with images whihc when click will go to the correct page - 1 2 3 4[br /][br /]cheers[br /]Jiamie

Jaimie Lisa Stow Jul 20, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details