DHTML Tutorial 4: Working with the Event Model
Creating a Drag-and-Drop Shopping Cart for Games Etc.
Additional Topics
Displaying Character Codes
It's sometimes hard to keep track of all of the character codes. You can use the following utility to display the codes for each character in your window's status bar.
if (NS4DOM) document.captureEvents(Event.KEYPRESS);
document.onkeypress=showCode;
function showCode(e) {
var keynumber;
if (NS4DOM) keynumber=e.which;
else if (IEDOM) keynumber=event.keyCode;
else if (W3CDOM) keynumber=e.keyCode;
character=String.fromCharCode(keynumber);
window.status="Character = "+character+", code = "+keynumber;
}
You can test this code by pressing a keyboard key. The character and code should appear in your browser's status bar (see DHTML Tutorial 5 for a description of the properties of the browser's status bar.)
Hiding Form Elements
If you create a drag-and-drop page that contain form elements, be aware that Netscape 4 does not allow objects to hide form elements. For example, if your page contains a form button, the button will always appear on top of any dragable item, no matter what z-index value you assign to the object. This problem does not exist with Internet Explorer.
Positioning with Internet Explorer Expressions
Internet Explorer 5.0 introduced expressions which allow you to add scriptable values to your style sheets. For example, one popular task is to create an object that stays in one location in the browser window. To do this without expression requires the creation of a script that automatically moves the object in response to scrolling or resizing events in the browser window.
To do this with an expression, you can use the following style declarion:
#object {
top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight);
left: (document.body.scrollLeft + document.body.clientWidth - offsetWidth);
position: absolute
}
where object is the ID name of the object on the page. In this example, object will always be placed on the lower left corner of the browser window.
Note: since Netscape Navigator does not support expressions, the example below will not work properly with this browser.
Internet Explorer users:
To see this effect with Internet Explorer, click the Display DHTML button below, and the text, “DHTML Tutorial 4” will appear at the bottom of the window. To hide this text, click the Hide DHTML button.
