GEHC JavaScript
Class 7
DHTML and CSS

CSS - Cascading Style Sheets
----------------------------

Web pages have two parts - the content, and the presentation. The point of CSS
is to separate the presentation and the content. It does this by creating a
new way to set the presentation that may vary from one computer, or browser, or
operating system, to another - but no matter what, the content is always there.

With DHTML, or Dynamic HTML, we can leverage JavaScript and CSS to make some
truly interesting effects.

CSS is extensive, and well documented, and standardized. The first crack at
CSS is usually something simple. CSS, like scripts, can be embedded directly
into a web page:

<style type="text/css">
<!--                                Add HTML comments at top and bottom
/* CSS comments are in block style only */
b {
  color: red;
}
-->
</style>

Here, we are replacing something about the "b" tag - whenever the browser
encounters the b tag, it should apply the color we have specified.

** JS 7-1 - shows the b tag in use with the CSS code shown above.

We can extend the usefulness of the style sheet by having classes of a tag.
We then marry up the classes in the CSS definition with classes in the HTML
code.

b.red {
  color: red;
}
b.blue {
  color: blue;
}

Now, because we have declared a class of bold tags, the bold tag itself is left
untouched unless the class is provided:

<b>Bold text</b>
<b class=red>Red bold text</b>

You can also override what makes the tag unique, which is an interesting effect,
but might have limited usefulness, depending upon the situation:

b.notbold {
  font-weight: normal;
}

<b class=notbold>This text looks normal</b>

** JS 7-2 - shows several different classes, including one which overrides the
            font weight

We can also create arbitrary classes, and use them with the span, div, or
other tags.

.big {
  font-size: 72pt;
}

Here we have created a new class to use. By prepending the ".", however, it is
not tied in directly with any pre-defined tag. So to use this class, we have to
use the class parameter of another tag. Usually we'll use the span or div tags.

<span class=big>Big text</span>
<div class=big>Big text, too</div>

Can also use the class with other tags:

<b class=big>Big, bold text</b>

** JS 7-3 - just illustrates all of the above, using the div, span, and b tags
            to access the big class.

We can also put styles inside a tag by using the "style" parameter of a tag.
Almost every HTML tag can have a style provided:

<p style="text-align: center">This paragraph is centered.</p>
<p>This is <span style="color: green">green text</span>.</p>

** JS 7-3a - shows several examples of the use of the style parameter.

There are other interesting style markers that we can use - the important thing
to remember is that CSS is unforgiving - spelling and symbols count.

font-family: list
  Lists the fonts to use, in order of preference. Fonts with spaces in the
  name must be enclosed in quotes.
  font-family: Arial, "Comic Sans MT", Verdana;

font-style: normal, italic, oblique

font-variant: normal, small-caps

font-weight: normal, bold, bolder, lighter

font-size: 30pt  12px  1in  4mm  120%
  pt: points
  px: pixels
  in: inches
  mm: millimeters
  %:  percentage of normal

text-decoration: none, underline, overline, line-through

text-align: left, right, center, justify

text-indent: amount
  Something HTML writers have wanted for a long time. Use pt, in, etc.

color: red, blue, green, etc; #RRGGBB

background-color: (color)

width: (size)
  How wide to make the paragraph or column of data

** JS 7-4 - shows how to set the width and indent, as well as font info

** JS 7-4a - combines several of the above attributes. Note that not all
             CSS attributes are covered by all browsers - overline decoration,
             for example, is not supported in NN 4.79.

** Burlington Rotary Club site - uses minimal CSS to achieve the feel of a real
   paper newsletter.

Note that the Rotary site uses a link to a CSS file:

<link href="rotascope.css" rel="stylesheet" type="text/css">

This tag tells the browser that it needs to read a CSS file - the type and rel
parameters tell it that. The href parameter tells it where to read from.

** rotascope.css - file full of CSS commands and settings.

Note that you can even play with the body of the page, including having a lot
of control over the background image. The interesting thing about this page,
is that no matter which broswer you look at, the page should look the same.
This is because we set the font, the font size, etc., regardless of how the
user's browser is set. Most browsers, however, do allow a setting to override
any CSS-set attributes.

** USConstitution.net and usc.css - very simple implementation of CSS, using a
few arbitrary classes (footer, small, etc), but also leveraging a so-called
pseudo-class that allows you to change attributes of links:

