Month: November 2001

Copy found at Wayback Machine archive.

Clipping in the earlier releases of Mozilla and with Navigator 6.0 followed the CSS 2.0 release specification. Clipping boundaries are set at “0” for all four sides of the rectangle containing the content — to clip, you would offset the values, using positive numbers only.

This differed from the original implementation of IE 4.x and up and Navigator 4.x, and the original CSS-P specification submission. With these, the element’s right and bottom clipping value is set to the width and height of the element by default. To offset the top and left, increment the top, left values. To offset the right and bottom, decrement these same values.

Having a different clipping region framework was a challenge when it came to cross-browser development.

However, beginning with Mozilla build M16 (and Navigator 6.0 PR 2.0 and up), clipping for the new browsers is the same as it was for Navigator 4.x and for IE 4.x and up. Supposedly, the W3C will be issuing errata for CSS 2.0 to change the clipping framework to match this common usage.

On to the X-Objects

The X-Object does have several methods exposed on the interface to handle clipping:

• objSetClipRect – set the clipping values
• objGetClipRect – get the current clipping value, if any
• objGetClipLeft – get the clipping rectangle’s left value
• objGetClipRight – get the clipping rectangle’s right value
• objGetClipTop – get the clipping rectangle’s top value
• objGetClipBottom – get the clipping rectangle’s bottom value

Adding support for Mozilla/Navigator 6.0 didn’t change the implementation for clipping with the original cross-browser objects. The implementation for Navigator 4.x is still:

// clip object
function nsobjSetClipRect (top,left,bottom,right) {
	if (top == null) top = this.objGetClipTop();
	if (left == null) left = this.objGetClipLeft();
	if (bottom == null) bottom = this.objGetClipBottom();
	if (right == null) right = this.objGetClipRight();
	this.css2.clip.left = left;
	this.css2.clip.right = right;
	this.css2.clip.top = top;
	this.css2.clip.bottom = bottom;
}

function nsobjGetClipRect () {
   var strng;
   var left = this.css2.clip.left;
   var right = this.css2.clip.right;
   var bottom = this.css2.clip.bottom;
   var top = this.css2.clip.top;

   strng = "rect(" + top + "px, " + right + "px, " + 
                 bottom + "px, " + left + "px)";
   return strng;
}

// get current clip right 
function nsobjGetClipRight() {
	return this.css2.clip.right;
}

// get current clip left
function nsobjGetClipLeft() {
	return this.css2.clip.left;
}

// get current clip top
function nsobjGetClipTop() {
	return this.css2.clip.top;
}

// get current clip bottom
function nsobjGetClipBottom() {
	return this.css2.clip.bottom;
}

Navigator 4.x implemented the clipping values as separate values, which actually made the use of this CSS attribute a little easier than how it was implemented in IE. However, the IE implementation is one that can be shared by Mozilla/Navigator 6.0 — though it is more complicated:

// return clipping rectangle
function domGetClipRect() {
   return this.css2.style.clip;
}

// clip object
function domSetClipRect(top, left, bottom, right) {
   if (top == null) top = this.objGetClipTop();
   if (left == null) left = this.objGetClipLeft();
   if (bottom == null) bottom = this.objGetClipBottom();
   if (right == null) right = this.objGetClipRight();
   strng = "rect(" + top + "px, " + right + "px, " + 
                 bottom + "px, " + left + "px)";
  this.css2.style.clip = strng;
}

	
// clip object on left
function domGetClipLeft() {
	return get_entry(this,"left");
}

// clip object on right
function domGetClipRight() {
	return get_entry(this, "right");
}

// clip object at top
function domGetClipTop() {
	return get_entry(this,"top");
}

// clip object at bottom
function domGetClipBottom() {
	return get_entry(this,"bottom");
}

The main difference between the Navigator 4.x and IE implementation is that the IE treats the clipping property as one setting rather than four distinct settings. Based on this when accessing the existing the clipping property, it has to be parsed to get each of the clipping rectangle’s values.

