A348/A548 Mastering the World-Wide Web (4/3 cr.)

Second Summer 2002

Lecture Notes Nineteen: Dynamic HTML, stylesheets and Javascript.

This set of notes will explore:

Cascading Style Sheets (CSS) and
Dynamic HTML (DHTML).

The purpose of the project is to expose you to a more complex aspect of HTML.

Stylesheet Fundamentals

Our goal is to approach a relatively large, real-world-based project.

Summary of actions to take:

First, we create the home page for a fictitious company, Shelley Biotechnologies, Inc.
We start by positioning elements of the page with <STYLE> and <DIV> tags.
Then we modify some HTML tags to better suit our purposes.

Here are some images we will need:

Create these images in Photoshop or whatever.

Determine where the home page will be, for example:

http://burrowww.cs.indiana.edu:10200/shelley

Then start working on the index.html:

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  position: absolute;
  top: 20px;
  left: 20px;
}

</style>

</head>
<body bgcolor="#ffffff">

</body>
</html>

This is, so far, empty, but some structure is there already.

All the styles and layers are declared inside the <STYLE> and </STYLE> tags. A layer contains any chunk of HTML. A style is a modification of an HTML tag. We're declaring a layer called companyName. The # means that the contents of the layer are spelled out somewhere else in the document. It's vital that we place all the information about the layers inside curly braces, and end each line with a semicolon.

Positioning information here says that we're going to tell the layer exactly where it should go, and that is 20 pixels over from the left edge of the browser window and 20 pixels down from the top edge of the browser window.

We determine the content of companyName inside the <body> of the page.

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  position: absolute;
  top: 20px;
  left: 20px;
}

</style>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."> 
</div> 

</body>
</html>

The <DIV> tag with an ID=name attribute contains everything that goes in a certain layer. Here we're determining the content of the layer companyName. The only thing in this layer is a single image.

Let's now add the code for the other five layers:

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo               { position: absolute; top:   9px; left: 304px; } 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 


</style>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."> 
</div>

</body>
</html>

Notice a layer's information can be on the same line as long as there are semicolons between the attributes. The content of these layers is determined inside the <BODY>, as before.

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo               { position: absolute; top:   9px; left: 304px; } 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 

</style>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0>
</div>

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="mainNavigation">
<img src="http://the.picture.url/shelley/main_nav.gif"
     width="561"
     height="42"
     alt="Main Navigation"
     border=0
     usemap="#mainnav">
</div>

<div id="resourceNavigation">
<img src="http://the.picture.url/shelley/resource_nav.gif"
     width="396"
     height="31"
     alt="Resource Navigation"
     border=0
     usemap="#resnav">
</div>

<div id="feature">
<img src="http://the.picture.url/shelley/feature.gif"
     width="571"
     height="299"
     alt="Salsa!"
     border=0
     usemap="#feature">
</div>

</body>
</html>

We just added the definitions of each of the layers. The page is now ready. Let's check it; whoops! Some of the images are overlapping others, so we're not done yet. Let's see what's happening and why. Web browsers stack layers according according to where the layer occurs in the code. Layers that occur first (such as companyName) are placed on the bottom, and layers that occur later in the code (such as logo) are displayed on top of whatever's already there.

Thus the image of the logo is above the company name, so it overlaps and it hides part of the Shelley Biotechnologies image. There are two ways to get around this:

Make the top image transparent so that the bottom image shows through. But that won't work here because the logo is a JPEG, and you can't get transparency out of a JPEG. So you have to
Change the layer stacking order using something new called the z-index.
```
#companyName
{
  z-index: 1;
  position: absolute; 
  top: 20px;
  left: 20px; 
} 
```
The z-index tells the browser which layer is on top. If you don't say which z-index a layer is, it's assumed to be on a z-index of zero, and the browser stacks the layers according to their order in the code. If it still doesn't work, keep reading. Make the change then check the code.

But there are a couple of issues:

The company name image is not transparent (may not be).
The z-index feature may not be supported by all browsers.

To avoid the second problem simply place the logo before the company name.

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0> 
</div>

An alternative solution is to explicitly set the z-index of the logo to zero.

#companyName
{
  z-index:        1; 
  position: absolute;
  top:          20px;
  left:         20px;
}

#logo  
{ 
  z-index:         0; 
  position: absolute; 
  top:           9px; 
  left:        304px; 
}

