Home page sample: expanding and collapsing hierarchical text

A home page is the first page users see when they run your application. The home page in this example, index.html, presents some current information and provides access to the other pages in the application. The workings of this page are described in detail in Home page: expanding and collapsing hierarchical text.

The full source code for index.html is listed below. For instructions on downloading this source code, see Downloading and accessing the JavaScript engine sample files. 

<html>

<head>

<title>Quick Update</title>

<meta name="HandheldFriendly" content="True">

<script language="JavaScript1.2">
 
<!--

// 
// FILE: index.html 
// 
// Revision Date: March 15, 2002 
// 
// Copyright (c) 2006, iAnywhere Solutions, Inc. 
//

//-->
 
<!--

    // 
    // FUNCTION: InitializeNav() 
    // 
    function InitializeNav() 
    {
 
        if (arguments.length != 0) 
            throw new Error("function InitializeNav() incorrectly called");

        // 
        // Navigation bar initially not displayed. 
        // 
        HideNav();
 
        // 
        // Show the navigation URLs that are at the bottom of the HTML 
        document. 
        // 
        document.getElementById("navurls").style.display = "block";

        return;
 
    } //InitializeNav

    // 
    // FUNCTION: ShowNav() 
    // 
    // Purpose: Show the dropdown navigation bar. 
    // 
    function ShowNav() 
    {
 
        if (arguments.length != 0) 
            throw new Error("function ShowNav() incorrectly called");

        document.getElementById('openNav').style.display="block"; 
        document.getElementById('closedNav').style.display="none"; 
        document.getElementById('nav').style.display="block";

        return;
 
    } //ShowNav

    // 
    // FUNCTION: HideNav() 
    // 
    // Purpose: Hide the dropdown navigation bar. 
    // 
    function HideNav() 
    {
 
        if (arguments.length != 0)
            throw new Error("function HideNav() incorrectly called");

        document.getElementById('openNav').style.display="none"; 
        document.getElementById('closedNav').style.display="block"; 
        document.getElementById('nav').style.display="none";

        return;
    } //HideNav

    //
    // FUNCTION: ExpandDisp() 
    // 
    function ExpandDisp(id) 
    {
 
        if (arguments.length != 1)
            throw new Error("function ExpandDisp() incorrectly called");

        document.getElementById(id).style.display = 
            ((document.getElementById(id).style.display == "none")
                ? "block" : "none");

        return;
 
    } //ExpandDisp

//-->

</script>

</head>

<body onload="InitializeNav();" 
    style="FONT-SIZE: 8px; COLOR: #000000; 
        FONT-FAMILY: verdana,geneva,arial; 
        MARGIN-TOP: 0px; MARGIN-LEFT: 0px">
 
<table border="0" width="144" style="font-size: 8px; 
    COLOR: #000000;">
 
<tr> 
    <td valign="top" width="128"> 
    <IMG height=34 src="logo.gif" width=118 border=0> 
    <IMG height=5 src="darkdotline.gif" width=118 border=0> 
    QUICK UPDATE 
    <br> 
    <IMG height=5 src="darkdotline.gif" width=118 border=0> 
    <br>
 
    <!-- If you want the sections to be      --> 
    <!-- initially displayed, within the DIV --> 
    <!-- tags, change display:none to        --> 
    <!-- display:block -->


    <!-- Quick Update 1 -->
 
    <IMG height=11 src="pointer1.gif" width=16 border=0> 
    <b> <A onclick="return ExpandDisp('item1Text');" href ="#"> 
    ROADMAP 
    </A> 
    </b> 
    <div ID="item1Text" style="display:none;"> 
    Supply issues in the Singapore plant have not affected the 
        company's Q2 release schedule.
    </div>
 
    <!-- Quick Update 2 --> 
    <br> 
    <IMG height=11 src="pointer1.gif" width=16 border=0> 
    <b> 
    <A onclick="return ExpandDisp('item2Text');" href ="#"> 
    PERSONNEL 
    </A> 
    </b> 
    <div ID="item2Text" STYLE="display:none;">
    Donald Morgan named acting PM of space component project. 
    </div>
 
    <!-- Quick Update 3 --> 
    <br> 
    <IMG height=11 src="pointer1.gif" width=16 border=0> 
    <b> 
    <A onclick="return ExpandDisp('item3Text');" href ="#"> 
    COMPETITION 
    </A> 
    </b>
 
    <div ID="item3Text" style="display:none;"> 
    United Aerospace has inside track on Boeing deal. 
    </div> 
    </td>
 
    <!-- Navigation Bar --> 
    <td valign="top" align="left" width="16">

    <div id="openNav" onclick="HideNav()"> 
    <IMG height=11 src="open.gif" width=16 border=0> 
    </div>
 
    <div id="closedNav" onclick="ShowNav()"> 
    <IMG height=11 src="closed.gif" width=16 border=0> 
    </div>

    <div id="nav"> 
    <IMG height=92 src="home_nav.gif" width=16 useMap=#nav border=0> 
    </div>
 
    </td>

</tr>

</table>

<br>
 
<map name="nav"> 
<area shape="RECT" coords="0,0,15,15" href="index.html"> 
<area shape="RECT" coords="0,19,15,34" href="calendar.html"> 
<area shape="RECT" coords="0,38,15,53" href="chart.html"> 
<area shape="RECT" coords="0,57,15,72" href="mail.html"> 
<area shape="RECT" coords="0,76,15,91" href="leads.html"> 
</map>
 
<div ID="navurls"> 
<table border="0" width="120" 
    style="FONT-SIZE: 8px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; 
        FONT-FAMILY: verdana,geneva,arial">
 
    <tr align="center" valign="top" > 
    <td><A href="index.html">Home</A></td> 
    <td><A href="calendar.html">Cal</A></td> 
    <td><A href="chart.html">Chart</A></td> 
    <td><A href="mail.html">Mail</A></td> 
    <td><A href="leads.html">Leads</A></td>
 
    </tr> 
</table> 
</div>

</body> 
</html>
Copyright © 2008, iAnywhere Solutions, Inc.