JavaScript and Dynamic HTML: Create Interactive Web Pages

Chapter 6

Dynamic Documents with JavaScript

Introduction

• A dynamic HTML document is one whose tag attributes, tag contents, or element style properties can be changed after the document has been and is still being displayed by the browser.
• Dynamic, interactive, animated.
• Many previous w3schools.com examples were dynamic, changing the content of elements, CSS style properties, etc.
• Changes to documents can occur when they are requested by user interactions, at regular timed intervals, or when browser events occur.

Positioning Elements

• CSS-P released by W3C in 1997.
• Completely supported by IE9, FX3, and Chrome.
• The position of any element is dictated by the three style properties:
• Position: (possible values are absolute, relative, and static)
• Left
• Top
• Absolute Positioning: The element is placed at a specific location in the document display without regard to the positions of other elements.
• If an element is nested inside another (positioned) element and is absolutely positioned, the top and left properties are relative to the enclosing element.

• A common use is for watermarks.

• absPos.html
• absPos2.html
• p. 241

Relative Positioning

• If no top and left properties are specified, and an element has position relative, the element is placed exactly where it would have been placed if no position property was given, BUT you are able to move it later!
• If top and left properties are given, they are offsets from where it would have been placed without the position property being specified.

• relPos.html
• p. 245

Static Positioning

• The default.
• As if position is set to relative and no values for top or left (but not able to move later).

Moving Elements

• Remember the position property must be set to absolute or relative in order for the element to be moved.
• Changing the top or left property value causes the element to be moved.

• mover.html
• mover.js
• p. 247

• // mover.js – the event handler function to move an element
• // Illustrates moving an element within a document
• function moveIt(movee, newTop, newLeft) {
• dom = document.getElementById(movee).style;
• // Change the top and left properties to perform the move
• // Note the addition of units to the input values
• dom.top = newTop + “px”;
• dom.left = newLeft + “px”;
• }

Element Visibility

Visibility Property: set to either visible or hidden

• showHide.html
• showHide.js
• p. 249-250

• // showHide.js- event handler function to toggle visibility
• // Illustrates visibility control of elements
• function flipImag() {
• dom = document.getElementById(“saturn”).style;
• // Flip the visibility adjective to whatever it is not now
• if (dom.visibility == “visible”)
• dom.visibility = “hidden”;
• else
• dom.visibility = “visible”;
• }

• dynColors.html
• dynColors.js
• dynColorsV2.html
• dynColorsV2.js

Changing Colors

• function setColor(where, newColor) {
• if (where == “background”)
• document.body.style.backgroundColor = newColor;
• else
• document.body.style.color = newColor;
• }

• Colors
• Background color: controlled by the background property
• Foreground color: controlled by the color property
• In dynColors.html the parameter this.value
• works because at the time of the call, ‘this’
• is a reference to the text box
• In dynColorsV2 an ID attributed added
• JavaScript property names:
• For CSS attribute names without hyphens – same JavaScript property names
• For CSS attribute names with hyphens (e.g. font-size) delete hyphen, capitalize the next letter (e.g. fontSize)

newColor = document.getElementById(“background”).value

Changing Fonts

dynFont.html

Fonts

• The state of
• onmouseover = “this.style.color = ‘red’;
• this.style.fontStyle = ‘italic’;
• this.style.fontSize = ‘2em’;”;
• onmouseout = “this.style.color = ‘blue’;
• this.style.fontStyle = ‘normal’;
• this.style.fontSize = ‘1.1em’;”;>
• Washington
• produces many of our nation’s apples.

Dynamic Content

The content of an HTML element is addressed with the value property of its associated JavaScript object, so changing content is very similar to changing CSS attribute values.

• dynValue.html
• dynValue.js
• p. 255-256

Stacking Elements

• Although multiple elements can occupy the same space, one is considered to be on top.
• The z-index attribute determines which element is in front and which are covered by the front element.
• The element with the highest z-index is displayed over other elements.
• The z-index can be changed dynamically by changing zIndex.
• Image and anchor elements can have an onclick attribute so that clicking the image triggers an event handler.

• stacking.html
• stacking.js
• p. 258-259

Locating the Mouse Cursor

• The coordinates of the element that caused an event are available in the clientX and clientY properties of the event object.
• clientX/clientY are relative to the upper left corner of the browser display window (more useful than screen and screenY).
• screenX and screenY are relative to the upper left corner of the whole client screen.
• Use the click event to locate the mouse cursor when the button is clicked.

• Uses the onclick attribute of the body element.

• where.html
• where.hs
• p. 261-262

Note: with IE and Chrome, mouse clicks are ignored if below the last element in the display.

Reacting to a Mouse Click

• A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display.
• Use event handlers for onmousedown and onmouseup.

• anywhere.html
• anywhere.js
• p. 264-265

Slow Movement of Elements

• To animate an element, it must be moved by small amounts, many times, in rapid succession.
• JavaScript has two Window methods to do this: setTimeout and setInterval.
• setTimeout takes two parameters: a string of JavaScript code to be executed, and the number of milliseconds to delay e.g. setTimeout(“mover()”, 20);
• moveText example code moves a text element from position (100,100) to position (300,300), using 1 millisecond as a delay.
• Use the onload attribute of the body element to initialize the position of the element.
• The move function will change the top and left attributes by one pixel each time.

• moveText.html
• moveTest.js
• p. 266-268

Dragging and Dropping Elements

• To grab, drag and drop use mousedown, mousemove, and mouseup events.
• For the magnetic poetry example DOM 2 is used (the Event object and its property, currentTarget).
• DOM 0 used to call the mousedown event handler (grabber).
• Drag and drop requires 3 processes:
• Get the dom of the element to be moved when the mouse is pressed down (onmousedown) with the currentTarget property of the event object.
• Move the element by changing its top and left properties as the mouse cursor is moved (onmousemove).
• Compute the distance of the move as the difference between the current position (left and top) and the mouse click position (clientX and clientY).
• Dropping the element when the mouse is released by undefining the dom used for the move.

• dragNDrop.html
• dragNDrop.js
• p. 269-272