To avoid the first problem make one color transparent. (If you just want to see what's transparent and what not use a red background). Anyway, the page now is complete and looks

like this

Let's move on to the next stage.

Let's say that the Shelley Biotech Web site is huge: over 5000 pages and growing on a weekly basis. When visitors are confronted with a site as large as Shelley's, they will often try to find some information via the site's search engine rather than trying to navigate through the site. To that end, let's make their searching a little easier: When they click on Search, we can send them to a separate search page, but it would be quicker and more convenient to the visitor to pop up a small window that has a short HTML form and a Go Search button. To do this we add the following code to the (new) Shelley homepage. Copy your index.html to one.html and two.html then make the following changes to the second one:

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  z-index: 1; 
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo  
{ 
  z-index:         0; 
  position: absolute; 
  top:           9px; 
  left:        304px; 
} 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 

#companyName        { position: absolute; top:  16px; left:  29px; } 


#search 
{
  z-index: 5;
  position: absolute;
  top: 280px; 
  left: 150px;
  visibility: visible; 
}
</style>

<script language="javascript">
function showLayer(layerName) 
{
  document.layers[layerName].visibility = 'visible'; 
}

function hideLayer(layerName)
{
  document.layers[layerName].visibility = 'hidden'; 
}
</script>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0> 
</div>

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="mainNavigation">
<img src="http://the.picture.url/shelley/main_nav.gif"
     width="561"
     height="42"
     alt="Main Navigation"
     border=0
     usemap="#mainnav">
</div>

<div id="resourceNavigation">
<img src="http://the.picture.url/shelley/resource_nav.gif"
     width="396"
     height="31"
     alt="Resource Navigation"
     border=0
     usemap="#resnav">
</div>

<div id="feature">
<img src="http://the.picture.url/shelley/feature.gif"
     width="571"
     height="299"
     alt="Salsa!"
     border=0
     usemap="#feature">
</div>

<div id="search">

<p>
<h3>Search the Shelley Site</h3>
<form action="cgi-bin/search.pl" method="post">
  <table>
    <tr> <td valign=middle><input type=text size=30 name=searchString></td>
         <td valign=middle><input type=image src=search_go.gif border=0></td>
    </tr>
  </table>
</form>
<p> 
<a href="javascript:hideLayer('search')">Close this window</a>
</p>

</div>

</body>
</html>

You should test it now. One can see the search window, as well as through it.

Place the whole navigation layer inside a table with a white background.

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  z-index: 1; 
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo  
{ 
  z-index:         0; 
  position: absolute; 
  top:           9px; 
  left:        304px; 
} 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 

#companyName        { position: absolute; top:  16px; left:  29px; } 


#search 
{
  z-index: 5;
  position: absolute;
  top: 280px; 
  left: 150px;
  visibility: visible; 
}
</style>

<script language="javascript">
function showLayer(layerName) 
{
  document.layers[layerName].visibility = 'visible'; 
}

function hideLayer(layerName)
{
  document.layers[layerName].visibility = 'hidden'; 
}
</script>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0> 
</div>

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="mainNavigation">
<img src="http://the.picture.url/shelley/main_nav.gif"
     width="561"
     height="42"
     alt="Main Navigation"
     border=0
     usemap="#mainnav">
</div>

<div id="resourceNavigation">
<img src="http://the.picture.url/shelley/resource_nav.gif"
     width="396"
     height="31"
     alt="Resource Navigation"
     border=0
     usemap="#resnav">
</div>

<div id="feature">
<img src="http://the.picture.url/shelley/feature.gif"
     width="571"
     height="299"
     alt="Salsa!"
     border=0
     usemap="#feature">
</div>
       
<div id="search">
<p>
<table bgcolor=white border><tr><td>
<h3 align=center>Search the Shelley Site</h3>
<form action="cgi-bin/search.pl" method="post">
  <table>
    <tr> <td valign=middle><input type=text size=30 name=searchString></td>
         <td valign=middle><input type=image src=search_go.gif border=0></td>
    </tr>
  </table>
</form>
<p align=center> 
<a href="javascript:hideLayer('search')">Close this window</a>
</p>
</td></tr></table></div>

</html>

Now that we see the window properly and have a way to send it away let's make it invisible to start with and have the search picture generate pop it up. So we make the following changes, illustrated below in blue:

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  z-index: 1; 
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo  
{ 
  z-index:         0; 
  position: absolute; 
  top:           9px; 
  left:        304px; 
} 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 

#companyName        { position: absolute; top:  16px; left:  29px; } 


#search 
{
  z-index: 5;
  position: absolute;
  top: 280px; 
  left: 150px;
  visibility: hidden; 
}
</style>

<script language="javascript">
function showLayer(layerName) 
{
  document.layers[layerName].visibility = 'visible'; 
}

function hideLayer(layerName)
{
  document.layers[layerName].visibility = 'hidden'; 
}
</script>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0> 
</div>

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="mainNavigation">
<img src="http://the.picture.url/shelley/main_nav.gif"
     width="561"
     height="42"
     alt="Main Navigation"
     border=0
     usemap="#mainnav">
</div>

<div id="resourceNavigation">
<img src="http://the.picture.url/shelley/resource_nav.gif"
     width="396"
     height="31"
     alt="Resource Navigation"
     border=0
     usemap="#resnav">
     <map name="resnav">
       <area shape  = "rect" 
             coords = "0,0,100,31" 
             href   = "javascript:showLayer('search')"
       >
     </map>
</div>

<div id="feature">
<img src="http://the.picture.url/shelley/feature.gif"
     width="571"
     height="299"
     alt="Salsa!"
     border=0
     usemap="#feature">
</div>

<div id="search">
<p>
<table bgcolor=white border><tr><td>
<h3 align=center>Search the Shelley Site</h3>
<form action="cgi-bin/search.pl" method="post">
  <table>
    <tr> <td valign=middle><input type=text size=30 name=searchString></td>
         <td valign=middle><input type=image src=search_go.gif border=0></td>
    </tr>
  </table>
</form>
<p align=center> 
<a href="javascript:hideLayer('search')">Close this window</a>
</p>
</td></tr></table></div>
</html>

Let's add a few more layers now.

<html>
<head>
<title>Welcome to Shelley Biotechnologies, Inc.</title>

<style type="text/css">

#companyName
{
  z-index: 1; 
  position: absolute;
  top: 20px;
  left: 20px;
}

#logo  
{ 
  z-index:         0; 
  position: absolute; 
  top:           9px; 
  left:        304px; 
} 

#mainNavigation     { position: absolute; top: 138px; left:  25px; } 

#resourceNavigation { position: absolute; top: 173px; left: 173px; } 

#feature            { position: absolute; top: 194px; left:  19px; } 

#companyName        { position: absolute; top:  16px; left:  29px; } 


#search 
{
  z-index: 5;
  position: absolute;
  top: 280px; 
  left: 150px;
  visibility: hidden; 
}

#productsNav 
{ 
  z-index: 5; 
  position: absolute;
  top: 180px; 
  left: 25px;
  visibility: hidden;  
}

#trainingNav 
{ 
  z-index: 5; 
  position: absolute;
  top:  180px; 
  left: 150px;
  visibility: hidden;  
} 

</style>

<script language="javascript">

function showLayer(layerName) 
{
  document.layers[layerName].visibility = 'visible'; 
}

function hideLayer(layerName)
{
  document.layers[layerName].visibility = 'hidden'; 
}
</script>

</head>
<body bgcolor="#ffffff">

<div id="companyName">
<img src="http://the.picture.url/shelley/company_name.gif" 
     height="128"
     width="428"
     alt="Shelley Biotechnologies, Inc."
     border=0> 
</div>

<div id="logo">
<img src="http://the.picture.url/shelley/logo.jpg"
     width="275"
     height="117"
     alt="Shelley Logo"
     border=0>
</div>

<div id="mainNavigation">
<img src="http://the.picture.url/shelley/main_nav.gif"
     width="561"
     height="42"
     alt="Main Navigation"
     border=0
     usemap="#mainnav">

     <map name="mainnav">
       <area shape="rect" coords="0,0,60,42" href="javascript:showLayer('productsNav')">
       <area shape="rect" coords="120,0,200,42" href="javascript:showLayer('trainingNav')">
     </map>
</div>

<div id="resourceNavigation">
<img src="http://the.picture.url/shelley/resource_nav.gif"
     width="396"
     height="31"
     alt="Resource Navigation"
     border=0
     usemap="#resnav">

     <map name="resnav">
       <area shape="rect" coords="0,0,100,31" href="javascript:showLayer('search')">
     </map>
</div>

<div id="feature">
<img src="http://the.picture.url/shelley/feature.gif"
     width="571"
     height="299"
     alt="Salsa!"
     border=0
     usemap="#feature">
</div>

<div id="search">
       <p>
       <table bgcolor=white border><tr><td>
       <h3 align=center>Search the Shelley Site</h3>
       <form action="cgi-bin/search.pl" method="post">
         <table>
           <tr> <td valign=middle><input type=text size=30 name=searchString></td>
                <td valign=middle><input type=image src=search_go.gif border=0></td>
           </tr>
         </table>
       </form>
       <p align=center> 
       <a href="javascript:hideLayer('search')">Close this window</a>
       </p>
       </td></tr></table></div>

<div id="productsNav">
<table bgcolor="#ffffff" border cellpadding=4><tr><td>
  <h3 align=center> Products </h3> 
  <a href="products/portable">Portable BioLab</a><br>
  <a href="products/accessories">Portable Biolab Accessories</a><br>
  <a href="products/education">Educational Products</a><br>
  <a href="products/corporate">Corporate BioLabs</a><br>
  <a href="products/enterprise">Enterprise BioLabs</a><br>
  <p><a href="store/">How to order</a></p> 
  <p><a href="javascript:hideLayer('productsNav')">Close this window</a></p>
</td></tr></table>
</div>

<div id="trainingNav">
<table bgcolor="#ffffff" border cellpadding=4><tr><td>
  <h3 align=center> Training </h3> 
  <a href="training/begin">Genetic Engineering for Beginners</a><br>
  <a href="training/intermediate">Intermediate Genetic Engineering</a><br>
  <a href="training/advanced">Advanced Genetic Engineering</a><br>
  <a href="training/prof">Professor Track Biogenesis</a><br>
  <a href="training/rdna">rDNA Refresher Courses</a><br>
  <p><a href="training/schedule">Build your training schedule</a></p> 
  <p><a href="javascript:hideLayer('trainingNav')">Close this window</a></p>
</td></tr></table>
</div>

</html>

But we're not done yet. (We make the interface a bit easier to use.)

We now change the showLayer method to keep only up to one window open at all times:

<script language="javascript">
oldLayer = ""; 
function showLayer(layerName) 
{
  if (oldLayer) {
    document.layers[oldLayer].visibility = 'hidden';     
  }
  document.layers[layerName].visibility = 'visible'; 
  oldLayer = layerName; 
}

function hideLayer(layerName)
{
  document.layers[layerName].visibility = 'hidden'; 
}
</script>

And the result is

here.

But this does not work with Internet Explorer.

What do we do?
What is the problem?

Netscape and Internet Explorer version 4 browsers implement DHTML differently: They need different JavaScript syntax to do the same thing. This is annoying but unavoidable. We have to code the Shelley homepage so that both browsers can see and understand the DHTML.

Here's a browser difference that you'll be seing the most.

In Netscape:

document.layers['search'].visibility = 'visible';

In Internet Explorer:

document.all['search'].style.visibility = 'visible';

These two statements are close, but not close enough to work in the other's browser. Fortunately, you don't have to code two totally separate functions for each browser. There's an easier way, although it makes your code more difficult to read.

First, here is the Internet Explorer version of the page.

It does not work with Netscape!

The eval() method in JavaScript is the best way to code DHTML for both Netscape and IE browsers at the same time. It does this by letting you dynamically generate your own JavaScript. Is this necessary? It could be, if the code needs to be compiled before it is loaded in the page. It really isn't, given the way JavaScript works: the code is interpreted, that is, compiled right before executed. Therefore, we won't ever have to worry about an IE line of code being looked at by Netscape, if we take the appropriate steps. Here's the code:

<script language="javascript">

layerRef = ""; 
styleRef = "";

if (navigator.appName == "Netscape") 
{
  layerRef = ".layers";   
  styleRef = ""; // redundant 
} 
else // must be MSIE
{
  layerRef = ".all"; 
  styleRef = ".style"; 
}

oldLayer = ""; 
function showLayer(layerName) 
{
  if (oldLayer) {
    // document.layers[oldLayer].visibility = 'hidden'; 
    eval( 
       "document" + 
               layerRef + 
                     "['" + 
                       oldLayer + 
                            "']" + 
                                styleRef  + 
                                ".visibility = " + 
                                             "'hidden';"
        ); 
    // also accounting for the MSIE syntax below:
    // document.all[oldLayer].style.visibility = 'hidden'; 
  }
  // document.layers[layerName].visibility = 'visible'; 
  eval( "document" + layerRef + "['" + layerName + 
        "']" + styleRef  + ".visibility = 'visible';"
      ); 
  oldLayer = layerName; 
}

function hideLayer(layerName)
{
  // document.layers[layerName].visibility = 'hidden'; 
  eval( "document" + layerRef + "['" + layerName + 
        "']" + styleRef  + ".visibility = 'hidden';"
      ); 
}
</script>

Here's the document that works with both browsers.

You are now ready to check Lecture Notes Twenty for help with Homework Four.

Last updated: Jul 17, 2002 by Adrian German for A348/A548