a:hover - when the mouse is over the link
a:active - when the link is active (tabbing)

others:

a:link - a standard link
a:visited - a visited link

These are supported by MSIE 4+ and NN 6+.

MSIE started to implement CSS and DHTML very early on, with relatively good
support in its version 4 browser. Netscape's implementation did not allow
intuitive use of JavaScript to dynamically change the content of the page.

CSS and JavaScript: DHTML
-------------------------

In MSIE, any piece of the page can be tagged with the span or div tags. Those
tags can assign unique ID's to portions of code, and once a bit of code is so
tagged, it can be changed on the fly with JS.

To do this, use the "document.all" object. The all object holds a property for
every uniquely identified object on the page.

<span id=over>this is some code</span>

The code inside the span tag has an id, that is (should be) unique on the whole
page. Now, every object has a style, built in. And with JS we can change that
style:

document.all.over.style.backgroundColor = yellow;

  is equivalent to:

over {
  background-color: yellow;
}

** JS 7-5 - shows how to use an id tag to identify some code, then how to use
            JS to change the style of that id'ed code.

This code is safe only in MSIE. Only newer versions of NN and Firefox support
the code. The reason is that NN used to have no document.all object. Up until
recently, this was the only way that DHTML was really done. However, standards
bodies have encoded how DHTML should be implemented, and with the release of
NN6, we can now write code that will work in IE5+ and NN6+ ... we still have to
worry about older browsers, but as time goes on, the worry will be less and
less.

document.getElementById("over").style.backgroundColor = yellow;

** JS 7-5a - same as 7-5, but uses getElementById - more code, less intuitive,
but works in more browsers than "all"

At the same time we can access the styles, we can also apply events to any
tag. Up to now, we've seen the onMouseOver event on an a href tag, because
from the beginning, a href tags were designed to have something happen when the
user moused over. MSIE4+ and NN6+ allow you to apply those events to any
object.

<span id=abc onMouseOver="...">this is the text</span>

Of course, you can also add onMouseOut and even onClick, if you so-desire.

** JS 7-6 - demonstrates the onMouseOver for the span - uses getElementById

We can avoid using the getElementById method from time to time, if we can pass
a function the keyword of "this". This refers to the object that the code is
in:

<span id=abc onMouseOver="do_something(this);">text</span>

function do_something(theobject)
{
  theobject.style.backgroundColor = "yellow";
}

In this case, the code works with both MSIE4+ and NN6+, because we are not
using the document.all or the document.getElementById ... we are referring to
the exact object itself. This code could actually work for many different
unique spans.

** JS 7-7 - shows how to use the this keyword in the HTML and how to receive
            that in the JS

Note that I said the "setting" code works with all browsers, and it does. In
this example, I could no longer use a flag to track the background color, so I
tried to use an examination of the color itself. The problem I had came in with
the comparison code. When I did

  if (thespan.style.backgroundColor == "yellow")

it did not work.

MSIE6: yellow (also works if compared to #ffff00)
Opera6: #ffff00
NN6: rgb(255,255,0)
NN8/Firefox: rgb(255, 255, 0)

** JS 7-8 - another example, handles not just onMouseOver, but also onMouseOut

This example is much more intuitive for the user, as the color changes on the
mouse over and back again on the mouse out, whereas the others toggled only on
mouse over. Again, the same code is used for both spans, and for both the over
and the out. Again we use "this," but we do something slightly different.

Rather than using a flag as before, we now examine the contents of the style
before changing it.

** JS 7-9 - another try at the background change, this time using just the
            onMouseOver and onMouseOut.

** JS 7-10 - one last version, this time using classes and changing the
             class assigned to an element. This is MSIE and newer NN/Firefox
             only.

Finally...

** JS 7-11 - making text disappear. Need to use the broswer detector.

** JS 7-11a - one last crack at it - this time, instead of a variable to track
              the status, we read the current status

In NN4, the standard DOM was not available, but we could use something called
"layers". So this code works with all versions of DHTML-capable MSIE and NN.
Could not get it to work with Opera. In NN4, the text disappears but the
paragraph does not reflow as it does in MSIE. It does reflow in NN6.

** JS 7-12 - fun with DHTML

In NN4, the mouseOver is not fired, so when the user clicks, the button moves.
In MSIE and NN6, the button moves onMouseOver. No effect in Opera again.