DHTML

1
DHTML ALPHABET SOUP

• Sp.772 spring 2002

2
A combination

• Html 4.0
• Javascript
• The document object model (DOM) -- accessing
  individual document objects
• Cascading style sheets -- separation of form and
  content
• Netscape 6, IE 5.5/6

3
DOM

• Document.images accesses all the images in a
  document (weve seen it in billboard type
  image-displays)
• Suppose we want to access headings, paragraphs,
  and individual words
• ltp idsimplegtsimple paragraphlt/pgt
• In javascript var para document.getElementByID(
  simple)

4
getElementsby

• Var headings document.getElementsByTagName(h1)
  
• Var secondheading headings2

5
CSS

• The element of style
• Para.style.color 00FF00
• Changes the paragraph to green
• Other properties style.font-size
  style.font-family style.background-color,
  style.background-image

6
Rollover link color changes

• ltstylegt
• a text-decoration none color 0000FF
• lt/stylegt
• ltscript languagejavascriptgt
• Function turnOn(currentLink)
• CurrentLink.style.color 990000
• CurrentLink.style.textDecoration underline

7
Continued

• Function turnOff(currentlink)
• currentLink.style.color 0000FF
• currentLink.style.textDecoration none
• lt/scriptgt
• ltheadgt lta hrefhome.html
• onMouseOverturnOn(this) onMouseOut
  turnOff(this)gt home lt/agt

8
..explained

• When the users mouse goes over a link the event
  handler passes it to turnOn, modifying the style
  of the current link
• Note that values for style elements are specified
  as strings (e.g. underline)

9
A dynamic CSS toolbar..hang on!

• Highlights cells of a table
• Html for a cell
• lttd class toolbar id news width - 120gt
  lta href onMouseOverlinkOn(this, news)
• onMouseOut linkOff(this, news)gt
• News! lt/agt lt/tdgt

10
linkOn

• Function linkOn(currentLink, cell)
• currentLink.style.color 990000
• currentLink.style.fontWeight bold
• currentLink.style.textDecoration underline
• Var CurrentCell document.getElementById(cell)
• currentCell.style.backgroundColorCCCCCC

11
linkOff

• Function linkOn(currentLink, cell)
• currentLink.style.color FFFFFF
• currentLink.style.fontWeight normal
• currentLink.style.textDecoration none
• Var CurrentCell document.getElementById(cell)
• currentCell.style.backgroundColor666666

12
The header

• ltstyle typetext/cssgt
• a font-family Arial, Helvetica, sans-serif
  font-size 12px color FFFFFF text-decoration
  none
• . toolbar background-color 666666
• lt/stylegt

13
style classes

• ltstyle typetext/cssgt
• .welcome font-family.
• lt/stylegt
• .
• ltp classwelcomegtWelcome to Bills World!lt/pgt

14
Layers

• A positionable container (like photoshop)
• x,y,z dimensions
• z dimension points out at the user
• ltdiv idMyLayer style position.absolutez-ind
  ex1 left100pxtop10px width300pxheight30px
  background-color FFCC00gt

15
div attributes

• position can be absolute or relative (to any
  containing elemnt)
• left distance from left edge of
  document/containing element (eg 100px)
• top distance from top..(in pixels, too)
• z-index stacking order of display if layers are
  overlapping. higher numbers win. elements without
  a z-index lose

16
Tabbed Folders (a la Hotmail)

• visibilityvisible
• visibilityhidden
• have some function keep track of the current tab
  and the moused-over newtab, change their
  visibilities appropriately

17
Browser Detection

• if (document.getElementById)
• isDOM true
• else if(parseInt(navigator.appVersion) gt 4)
• if(navigator.appName Netscape)
• isNN4 true
• else if (navigator.appNameMicrosoft Internet
  Explorer)
• isIE4 true

18
Drop Down Menu Example

• lttd width100gt
• ltdiv id linksLayer stylepositionabsolutele
  ft211px.visibilityhiddenz-index2gt
• lta hrefgtDHTMLlt/agtltbrgt
• lta hrefgtCSSlt/agtltbrgt
• lt/divgt
• lta href onClickshowLayer(linksLayer)
  onDblClickhideLayer(linksLayer)gtLinkslt/agt
  lt/tdgt

19
show/hideLayer

• function showLayer(layerid)
• var layerdocument.getElementByID(layerid)
• layer.style.visibility visible
• function hideLayer(layerid)
• var layerdocument.getElementByID(layerid)
• layer.style.visibility hidden

20
more info

• w3c.org/style
• w3c.org/dom

21
Exercise

• drop linkys
• WEDNESDAY SHIGERU MIYAGAWA
• GUEST LECTURES!!!!!!!!!!! WILL BE FUN.
• UROP OPPRTUNITIES ABOUND!
• REMINDER
• May 15th FINAL PROJECTS DUE
• AT LEAST ONE MEMBER FROM EACHGROUP MUST GO TO
  PRESENT THAT NIGHT. 730pm