Microsoft did provide read only properties to access each value of the clipping rectangle. However, as these aren’t usable with Mozilla/Navigator 6.0, I left the code within the object as is, and used parsing.

The parsing is handled through two helper functions, convert and get_entry, which are not exposed on the X-Object’s interface:

// convert string to value
function convert(strng) {
    var i = parseInt(strng);
    return i;
}

// get clipping value for specific dimension
function get_entry(obj,indx) {
	strng = obj.css2.style.clip;
        if (strng.length > 0) {
	   strng = strng.slice(5,strng.length-1);
	   var entries = strng.split(" ");
           }
        else {
            var entries = new Array(5);
            for (i = 0; i < entries.length; i++)
                entries[i] = "auto";
            }
	if (indx == "top") {
		if (entries[0] == "auto") 
                   return 0;
		else
		   return convert(entries[0]);
            }
	else if (indx == "left") {
		if (entries[3] == "auto") 
		   return 0;
		else
		   return convert(entries[3]);
		}
	else if (indx == "bottom"){
		if (entries[2] == "auto") {
		   return obj.objGetHeight();
                   }
		else
		   return convert(entries[2]);
              }
	else if (indx == "right") {
		if (entries[1] == "auto") 
		   return obj.objGetWidth();
		else
		   return convert(entries[1]);
		}
	
}

Let’s try the X-Object clipping functionality, with an example application created specifically for testing clipping.

Clipping Test Application

The test page has two different blocks in the page, each created in separate positioned DIV blocks. The topmost block contains an HTML form and form buttons, used to clip the second block’s left, top, right, and bottom rectangle’s values:

<BODY onload="create_objects(); setup()">
<DIV style="position:absolute; left:10; 
top:10; background-color: yellow; 
layer-background-color: yellow; padding-top: 20px; 
overflow: hidden;
width: 500; height:150; clip: auto">
<form action="">
<center>
<INPUT type="button" value="Clip to the Left" 
   onclick="clip_left()"> 
<INPUT type="button" value="Clip to the right" 
   onclick="clip_right()"><p>
<INPUT type="button" value="Clip on the top" 
   onclick="clip_top()"> 
<INPUT type="button" value="Clip the bottom" 
   onclick="clip_bottom()"><p>
<input type="button" value="Show the clip property" 
   onclick="show_clip()">
</center>
</FORM>
</DIV>

<DIV id="info" style="position:absolute; 
left: 250px; top: 180px; background-color: red; 
  width: 300px; height: 300px; overflow: hidden; 
layer-background-color: red">
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements: 
a header and a paragraph
</p>
</DIV>
</BODY>

A function is called when the page is loaded, setup, which sets the clipping region of the target DIV block, using values that differ based on browser type:

function setup() {
  
   theobjs["info"].objSetClipRect(0,0,300,300);
   }
}

These values set the clipping region to fit the existing DIV block parameters (300px wide, 300px tall).

The functions to create the clipping effect are:

// clip element
function clip_left() {
   var lft = theobjs["info"].objGetClipLeft();
   lft+= 10;
   theobjs["info"].objSetClipRect(null,lft,null,null);
}

function clip_right() {
   var rt = theobjs["info"].objGetClipRight();
   rt-= 10;
   theobjs["info"].objSetClipRect(null,null,null,rt);
}

function clip_top() {
   var top = theobjs["info"].objGetClipTop();
   top+= 10;
   theobjs["info"].objSetClipRect(top,null,null,null);
}

function clip_bottom() {
   var bt = theobjs["info"].objGetClipBottom();
   bt-=  10;
   theobjs["info"].objSetClipRect(null,null,bt,null);
}

function show_clip() {
   alert(theobjs["info"].objGetClipRect());
}

Try out the Clipping Example for yourself, using IE 4.x and up, Navigator 4.x, or Mozilla/Navigator 6.0.

For more complicated demonstrations of clipping, check out the associated article Demonstrating PhotoShop functionality using DHTML and X-Objects, which has four DHTML demonstrations using various effects, including clipping.

Copy found at Wayback Machine Archive.

