Tutorial 6 - DHTML GrabBag
The grabBag page examines DHTML techniques that don't fit in other areas. Many are fundamental to larger applications and projects. Beware: Many of the objects are browser dependent. Sometimes they don't exist in a particular browser or they may act in a different way. Heavy testing is required!
Object Explorer Tool
The object explorer tool displays all the properties in a selected object. It uses a for-in loop which works a bit differently than the usual for loop that we have been using for string scanning. Instead of incrementing a counter, for-in loops increment their way through the named object's properties.
This example displays the properties that a specific browser agent contains in its navigator object. Note that many of the properties are not available on older or other browsers. It is worth while checking for yourself by running this example with each of the browsers that you have on your comuter.
In this example the named object was navigator which identifies the browser and some of its capabilities. But you can also explore other objects such as window by replacing the word navigator with the specific object.
Object Position|Dimension
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.
w=document.documentElement.clientWidth; h=document.documentElement.clientHeight;
Warning: Depending on docType used, the DOM0 document.body… may be needed instead. This is because of the 'crappy' QUIRKS MODE concept. Even worse - different browsers use different modes on some docTypes.
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
Some dynamic positioning applications are dependent on cursor location. This is determined in different ways depending on browser. Here is a reliable getMouse() function for those who need to use cursor positioning
Example: PopUp Boxes
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's display position is determined by the cursor location. The onmouseover event is used to activate the popup but an onclick or a button can also be used. The window size adjusts to fit the text message of each menu. The popup object can be styled. View the source code for this topic to see how the html is constructed. The popup styling is contained in the pop class rules in this page's style element. View the script and search for 'popup box demo'. Hover one of the links below to see the effect.
Note: Popup boxs can also be created using an ' open window' function but BEWARE as browsers now use 'ad-buster' routines to disable window popups.
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
Good references for this topic are WebReference and w3schools.
Note: If you want the page to remember the new position, use a cookie.
Equalized 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 length.
Example: Click To Print
It is easy to print a page with map image on it. Start with the onclick event tied to the image element or a button. The event would use the window.print() method to do the actual printing of the page.
But what if you only want to print the map's image (or another single element) and not the entire page. This requires setting up a function that writes a temporary object and prints it.
Beware: innerHTML reads static values of controls in FireFox/Opera/Safari and dynamic values in IE-engined browsers.