• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Including Multiple Pages in a Single Page

Including Multiple Pages in a Single Page

One bottleneck for Web surfing is simply going from HTML document to HTML document. Every time you load a new Web page, you have to wait as a signal is sent from your computer, travels over the Internet to the server, and then another signal is sent back to your machine. This can take less than a second, but it often takes longer depending on the Web page being loaded.

One way to speed things up is to actually include more than one page’s worth of content in a single HTML document, but hide that content until it is needed for display. To do this, you set up different layers with content, but set their display attributes to none. Then when the visitor clicks a link, the new layer is displayed and the previous layer is hidden. To the visitor this looks as if the page loaded instantly, making for a more satisfying Web experience.

To create a single Web page with multiple pages of content:

var objPage = null;

Define a global variable called objPage to record the current page layer being displayed (Code 4.15). This variable should initially be set to null since no page is displayed.

Code 4.15. The function showPage() is used to hide the previous page and then show the selected page.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
→ xml:lang="en">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Including Multiple Pages in a Single
        → Page</title>
        <script language="javascript"
        → type="text/javascript">
        var objPage = null;
								function showPage(pageName) {
								if (objPage) objPage.style.display = 'none';
              → (pageName);
              objPage.style.display = 'block';
        <style type="text/css">
           .page { display:none;}
        <h2>by LEWIS CARROLL</h2>
        <a href="javascript:showPage('page1')"target="_self">Chapter 1</a> |
        <a href="javascript:showPage('page2')"
        → target="_self">Chapter 2</a> |
        <a href="javascript:showPage('page3')"
        → target="_self">Chapter 3</a>
        <br /><br />
        <div id="page1" class="page">
           <h2>CHAPTER I</h2>
           <h3>Looking-Glass House</h3>
           <p><img src="Alice_1_2.jpg"
           → alt="Kitten with string"
           → width="250" height="161"
           → align="right" border="0"
           → hspace="5" vspace="5"/>One thing
           → was certain, that the WHITE kitten
           → had had nothing to do with it...</p>
        <div id="page2" class="page">
           <h2>CHAPTER II</h2>
           <h3>The Garden of Live Flowers</h3>
           <p><img src="Alice_2_1.jpg"
           → alt="Alice in garden" width="200"
           → height="234" align="left"
           → border="0" hspace="5"
           → vspace="5"/>'I should see the
           → garden far better,' said Alice to
           → herself...</p>
        <div id="page3" class="page">
           <h2>CHAPTER III</h2>
           <h3>Looking-Glass Insects</h3>
           <p><img src="Alice_3_1.jpg"
           → alt="Alice on train" width="250"
           → height="200" align="right"
           → border="0" hspace="5"
           → vspace="5"/>Of course the first
           → thing to do was to make a grand
           → survey of the country...</p>


function showPage(pageName) {...}

Add the function showPage() to your JavaScript. This function hides the currently showing page (if there is one) and then shows the page indicated by the pageName variable passed to it. Steps 3–6 apply to this function.

if (objPage) objPage.style.display =
→ 'none';

Check to see if there is currently a page being displayed and, if there is, hide it by setting its display state to none.

objPage = document.getElementById
→ (pageName);

Add the variable objPage to record the ID for the page object you’ll be showing.

objPage.style.display = 'block'

Change the display property for the page layer object to block so that it becomes visible.

.page { display:none;}

Create a class called page with the display state set to none that will be assigned to all of the page layers so that they’re initially not displayed on the page.

<a href="javascript:showPage
→ ('page1')" target="_self">
→ Chapter 1</a>

In your HTML, add a link to trigger the showPage() function, passing it the name of the page layer to be displayed.

<div id="page1" class="page">...
→ </div>

Set up a layer for each page of content. When the link from step 7 is clicked, the indicated page will be shown (Figures 4.27, 4.28, 4.29, and 4.30 on next page).

Figure 4.27. Before a chapter link is clicked.

Figure 4.28. After the first link is clicked, the first chapter shows.

Figure 4.29. After the second link is clicked, the first chapter disappears and the second chapter appears.

Figure 4.30. After the third link is clicked, the second page disappears and the third page appears. Keep in mind that visitors can jump between any of the pages; they don’t have to go linearly.

✓ Tip

  • Of course, the more content you place in a single HTML document the longer it will take to download. For text, this is usually not a huge problem, but for graphics it may mean a significant delay. However, some browsers won’t load the images until the layer they are on is made visible.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint