Writing Friendly Code 8. Sizing Up the Situation

home / web / dev / friendly

Writing Friendly Code

8. Sizing up the Situation

sizMan() is called from a window.resize event for either browser and from setPg() and a "Scroll" option button click for IE. Most of sizMan() is for IE. Navigator increments a counter that cancels the resize event, or it will repeat the reload for all the layers in the document. A reload is called for NS, and if cntSz is on its first incarnation, the user is alerted about what is happening.

sizMan() is mainly the way I lose the phantom scrollbars in IE4+. IE is anticipating that you may at some point replace the content on the page with something that needs scrollbars, so it bangs them on the page even if all your content is on a small bit of the display. 

And sometimes you get the phantom scrollbars, which are pale, disabled things that seem to have no purpose in life whatever. It isn't very well documented, but you can turn off the scrollbars as a style property of the body element. If you do this, however, and the user later needs the scrollbars, they are out of luck. 

In this application, the scrollbars aren't needed at all if the window is above a known minimum size, so sizMan calculates the size of the window and loses the scrollbars, unless they are actually needed. A resize causes sizMan to recalculate and restore the scrollbars if they are needed at the new size. This setting does nothing at all for Navigator, which doesn't know what document.body is, but then again, Navigator only displays scrollbars if you may actually need them.

The wot parameter is an argument from the Scroll button on the Options toolbar. If the user wants the scrollbars no matter what, it tells the function the screen is very small. You can never tell what people are going to like...

function sizMan(wot){
if(brid=="IE"){
   sizH=document.body.clientHeight;
   sizW=document.body.clientWidth;
   if(wot && wot==1)sizH=100;
   if(sizH>420 && sizW>620)document.body.scroll="no";
   if(sizH<=420 || sizW<=620)document.body.scroll="yes";
}
   if(brid=="NS"){

Navigator goes directly to scale() on startup; it comes here first when the user resizes. The counter keeps a zillion messages from popping up as you continue to resize.

   if(cntSz==0)cntSz++;alert(msgNSa);
      }
scale();
}

Scale figures the available window dimensions and keeps controls from overlapping on a small screen or a resize. There are two branches for browser specific properties. Although the stylesheet specifies a lot of specific sizes, nothing is really critical. If a user wants to look at it in a small window he may have to scroll, but he won't lose anything. 

The only elements I am moving around in scale() are the navigation buttons, the option button and the options toolbar. The page tabs are positioned top left; they aren't going anywhere. The other controls can get cut off, so as the size of the screen shrinks, I move the lower bars up and the bars on the right to their left, to keep them in view. And note that if the toolbars are in the way, they can be hidden anytime....

The numbers are what happen to suit this project; they aren't anything to puzzle over. They are in pixel units. You might note the differences between NS and IE in the property references. In IE you go from what you are measuring to its container, which for a top level div is the body element. Navigator has a quicker way to find the size of the window. 

I used the Math.ceil and Math.floor methods to make sure that I get a number back. IE in particular likes to read pixel properties as strings, and often throws a fit if you try to subtract from what it thinks is a string. 

There was no particular reason I picked the methods ceil and floor which round a number up or down to the next integer. I haven't used them for a while, didn't want them getting dull or rusty in the bottom of my toolbox.

 
function scale(){
var nwTop=410;
var nxTop=350;
var tem1,tem2,tem3; 
var nxL=540;
   if (brid=="IE"){ 
     sizH=Math.floor(document.body.clientHeight); 
     if(sizH<=420)nwTop=Math.ceil(document.body.clientHeight-35); 
     sizW=Math.floor(document.body.clientWidth);
     if(sizW<=650)nxL=Math.ceil(document.body.clientWidth-130); 

nwTop starts off at 410, and only changes if the window size is outside the limits it sets up here. The tem variables reference the control containers in IE by their document.all.id. The style property is another IE invention. You don't access an elements width, you access its style and the width of the style.

I never would have thought of that.

     tem1=document.all.toolBox.style;
     tem2=document.all.nexter.style;
     tem3=document.all.optins.style;
   } 
   if (brid=="NS"){ 
     if(Math.floor(innerHeight)<=420)nwTop=Math.ceil(innerHeight-35); 
     if(Math.floor(innerWidth)<=650)nxL=Math.ceil(innerWidth-130);

Navigator calls a thing a thing, as long as it is a top level thing. And a thing's width is the thing's width, by gum.

     tem1=document.toolBox;
     tem2=document.nexter;
     tem3=document.optins; 
   }

Now that the browser has figured out what the window size is, the top and left properties move the various tools to their locations, if the nwTop variable has been changed from its default. Otherwise, they are drawn in the default locations.

tem1.top=nwTop;
(nwTop!=410) ? tem1.top=nwTop-35 : tem1.Top=nxTop;
tem1.left=nxL;
tem3.left=nxL-50; 
}

Both browsers now know how many pages we have and where to draw the controls. This has so far all been set up routines. It has taken the computer a tiny bit more than one second to get this far, and a second of that was in our timeouts. But everything is ready now. 

If we got here on the startup procedure,the script returns from here to setPg(); and then on to turnPg(). We can't go directly, because we use this procedure in a resize. Don't want to lose our place if we resize the window.

turnPg uses two small helper functions that we will check out on the way. They are setVis(), which shows or hides whatever we ask it to, and btnVis(), who makes sure the page tab buttons have the correct value.

Handy Tool Kit 

Comments are welcome

 


Created: Dec. 2, 1999
Revised: Dec. 7, 1999

URL: https://webreference.com/dev/friendly/