Event handling is pretty straight forward for all three impacted browsers (or browser object models). Events can be handled using two different techniques: through event handlers attached to HTML elements, or through event capturing. Navigator 4.x, IE, and Mozilla/Navigator 6.x all support both types of event handling, though the extent of coverage and the methods do differ.

Navigator 4.x only supports certain event handlers embedded within certain HTML tags — most notably this browser supports mouse event handlers such as onMouseOver and OnClick primarily within a link element (designated by <A;>). Additionally, Navigator 4.x also supports event capturing, using functionality similar to:

document.captureEvents(Event.KEYPRESS);

document.onKeyPress=keypress;

function keypress(e) {
   tmp = e.which;
   else if (navigator.appName == "Mozilla")

   // if space bar hit
   if (tmp == 32) {
	window.close();
	return;
	}
}

Both IE and Mozilla/Netscape 6.0 support event handlers on HTML elements as defined within the HTML 4.0 specification, at the least. This means that you can associate an onMouseOver event handler with all HTML elements that support this — which means most if not all of them.

Additionally, IE and Mozilla/Netscape 6.0 also support event capturing though the techniques do differ. In IE, you can use SetCapture or ReleaseCapture with HTML elements, and all mouse movements are then passed to the element. You can also assign event handlers to objects in script:

document.onKeyPress=keypress;

With Mozilla/Netscape 6.0, event handling is provided through the DOM Level 2 Events. For instance, to provide event handling for an event, you can add an Event Listener for the object:

document.addEventListener("keyup",keypress,true);

The addEventListener method takes the event as the first parameter, the event handler (function) as the second, and whether the event is captured or allowed to “bubble up” to other events with the third parameter. In the code just shown, the keyup event is captured and assigned to a function called “keypress”.

Within an event handler, you can access an Event object, though how this is accessed and used also differs between the browsers.

With Navigator 4.x, the Event object is passed, automatically, as a parameter to the event handler. Within IE, the Event object is accessed through the Window object during event handling. Mozilla/Netscape 6.0 supports DOM Level 2 event handling. An Event object is passed to the event handler, and information can be pulled from it.

An example of event handling and pulling event information from an Event object is the following, which pulls information about which key is pressed:

function keypress(e) {

   if (navigator.appName == "Microsoft Internet Explorer")
      tmp = window.event.keyCode;
   else if (navigator.appName == "Navigator")
	tmp = e.which;
   else if (navigator.appName == "Mozilla")
       tmp = e.keyCode;

   // if space bar hit
   if (tmp == 32) {
	window.close();
	return;
	}
}

In this code, if the space bar is hit (an ASCII value of 32), the current window is closed. The event handler itself is activated by the following code:

   // capture events
   if (navigator.appName == "Microsoft Internet Explorer")
	wdth = document.body.clientWidth;
   else if (navigator.appName == "Netscape")
   	document.captureEvents(Event.KEYPRESS);
   else
      document.addEventListener("keyup",keypress,true);


   // assign function to event handler
  if (navigator.appName != "Mozilla")
    document.onkeypress=keypress;

Notice that the Mozilla/Netscape 6.0 code captures the keyup event, not the keypress. The reason for this is that the actual key value is set with a keyup or keydown event, but not with keypress. Capturing keypress will give me the ASCII value for the control keys, such as Enter or Tab, but not the other keys such as “N” or the space bar.

Now that we’ve had a brief introduction to X-Object event handling, we’ll take a look at some examples using different types of event handling.

Embedded Event Handlers

The simplest approach to event handling is to embed event handlers right in the HTML element. However, you also have to take into account that Navigator 4.x doesn’t support embedded events for the most part — if you want to capture events such as mouse events, you need to encapsulate the target element within a link.

To demonstrate, I modified a DHTML example application that uses a transparent GIF to embed “hot spots” in a page. When the mouse moves over the hot spot, the transparent image is replaced by a visible image.

Within the page, the transparent images are created within links, which are themselves encapsulated within positioned DIV blocks:

