SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Targeting Layers : Going Cross-Browser

If you have been following the code closely, you may have noticed that we are using different events and functionality in each browser. This makes it really simple to detect the browser type and merge the code as both browsers run through completely different code paths. Below is the entire script for building cross-browser link targeting. 

  // Targeting Layers - www.insideDHTML.com
  // Copyright 1998, insideDHTML.com, LLC. All rights reserved.
  // This code may be reproduced as long as the 
  // above copyright notice is maintained.

  function doClick(ev) {
    if (ev.target.href) {
      var layer = document.layers[ev.target.target]
      if (layer) {
        layer.src = ev.target.href
        return false
      }
    }
    this.routeEvent(ev)
    return true
  }

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

  var ieDHTML = document.all !=null
  var nsDHTML = document.layers

  function checkFrames() {
    var iframes = window.frames
    var numFrames = iframes.length
    for (var i=0; i < numFrames; i++) {
      var f = iframes[i]
      if ((f.document.readyState=="complete") && (f.document.cached==null)) {
        f.document.body.style.border = "none"
        var elFrame = document.all[f.name].tags("IFRAME")[0]
        elFrame.style.height = f.document.body.scrollHeight
        f.document.cached = true
      }
    }
    setTimeout("checkFrames()",100)
  }

  if (nsDHTML) {
    window.captureEvents(Event.CLICK)
    window.onclick = doClick
  }

  if (ieDHTML)
    checkFrames()

When authoring the HTML, we embedded the IFrame inside the Layer element. This makes it easy to line up the attributes. The choice to nest IFrame is Layer is arbitrary. If you change the order the result is the same as IE ignores Layer tags, and Netscape ignores IFrame tags. However, there may be unanticipated issues in the future if Netscape adds support for HTML 4.0 and the IFrame element.

Last, when defining links, you need to add the target attribute to specify the id/ name of the layer/ iframe to output the document: 

<A HREF="directions.htm" TARGET="page2">Directions</A>

Any link contained within a layer in Netscape that does not have a target automatically replaces the entire document and not just the layer. In IE, the default is to replace the contents of the frame. Therefore, to force both browsers to replace the entire document, use the TARGET="_top" identifier.

The last thing you may notice is when using this code is IE may flicker when a new page is loaded. This is because the new page redisplays the default border which we are removing with code. In our demonstration, we prevented the flickering by using CSS in each of the embedded pages to hide the body's border. In addition, to make both browsers look more alike, we also removed the body's default margin. Below is the style we included on the BODY element inside each embedded page: 

<BODY STYLE="margin: 0pt; padding: 0pt; border: none">

If you try our homework assignment and choose to implement transparency this flickering should not be an issue. (Hints: the trick is to read the contents of a hidden IFrame and output it into a DIV on the page - you will also need to be smart about grabbing the events of the DIV to update the appropriate frame). For extra credit, after adding transparency, change the default action of Navigator or Explorer to match each other. If you believe you found a solution, let us know. With your permission, we will publish all successful solutions. If you are stumped, we promise to post our solution in a few weeks. Good luck!

Discuss and Rate this Article

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