Inside Technique : Targeting Layers : Preparing Navigator

In Netscape, we need to use their proprietary LAYER tag. While Netscape does support CSS positioning and recommends using standard CSS Positioning over the Layer tag, for this scenario we found that the Layer tag to be more robust with better event support. The Layer tag is fairly straight forward and self-explanatory to use. Below is a demonstration of the Layer element:

<LAYER 
  TOP=100 
  LEFT=100 
  WIDTH=200 
  SRC="myPage.htm" 
  ONLOAD="hookupEvents(this)"
  ID=page1>
</LAYER>

The above Layer tag is positioned at 100,100 and is 200 pixels wide. The height is automatically set to the size of the contents of the page, myPage.htm. The ID is used to provide a programmatic name to the element and by our code to specify the destination layer for targeting links. The onload event is fired each time the document in the layer is loaded (eg., if the src is changed to a new page, this event fires again). We use this event to hookup the necessary code that tracks the layer's links.

To add the linking mechanism, we track the onclick event. The onclick event occurs each time the user clicks on a link. Rather than add an onclick handler to every link in the layer, we use Netscape's event capturing to grab the click event before the user navigates and update layers as necessary. The event capturing code is quite simple:

  function hookupEvents(el) {
    el.captureEvents(Event.CLICK)
    el.onclick = doClick
  }

The onload event of the layer calls this event and passes a reference to itself as the first parameter. The layer object exposes a captureEvents method that allows you to specify one or many events you want to capture. For this scenario, we only need the click event. After specifying what events to capture, we need to hook up a function to the event handler. We set the layers onclick event to call doClick every time the user clicks. This includes any click in the layer, even if it is not on the anchor.

Since all clicks are now being routed, in the onclick handler we need to filter the click events and determine which ones are anchors. All other click events can be ignored. Unfortunately, Netscape does not expose any properties that directly identify links. Instead, we test whether the clicked object has an href property. If it does, we assume it to be a link. Next, if the clicked element is a link, we test whether the target attribute is set. If so, we try and locate a layer on the page that matches the target and manually set the src of that layer to the link's href. If no target is set, or the layer does not exist, we let the browser do their normal processing. Below is the complete function:

  function doClick(ev) {
    // Test if a link
    if (ev.target.href) {
      // Find layer for the target
      var layer = document.layers[ev.target.target]
      // If exists, set source, else ignore
      if (layer) {
        layer.src = ev.target.href
        return false
      }
    }
    this.routeEvent(ev)
    return true
  }

The last step is to add the same functionality to the outer document. This allows links in the outer document to automatically update the positioned layers. All that is necessary to enable this is to capture the window's onclick event:

  window.captureEvents(Event.CLICK)
  window.onclick = doClick

For this to work properly, every link in the included document must specify a target attribute. If no target is specified, the link automatically replaces the entire document, not the layer. This default behavior is different from framesets where the default is to replace just the current frame. You need to be aware of this difference, because Internet Explorer has a different default.

That was easy! Next we cover how the same functionality works in Internet Explorer. In Internet Explorer, the linking is handled automatically. Instead, we need to make IFrames automatically size to their contents and to also be displayed without their default broder.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.