<DIV id=hotspot1>
<a href="" onclick="return false" onmouseover="hotspot(0)">
<img src="blank.gif" width=80 height=32 border=0></a>
</DIV>

When the mouse moves over the image, the hotspot function is called with the number of the spot. This function then replaces the existing transparent GIF with the visible one:

dfltimg = new Image();
dfltimg.src = "logo.gif";

// access images and changing their source
// is relatively old
function hotspot(num) {

   if (navigator.appName == "Microsoft Internet Explorer" ||
       navigator.appName == "Mozilla")
	document.images[num].src = dfltimg.src;
   else
	document.layers[num].document.images[0].src = dfltimg.src;
}

As you might notice from the code, both IE and Mozilla/Netscape 6.0 can access the images array directly, regardless of what container HTML elements the images are in. With Navigator 4.x, however, you have to access the image object directly from the images collection for each document layer in the page.

Try out the HotSpot example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Expose the hotspots by moving your mouse over the page (there are 6 of them).

Finding an ASCII value

I have a utility DHTML application that prints the ASCII value of any key pressed to a form text box. I modified this utility to work with Mozilla as well as with Navigator 4.x and IE 4.x and up.

The application captures the keypress event (the keyup event for Mozilla), and attaches this event to an event handler function. The key capture and handling code is:

// handle keyboard events
if (navigator.appName == "Mozilla")
   document.addEventListener("keyup",keypress,true);
else if (navigator.appName == "Netscape")
   document.captureEvents(Event.KEYPRESS);

if (navigator.appName != "Mozilla")
    document.onkeypress=keypress;

// perform action based on keypress and state info
function keypress(e) {

   if (navigator.appName == "Microsoft Internet Explorer")
      tmp = window.event.keyCode;
   else if (navigator.appName == "Navigator")
	tmp = e.which;
   else if (navigator.appName == "Mozilla")
       tmp = e.keyCode;
   document.forms[0].elements[0].value = tmp;
}

You can try out the ASCII Utility yourself using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x.

One thing you’ll find if you try this example with Mozilla/Netscape 6.0 is that the ASCII key value reflects the value of the key if it were capitalized. So, you get a value of “65” when you press an “A”, regardless of whether you’re pressing the shift key or not. I’m not sure if this is by design or by accident and am investigating this behavior. (Ahh, I do love working with alpha code).

Keep Away

I modified one more DHTML example that uses a combination of embedded event handlers and event capturing to create a “keep away” effect. The example uses an embedded event handler within a DIV block, which works with Mozilla/Netscape 6.0 and IE 4.x and up, but doesn’t with Navigator 4.x:

<DIV id="block" style="left: 200; top: 200; width: 104"
onMouseover="keep_away()">
<img src="yasd.gif" width=104>
</DIV>

To provide event handling for Navigator 4.x, the onMouseOver event for the DIV block is captured in script, and assigned to the same event handler:

:

function capture_events() {
// handle keyboard events
if (navigator.appName == "Netscape") {
	document.block.captureEvents(Event.MOUSEOVER);
      document.block.onmouseover=keep_away;
	}
}

Within the event handling code itself, the CSS positioned DIV block (containing an image of L’il Flame) is moved either right or left, in effect keeping the image away from the user’s mouse:

MAXHORIZ = 700;
MINHORIZ = 100;
var adjustor = 0;

if (navigator.appName == "Navigator") {
   adjustor = 50;
   }
else
   adjustor = 100;

function keep_away() {
	var newleft = theobjs["block"].objGetLeft();
      if (newleft > MAXHORIZ)
		adjustor=-1 * adjustor;
      else if (newleft < MINHORIZ)
		adjustor= -1 * adjustor;
      newleft= newleft+adjustor;
      theobjs["block"].objSetLeft(newleft);
}

As spacing is a bit different between IE and Navigator, the original code provided a different adjustor value for moving the DIV block. I’ve found that the same settings also work with Mozilla. Try the Keep Away example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Move your mouse over L’il Flame to cause it to move away from your mouse.

