Tutorial 6 - DOM Techniques
The W3 Consortium document object model (DOM) extends script access to virtually every HTML element using objects as the modeling paradigm. Scripting languages can dynamically modify the look of a page as they react to events. w3schools.com has a tutorial on the DOM model.
Element Access With DOM
The procedure for setting up access to an element is:
- Establish appropriate property values for the element's class [CSS]
- Identify the element with a unique id attribute [HTML]
- Set a class group attribute for the element [HTML]
- Create an activating event that passes the identifier [HTML]
- Capture the element's object with the DOM document.getElementById('idname') method [script]
- Work with the element's style, visibility, content or position [script]
Object Explorer Tool
The object explorer tool displays all properties in a selected object using a for-in loop. For-in loops increment their way through the named object's properties. The object to be displayed is passed as name (as a string) and object parameters.
This example displays the properties that the current browser agent contains in its navigator object. You can also explore other objects such as window by altering the passed parameters. Note that many of the properties are not available on other browsers. Check by running this example with each of the browsers that are on your computer.
You may need to find the absolute position or dimensions of an object on a page regardless of font-sizing, zooming or window resizing. One application is positioning a floating menu in a sidebar where it does not float upwards into any static information in the sidebar.
Viewport Window Size
Many applications require knowing the current viewport window dimensions (possibly resized). DOM provides document.documentElement.clientWidth and document.documentElement.clientHeight properties.
There are times when you will want to prevent an object from scrolling out of the viewport. By checking its position against zero you can spot top|left edge loss and by checking its position against the viewport size you can spot bottom|right edge loss. marginTop and marginLeft can be adjusted to put the element back in bounds.
Cursor Location | PopUps
Some dynamic positioning applications are dependent on cursor location.
Popup boxes allow the display of annotations, attributions, citations, definitions, tooltips or other small notes while retaining the original page's context (unlike tabbed windows). This example uses the cursor location to determine the display position. The onmouseover event is used to activate the popup but onclick or button can also be used. The popLayer() function adjusts window size to fit the text message of each menu. Hover one of the links below to see the effect. Popups can also be animated. Popup source code is shown on this page's script element. Popup styling is shown in the pop class rules on this page's style element.
Equal Column Heights
The common practice for parallel columns is to use either float or absolute positioning within a div structure. However the columns can be of unequal height which is unattractive when they are colored differently.
By default the height property is content dependent. Setting it to a specific size would not respect resizing and font changes. Unfortunately w3.org chose to interpret height:100% to be relative to the window and not to the document! Using the dimensioning routines from above you can guarantee columns are equal in height.
Example: Drag and Drop
Adding drag and drop capabilities to any page element allows it to be repositioned by the user. To make this happen:
- Know where the mouse cursor is! The cursor location routine can be used
- Make the element react to an onclick event
- Adjust the element's position
A good reference for this topic is WebReference.
Note: If you want the page to remember the new position, use a cookie.
The URL of the current page can be read using the location.href property. This example allows the same document on different servers to show a different title block image or logo. To make the function work, include onload="site()" in the body element of appropriate documents or add the contents of site() to an existing initialization function.
Setting the location.href property forces a hyperlink jump. The reference can be local or to a new document and can be dynamically set in script. Jumps can be initiated by events (eg. onmouseover), by using the system's date object or by using a timer.
This example watches how long the page has been displayed and transfers to another page when timed out. The application is perfect for a static splash screen or a front 'intro' page. Be sure to use the onLoad event to initialize the timer function. The setTimeout() function transfers control to the function pointed at by its first parameter [page2] after a delay set by the second parameter [limit] (in millisecs).