I. Dynamic HTML
a. General
i. Allow the elements and contents of a web page to be dynamically changed after the page has been loaded
ii. Using DHTML we can change the appearance or content of a page without going back to server
iii. Support for DHTML is VERY, VERY different!
1. To utilize in “real-world” we have two choices
2. Keep page very simple so it is cross-browser compatible
3. Plan on writing at least four versions of each page
a. Internet Explorer
b. Netscape Navigator 4.x
c. Netscape Navigator 6.x
d. Everything else
b. DHML is typically considered a combination of CSS, DOM, and JavaScript
i. CSS – Cascading Style Sheets – used to format a document
ii. DOM – Document Object Model
iii. JavaScript
II.
Positioning elements
a. Absolute positioning – position is set in relation to
browser window itself
b. Relative positioning – position is set in relation to
container holding object
c. Placement defined with X,Y coordinates
i.
Top left corner is 0,0 pixels
or 0%,0%
ii.
Bottom right corner is
640,480 (for example) or 100%,100%
iii.
CSS uses properties “top” and
“left” to set position of top left corner of object
d. Create a positioning example
i.
Place an image in the page
(50x50 pixels) with the id=”target”
ii.
When mouse moves over “target”
– move it to another position
iii.
OnMouseOver calls the moveMe()
function
1. MoveMe() needs two random numbers from 1 to 250– so create
randGen()
a. Math.floor rounds a real number down to an integer
b. Math.random generates a random number from 0 to almost 1
2. MoveMe() uses random numbers to reposition graphic
a. Need to include a style tag setting position as absolute
(so it can be moved later)
b. Set p.instructions class at top=350 so out of range of
target
iv. Test and debug as necessary
III. Working with styles
a. Look at example (readability.html)
i. Notice that every element has an ID attached – inefficient for a long page
ii. Uses the button click to activate the example
1. First step of function is to see which fonts in use (small or big)
2. Second step is to change size and color of h1, h2, and p
3. Third step is to change value of “myText” (which keeps track of which size is in use)
4. Fourth step is to change some text
a. innerText identifies the text between a start and end tag
(ignores HTML)
b. innerHTML identifies the text and mark-up between start and
end tag
c. outerText identifies text AND the outer tags
d. outerHTML identifies taxt and mark-up, including the surrounding tags
5. Last step s to change caption of button
b. Look at second example (styles.html)
i. Uses style sheets to format entire document
ii. Starts with “style1.css” loaded, but changes to “style2.css” when button pushed
iii. changeMyStyle() function uses DOM properties
1. document.documentElement refers to the <HTML> element
2. node.firstChild refers to the first tag inside the current tag
3. node.nextSibling refers to the next tag inside the parent tag
4. node.attributes creates an array of attribute names and values
a. first element in array
i. name = rel
ii. value = stylesheet
b. second element in array
i. name = href
ii. value = style1.css