Copy found at Wayback Machine Archive.

Event handling is pretty straight forward for all three impacted browsers (or browser object models). Events can be handled using two different techniques: through event handlers attached to HTML elements, or through event capturing. Navigator 4.x, IE, and Mozilla/Navigator 6.x all support both types of event handling, though the extent of coverage and the methods do differ.

Navigator 4.x only supports certain event handlers embedded within certain HTML tags — most notably this browser supports mouse event handlers such as onMouseOver and OnClick primarily within a link element (designated by <A;>). Additionally, Navigator 4.x also supports event capturing, using functionality similar to:

document.captureEvents(Event.KEYPRESS);

document.onKeyPress=keypress;

function keypress(e) {
   tmp = e.which;
   else if (navigator.appName == "Mozilla")

   // if space bar hit
   if (tmp == 32) {
	window.close();
	return;
	}
}

Both IE and Mozilla/Netscape 6.0 support event handlers on HTML elements as defined within the HTML 4.0 specification, at the least. This means that you can associate an onMouseOver event handler with all HTML elements that support this — which means most if not all of them.

Additionally, IE and Mozilla/Netscape 6.0 also support event capturing though the techniques do differ. In IE, you can use SetCapture or ReleaseCapture with HTML elements, and all mouse movements are then passed to the element. You can also assign event handlers to objects in script:

document.onKeyPress=keypress;

With Mozilla/Netscape 6.0, event handling is provided through the DOM Level 2 Events. For instance, to provide event handling for an event, you can add an Event Listener for the object:

document.addEventListener("keyup",keypress,true);

The addEventListener method takes the event as the first parameter, the event handler (function) as the second, and whether the event is captured or allowed to “bubble up” to other events with the third parameter. In the code just shown, the keyup event is captured and assigned to a function called “keypress”.

Within an event handler, you can access an Event object, though how this is accessed and used also differs between the browsers.

With Navigator 4.x, the Event object is passed, automatically, as a parameter to the event handler. Within IE, the Event object is accessed through the Window object during event handling. Mozilla/Netscape 6.0 supports DOM Level 2 event handling. An Event object is passed to the event handler, and information can be pulled from it.

An example of event handling and pulling event information from an Event object is the following, which pulls information about which key is pressed:

function keypress(e) {

   if (navigator.appName == "Microsoft Internet Explorer")
      tmp = window.event.keyCode;
   else if (navigator.appName == "Navigator")
	tmp = e.which;
   else if (navigator.appName == "Mozilla")
       tmp = e.keyCode;

   // if space bar hit
   if (tmp == 32) {
	window.close();
	return;
	}
}

In this code, if the space bar is hit (an ASCII value of 32), the current window is closed. The event handler itself is activated by the following code:

   // capture events
   if (navigator.appName == "Microsoft Internet Explorer")
	wdth = document.body.clientWidth;
   else if (navigator.appName == "Netscape")
   	document.captureEvents(Event.KEYPRESS);
   else
      document.addEventListener("keyup",keypress,true);


   // assign function to event handler
  if (navigator.appName != "Mozilla")
    document.onkeypress=keypress;

Notice that the Mozilla/Netscape 6.0 code captures the keyup event, not the keypress. The reason for this is that the actual key value is set with a keyup or keydown event, but not with keypress. Capturing keypress will give me the ASCII value for the control keys, such as Enter or Tab, but not the other keys such as “N” or the space bar.

Now that we’ve had a brief introduction to X-Object event handling, we’ll take a look at some examples using different types of event handling.

Embedded Event Handlers

The simplest approach to event handling is to embed event handlers right in the HTML element. However, you also have to take into account that Navigator 4.x doesn’t support embedded events for the most part — if you want to capture events such as mouse events, you need to encapsulate the target element within a link.

To demonstrate, I modified a DHTML example application that uses a transparent GIF to embed “hot spots” in a page. When the mouse moves over the hot spot, the transparent image is replaced by a visible image.

Within the page, the transparent images are created within links, which are themselves encapsulated within positioned DIV blocks:

