Inside Technique : Paged Documents : The Code

Netscape Resize Bug

Netscape has a bug in their absolute positioning implementation that causes positioned elements to potentially lose their positioning information when the window is resized. This not only causes a positioned page to literally fall apart, but also breaks any scripts that rely on positioning.

We have found a work-around in Netscape where we reload the page from scratch whenever the user resizes the window. We do this by calling a function on the resize event that reloads the page. Since Navigator and Explorer both support the onresize event, we added a little code to prevent Explorer from also calling this function (calling the function in IE causes no real harm beyond reducing the performance of the page):

  function doResize() {
    location.reload()
  }

  // Work-around Netscape resize bug
  if (layersSupport)
    setTimeout('window.onresize=doResize',500)

We are setting the onresize event in a timer to prevent Netscape from going into an infinite loop. Without the timer, the page is reloaded each time the page is loaded causing an infinite loop. Because of this, always be careful and test your code when using the onresize event.

Code

  /* This code can be reused and modified as 
     long as the copyright notice and URL 
     are maintained. */
  // This code is
  // copyright 1998 InsideDHTML.com, LLC.
  // http://www.insideDHTML.com
  
  // Set this to the number of pages
  var pageCount = 3
  // Browser detection veriables
  var allSupport = (document.all!=null)
  var layersSupport = (document.layers!=null)

  function getElement(elName) {    
    // Get an element from its ID
    if (allSupport)      
     return document.all[elName]    
    else
      return document.layers[elName]  
  }

  function setVisibility(el, bDisplay) {    
    // Hide or show to tip
    if (bDisplay)      
      if (allSupport)        
        el.style.visibility = "visible" 
      else        
        el.visibility = "show";    
      else      
        if (allSupport)
          el.style.visibility = "hidden"      
        else        
          el.visibility = "hidden"
  }

  function movePage(what) {
   if ((allSupport) || (layersSupport)) {
     for (var i=1; i <=pageCount; i++) 
       setVisibility(getElement("page"+i),what==i)
     return false
   } else 
     // Ignore code in downlevel browsers
     return true
  }

  function doResize() {
    location.reload()
  }

  // Work-around Netscape resize bug
  if (layersSupport)
    setTimeout('window.onresize=doResize',500)

 

See also...

Be sure to see this technique in action in our Creating 2D Form's article where we demonstrate a cross-browser technique for using CSS Positioning to create rich input forms.

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