Entry

I'm using navigator 4 and I'm trying to assign a CSS layer to an object, but it doesn't work unless I reload the page, WHY?

Jan 23rd, 2001 07:18
Ian Grant, Dani C, Al Sparber,

This is a simplified version of an Action Script that ships with 
Macromedia Dreamweaver. It is a must to ensure that Netscape4 reloads a 
page with CSS layers when a user resizes the window. If not included, 
Netscape 4x will tend to forget positions. This is not an issue in the 
upcoming Netscape 6 browser.
<script>
function reLoadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt
(appVersion)==4)) {
    document.is_pgW=innerWidth; document.is_pgH=innerHeight; 
onresize=reLoadPage; }}
  else if (innerWidth!=document.is_pgW || innerHeight!=document.is_pgH) 
location.reload();
}
reLoadPage(true);
</script>
I think that this isnīt the problem I was having. The poblem was that I 
was tryng to check:   document.layers, in the beginig of the document 
(in a linked script), an that failed till I reload the document. I 
donīt know why. Now I detect the browser by other way.
Thak you.
------------------------------------------------------------------------
One problem which is common to Netscape 4 is that you can't always read 
or assign CSS properties in Javascript to layers until the page (or 
page element) has finished loading.  A possible work-around would be to 
put all of your DHTML scripts into a function, and call that function 
with the window.onload handler.  You can continue to use your linked 
Javascript files, so long as you follow the procedure described above.
    <script language="javascript" type="text/javascript">
    <!--
    function start() {
        // do your DHTML stuff here
    }
    // Let the onload handler call start your DHTML scripts
    window.onload = start;
    // -->
    </script>
Occasionally (if you plan it right), you can access the Netscape 4 DOM 
right after you create an HTML coded layer:
    <!-- Note that you have to use "position:" so the DOM object will 
work.  If you don't, Navigator will tell you that "myLayer" is not an 
object.  It isn't neccessary to use inline styles; You can use a linked 
or a non-linked stylesheet instead. -->
    <span id="myLayer" style="position:absolute">Put anything in here!
</span>
    <script language="javascript" type="text/javascript>
    <!-- Hide Javascript from older browsers
    // You can read the browser window's dimensions at any time
    clientHeight = innerHeight;
    clientWidth = innerWidth;
    // Make sure the object is created before you access it (HTML 
<SPAN> created above)
    obj = document.layers.myLayer;
    elementHeight = obj.clip.height;
    elementWidth = obj.clip.width;
    // Centre element on the browser window
    topPos = Math.round((clientHeight - elementHeight) / 2);
    leftPos = Math.round((clientWidth - elementWidth) / 2);
    // Move it using CSS (and/or layer properties)
    obj.top = topPos;
    obj.left = leftPos;
    // End hiding Javascript -->
    </script>
I should mention that this code is Navigator 4 compatible (4 and up, 
but not including versions 5 and up).  Netscape 6 requires that the 
entire document load before retrieving calculated properties (see 
my "Retrieving Calculated CSS Properties" article elsewhere in these 
FAQTs), otherwise you'll get undefined behaviour (which is not the same 
as an "undefined" value).  For example, reading an object's calculated 
width property may return the window width instead (with some 
implementations).
For dynamic content, you'll have to wait until the browser has finished 
rendering it before you can adjust its properties.  It's best to 
dynamically create all of your objects first (during the initial page 
loading process) and change their contents later.  You can then rely on 
the onload handler to start your DHTML scripts once everything is 
rendered properly.  If you must create and access these dynamically 
created objects after the page has finished loading, use a delay 
(setTimeout) before trying to read their CSS properties.
I hope this helps you.
Ian Grant
idgrant@pandi.20m.com