<DIV id=hotspot1>
<a href="" onclick="return false" onmouseover="hotspot(0)">
<img src="blank.gif" width=80 height=32 border=0></a>
</DIV>

When the mouse moves over the image, the hotspot function is called with the number of the spot. This function then replaces the existing transparent GIF with the visible one:

dfltimg = new Image();
dfltimg.src = "logo.gif";

// access images and changing their source
// is relatively old
function hotspot(num) {

   if (navigator.appName == "Microsoft Internet Explorer" ||
       navigator.appName == "Mozilla")
	document.images[num].src = dfltimg.src;
   else
	document.layers[num].document.images[0].src = dfltimg.src;
}

As you might notice from the code, both IE and Mozilla/Netscape 6.0 can access the images array directly, regardless of what container HTML elements the images are in. With Navigator 4.x, however, you have to access the image object directly from the images collection for each document layer in the page.

Try out the HotSpot example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Expose the hotspots by moving your mouse over the page (there are 6 of them).

Finding an ASCII value

I have a utility DHTML application that prints the ASCII value of any key pressed to a form text box. I modified this utility to work with Mozilla as well as with Navigator 4.x and IE 4.x and up.

The application captures the keypress event (the keyup event for Mozilla), and attaches this event to an event handler function. The key capture and handling code is:

// handle keyboard events
if (navigator.appName == "Mozilla")
   document.addEventListener("keyup",keypress,true);
else if (navigator.appName == "Netscape")
   document.captureEvents(Event.KEYPRESS);

if (navigator.appName != "Mozilla")
    document.onkeypress=keypress;

// perform action based on keypress and state info
function keypress(e) {

   if (navigator.appName == "Microsoft Internet Explorer")
      tmp = window.event.keyCode;
   else if (navigator.appName == "Navigator")
	tmp = e.which;
   else if (navigator.appName == "Mozilla")
       tmp = e.keyCode;
   document.forms[0].elements[0].value = tmp;
}

You can try out the ASCII Utility yourself using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x.

One thing you’ll find if you try this example with Mozilla/Netscape 6.0 is that the ASCII key value reflects the value of the key if it were capitalized. So, you get a value of “65” when you press an “A”, regardless of whether you’re pressing the shift key or not. I’m not sure if this is by design or by accident and am investigating this behavior. (Ahh, I do love working with alpha code).

Keep Away

I modified one more DHTML example that uses a combination of embedded event handlers and event capturing to create a “keep away” effect. The example uses an embedded event handler within a DIV block, which works with Mozilla/Netscape 6.0 and IE 4.x and up, but doesn’t with Navigator 4.x:

<DIV id="block" style="left: 200; top: 200; width: 104"
onMouseover="keep_away()">
<img src="yasd.gif" width=104>
</DIV>

To provide event handling for Navigator 4.x, the onMouseOver event for the DIV block is captured in script, and assigned to the same event handler:

:

function capture_events() {
// handle keyboard events
if (navigator.appName == "Netscape") {
	document.block.captureEvents(Event.MOUSEOVER);
      document.block.onmouseover=keep_away;
	}
}

Within the event handling code itself, the CSS positioned DIV block (containing an image of L’il Flame) is moved either right or left, in effect keeping the image away from the user’s mouse:

MAXHORIZ = 700;
MINHORIZ = 100;
var adjustor = 0;

if (navigator.appName == "Navigator") {
   adjustor = 50;
   }
else
   adjustor = 100;

function keep_away() {
	var newleft = theobjs["block"].objGetLeft();
      if (newleft > MAXHORIZ)
		adjustor=-1 * adjustor;
      else if (newleft < MINHORIZ)
		adjustor= -1 * adjustor;
      newleft= newleft+adjustor;
      theobjs["block"].objSetLeft(newleft);
}

As spacing is a bit different between IE and Navigator, the original code provided a different adjustor value for moving the DIV block. I’ve found that the same settings also work with Mozilla. Try the Keep Away example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Move your mouse over L’il Flame to cause it to move away from your mouse.