<TITLE>INDEX.TXT </TITLE> 


  • This shows the simplifified code in my starting INDEX.HTML file.

  • First -- the initial page appears (very briefly) to auto-redirect the user

  • Then a splash page appears, customized for the browser, with a simple menu

  • Click 1 takes the user to a more detailed menu section

  • Click 2 should take the user to the page of choice

  • This page uses styles for some unusual typography and positioning

  • It uses JavaScript to tests for browser family and redirects the user --
	to sophisticated pages (indexhe5.html for IE 4/5/6 and indexhe6.html for NS 6)
	or a simpler indexhe4.html page (NS 4 and all other browsers)

  • If this browser test fails, the user is redirected to a default page

  • An extra script from the NS 4 version of this page is retained here --
        showing how to correct the Netscape 4 resize bug

  • On the destination page for IE4/5/6 I added mouseOver menu displays

  • I also added IE-only functions to test for actual window display size
    and then made the text sizes to be multiples of this value

    


      

    1. /* ********************************************************************** */
/* redirect to default page -- if browser test fails after 5 seconds      */
/* ********************************************************************** */
 <META HTTP-EQUIV="refresh" CONTENT="5; URL=index515.html">

<style>

//

    2. * ********************************************************************** */
/*  set sizes: humongous, very large, and normal --                      */
/*  set some positioning                                                 */
/*  set some font colors as shades of gray                               */
/* ********************************************************************* */

.watermark512d {color:#F9F9F9; font-size:642pt; line-height:480pt;
      font-family: Verbana, sans-serif;
      margin-top: 0px; position:absolute; top: 0px; left: 0px;}

.head2 {color: gray ; font-family: Verbana, sans-serif;
      font-size: 64pt; line-height:64pt; }

.head6 {color: #999999; font-family: Verbana, sans-serif;
      font-size: 12pt; line-height:16pt; }


    3. /* ********************************************************************** */
/* set link colors: more shades of gray                                   */
/* ********************************************************************** */

A {color: #A0AAC5; text-decoration: none; }
A:hover {color:gray; text-decoration: underline ; }

</STYLE>


    4. /* ********************************************************************** */
/* script to test for browser families                                    */
/* ********************************************************************** */

<SCRIPT src="ua.js"></SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers -->
<!--
function detectBrowser()
      {
      switch (navigator.family)
            {

            case 'ie4':
            location="indexhe5.html"
            break;

            case 'nn4':
            location="indexhe4.html"
            break;

            case 'gecko':
            location="indexhe6.html"
            break;
            }

      }

// End hiding script from old browsers
-->

</script>

</HEAD>


    5. /* ********************************************************************** */
/*  run detectBrowser as soon as page loads                               */
/* ********************************************************************** */


    6. /* ********************************************************************** */
/* reload page if resized                                                 */
/* ********************************************************************** */

<BODY onload="detectBrowser()" onResize="resizeFix()>
<TABLE align=right><TR><TD>Loading, please wait ...</TABLE>


    7. /* ********************************************************************** */
/*  script to test for Netscape Navigator 4 and correct resize bug        */
/* ********************************************************************** */

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
      <!-- Hide code from older browsers

      if (document.layers) {
            origWidth = window.innerWidth
            origHeight = window.innerHeight
      }

      function resizeFix() {
      if (document.layers) {
      if (window.innerWidth != origWidth || window.innerHeight != origHeight) {
            window.location.reload()
            }
      }
      }

// Stop hiding code -->
</SCRIPT>



    8. /* ********************************************************************** */
/*  humongous                                                             */
/* ********************************************************************** */

<div class="watermark512d" >he</div>


    9. /* ********************************************************************** */
/*  very large                                                            */
/* ********************************************************************** */

<div class="head2a" style="position:absolute; top: 10; left: 10" >
heyward</div>


    10. /* ********************************************************************** */
/*  normal                                                                */
/* ********************************************************************** */

<div class="head2a" style="position:absolute; top: 100; left: 10" >
ehrlich</div>


    11. /* ********************************************************************** */
/*  menu with positioning                                                 */
/* ********************************************************************** */

<div style="position:absolute; bottom:20; left: 20"
class="head4">
<li><a href="index818.html">
home</a><p>
<li><a href="index818.html#cc">
courses</a><p>
<li><a href="index818.html#cp">
projects</a><p>
<li><a href="index818.html#ac">
archive</a><p>
<li><a href="index818.html#wn">
what's new</a><p>
</DIV>


    12. /* ********************************************************************** */
/*  signature block with positioning                                      */
/* ********************************************************************** */

<div style="position:absolute; bottom: 20; right: 20; text-align:right"
class="head6";>

<b>dept of english <small>:</small>
rutgers univ <small>:</small>
newark nj 07102
</b>  ·<a href="mailto:ehrlich@andromeda.rutgers.edu">email</a>

</BODY>
</HTML>
    • Text the actual index.html page for yourself.