Working  with  the  Event  Model
Creating a Drag-and-Drop Shopping Cart for Games Etc.

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 (isNS) document.captureEvents(Event.KEYPRESS);
document.onkeypress=showCode;

function getKey(e) {
   if (isNS) return e.which;
   if (isIE) return event.keyCode;
}

function showCode(e) {
   code=getKey(e);
   character=String.fromCharCode(code);
   window.status="Character = "+character+", Code = "+code;
}

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 Navigator 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.

Canceling a Selection

When you drag an object on the Web page that contains text, your browser might also select the text within the object. If you want to keep this from happening, you can enter the following code:

document.onselectstart=stopSelect;
function stopSelect() {
    if (dragItem != null) {return false};
}

In this example, dragItem is the dragable object discussed in DHTML Tutorial 4. Note that this technique does not work for Netscape Navigator.

Positioning with Internet Explorer Expressions

Internet Explorer 5.0 introduces 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. Netscape Navigator does not support expressions.

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.

Netscape users:
Since Netscape Navigator does not support expressions this text will appear below the form buttons below and the function will not work.

Online Companion Home   Software   Gallery   Data Files   Documents: HTML: Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 DHTML: Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 Reference:   HTML Tags, Properties | Appendix D: JavaScript Objects, Properties, Methods, Event Handlers Appendix E:  JavaScript Operators, Elements, Keywords Appendix F:  Cascading Style Sheets