Writing Friendly Code 7. Laying Out the Page

home / web / dev / friendly

Writing Friendly Code

7. Laying out the Page

function setPg(){

I set up the array of infotips first. We'll look at it again in the function that works with them, inform(). The first part of each element is the string for the message in the popup. infodun adds a "close" button to the popup.

infos[0]=infoCats+infodun1;
infos[1]=infoW3+infodun;
infos[2]=infoEc+infodun;
infos[3]=infoHelp+infodun;
infos[4]=infoScroll+infodun;

setPg() is completely browser dependent. IE and NS use the same JavaScript (almost) but the ways they name and access document properties rarely agree. I begin here with the IE branch, not because of any great merit in it, but because it is a convenient place to specify some IE specific changes from the page defaults. I could go the other way and make the default properties fit IE and change them in the Navigator branch. The decision went to brevity - it takes less code to access some of these elements in IE than in NS. 

First, we count the "pages":

if(brid=="IE"){ 
   for(var i=0;i<document.all.length;i++){
     if(document.all[i].id.indexOf("page")!=-1){
       yPage[n]=document.all[i].id; 
       n++;
        } 
}

Document.all is IE only. It is a quick and easy way to get to any element with an id. About the only thing I know about the incoming document is that it contains a certain number of id's that have the word "page" in them. In the HTML, the containers for the changing content look like this:

<div class="pageClass" id="page1">
Content
</div>

The script has read through the document now and assembled an array of the pages by id. Our friend n is one more than the number of pages. The page number tab bar contains a row of buttons to click for quick navigation. 

The buttons are not the element <button>, but input elements of type="button" on a form. IE supports buttons, and they are HTML approved, but Navigator can't handle them. Forms work in either browser, and you can read or write to the value, the visible text, of a form button anytime, so that's what we use here.

These buttons need to have their values match the pages that they open: 

   for(var r=1;r<n-3;r++){
            document.all["btn"+r].value="Pg "+r;
        }

The number bar has buttons named "btn0", "btn1" and so on, up to a number that is less by 2 than the total number of page containers, or three less than n. I'll take a minute to explain this:

The page bar contains the button for the cover page at btn0, the first button in the row. To the right of the cover page button are the buttons for all of the new pages in the document, everything that has been written for this issue. The loop writes the value "Pg 1" to the btn1 button, and so on up to Page n-3. These are the fresh content pages for this issue. 

There are two other pages that are included in every issue, that correspond to n-2 and n-1. They are not accessed from the number bar, but from an options bar we'll examine later. They are regular features called "Forum" and "Resources," and their content comes from  pages outside the current document.

But although these are, strictly speaking, not part of the page that was downloaded, I don't want the user to have his location change to access these files. I want a button click on "Forum" to bring the forum into the magazine page like you would pull in a graphic with the img tag.

I do this in IE with an iframe. It is HTML approved, loads its src file with the document just like an image, and all in all is just as slick as silk pants. With an iframe between the div tags on page n-2, and one on page n-1 for the Resource page, they act like any other page in the magazine. 

NS has a different solution, which I'll get to in a bit. We'll next make some shortcuts to those global n characters we talked about earlier, and write the word "Cover" on the first button in the page tabs:

   n1=(n-1);
   n2=(n-2);
   n3=(n-3);
   document.all.btn0.value="Cover";

Because of differences in the way IE and NS interpret the inheritance of style attributes, and because they render colors differently, I could not get the cover page to behave identically in IE and Navigator. I gave up after a while, and gave over the default class to Navigator.

At this point in the code, I reassign the class of the cover page in IE to the class "coverClass." I put a new class in the stylesheet that IE uses in place of the default, which Navigator uses. This is a fairly powerful technique for customizing or altering styles, and gets some more attention when we get into the stylesheet section of this article. I do a similar className shift here also for the infotip popups, which work and look very different in our two favorite browsers:

document.all.page0.className="coverClass";

document.all.info.className="reff";

One of the option buttons starts off as "Resize." Navigator uses this, but it isn't needed in IE. IE has a bit of a problem with scrollbars, an issue that will get what it deserves later. For now  just note that we swap the name on the button to "Scroll." And then we go to sizMan().

   document.all.optbtn7.value="Scroll";
   sizMan(); 
   }

Navigator has to do the same things as IE, but they don't all get done here. The first bit is almost identical - although NS uses the layers.length, which is the size of the array of positioned containers, and returns the array of things named "page" something. 

The page button values get assigned in the function turnPage(), because they need to be rewritten every time a page is changed. The n family gets assigned here, and NS skips over sizMan() when it loads and goes right to scale().

if(brid=="NS"){ 
   for(var i=0;i<document.layers.length;i++){
     if(document.layers[i].name.indexOf("page")!=-1){
       yPage[n]=document.layers[i].name; 
       n++; 
     }
   }
   n1=(n-1);
   n2=(n-2);
   n3=(n-3); 
   scale();
   }

Both clients are returned here after getting formatted for the display in scale(). The turnPage() function runs through to make the cover page visible and set the page button values. The 0 is the Cover page identifier, the second parameter is a marker we'll explain in turnPage(). 

The Cover page displays, and then the page tabs, the navigation buttons, and the options button are made visible, using setVis(), our central visibility property control. (We'll take up the various arguments to the function calls when we get to the functions.) The timer is an effect I like, but it also prevents event calls that don't have handlers yet. 

turnPage(0,1);
setTimeout("setVis('nexter','visible')",350);
setTimeout("setVis('tabBar','visible')",450);
setTimeout("shoOpts('Hide')",550);
}

This is the logical point where the user takes over. But we may as well catch up with our code. IE has gone to sizMan() and Navigator to scale(). They both return to setPg() from scale() and go on to turnPage(), and then its the user's turn.

Sizing Up the Situation 

Comments are welcome

 


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

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