A Peek at DOM2 in the Builds

Eric Krock
Senior Product Manager
Netscape Communicator

It Doesn't Stop at DOM1 ...

... but first take the pledge! Remember:

DOM2's Greatest Hits

Drag 'n' Drop: HTML Markup

<div id="myElement" 
onmousedown="beginDrag(event);" 
style="position: absolute; 
left: 150px; top: 150px; 
width: 100px; 
background-color: blue;"> 
Test one two three 
</div> 

Drag 'n' Drop: JavaScript

function beginDrag(e) { 
  dump("drag start\n"); 
  window.lastX=e.clientX; 
  window.lastY=e.clientY; 
  window.onmousemove=doDrag; 
  window.onmouseup=endDrag; 
} 

function endDrag(e) { 
  dump("drag end\n"); 
  window.onmousemove=null; 
}

Drag 'n' Drop: JavaScript

function doDrag(e) { 
  dump("dragging\n"); 
  var difX = e.clientX-window.lastX; 
  var difY = e.clientY-window.lastY; 
  var newX = parseInt(document.getElementById
     ("myElement").style.left)+difX+"px"; 
  var newY = parseInt(document.getElementById
     ("myElement").style.top)+difY+"px"; 
  document.getElementById
     ("myElement").style.left=newX; 
  document.getElementById
     ("myElement").style.top=newY; 
  window.lastX = e.clientX; 
  window.lastY = e.clientY; 
  dump("dragging comp\n"); 
} 

DOM2 CSS Interface

function hlt(event) {
  this.style.backgroundColor = 
     "rgb(255, 255, 204)";
  this.style.textDecoration = 
     "underline";
}

function dlt(event) {
  this.style.backgroundColor = 
     "transparent";
  this.style.textDecoration = 
     "none";
}

DOM2 CSS Interface

function depress() {
  this.style.position="relative";
  this.style.left="3px;"
  this.style.top="3px;"
  this.style.color="#660000";
}

function undepress() {
  this.style.position="relative";
  this.style.left="0px;"
  this.style.top="0px;"
  this.style.color="#000099";
}

URLs

Newsgroups

Best DOM Compliance

How You Can Help