MSIE5: JScript [Outer Court]

JavaScript/ JScript / ECMAScript ot what it's called: Not many changes I know of, but there's some new mouse events and a window.print() function which'll open the print window.

Desktop-emulator

Non-behavior version

Again, try the MSIE5-only sample page. This uses DOM-referencing in JavaScript. The several window-events send their element-reference ("this"), and the function references certain other parts of the window. For example, the x-button at the top-right of the window submits an object, and then the function close would go like thisObject.parentNode.etc.style.visibility="hidden".

Behaviors

Now you can use Behaviors in MSIE5. This way you can get rid of all the event declarations inside the HTML page. All you do is link to an HTC (Hypertext Component) from your stylesheet, and then attach events and their routines to this element from within this seperate script file. However, the URL you give from the CSS will not be resolved relative to the stylesheet, so again there needs to be applied the same workarounds used for Netscape background-images.

Behavior version

Take a look at the Behavior version of the MSIE5-only sample page and you'll notice that there's not a single JavaScript event or even JavaScript link from within the main HTML page (note that the dragging doesn't work in this version).

Expand-collapse list

Here's again the Expand-collapse list sample page. If you look at the source HTML, you'll notice there's no event call from within the div's class "more" and class "show". What for example the "more" class links to is this behavior:


<script language="JScript">

attachEvent('onclick',fnClick);
attachEvent('onmouseover',fnMouseover);
attachEvent('onmouseout',fnMouseout);

function fnClick()
{ 
  if ( this.nextSibling.style.display!="block" )
  { this.nextSibling.style.display="block";
    this.style.backgroundImage="url(expcol/minus.gif)";
  }
  else
  { this.nextSibling.style.display="none";
    this.style.backgroundImage="url(expcol/plus.gif)";
  }
}

function fnMouseover()
{ this.style.textDecoration="underline";
}
function fnMouseout()
{ this.style.textDecoration="none";
}

</script>

What it does is:
It first assigns the events it wants to handle. The mouseover and mouseout are just emulating the "hover" behavior since these aren't actually links. The click event triggers code that tests if the sub-list (representing the hierarchy below, but actually being the next sibling) is already displayed. If not, it changes its own state to the minus-picture and opens the new list. This can be done by display: block / display: none. IE4 also handles display: none. NS4 doesn't.

Moving window

With JScript5 you can move the browser window. Use self.moveBy(). Try this by clicking the

shock-triggering

(again, you need MSIE5).
I just slightly edited this piece of code I found somewhere which does the shock-movement:

var i=0, j=0;
for (i = 10; i > 0; i--)
{
  for (j = i; j > 0; j--)
  {
    self.moveBy(0,i);
    self.moveBy(i,0);
    self.moveBy(0,-i);
    self.moveBy(-i,0);
  }
}