Writing Friendly Code 10: Doing That Thing You Do

home / web / dev / friendly

Writing Friendly Code

10. Doing that Thing You Do

turnPg(evnt,mrkr) is the main function for the whole Web page. It takes either one or two arguments. The first, evnt, is the value of the page that the user has chosen to display, by clicking a page number or a button in the options bar, or the back and next navigation buttons. The marker(mrkr) is an optional parameter. It is always sent if the button clicked is "back"(1) or "next"(2),and it is sent as 1 on the startup run. 

The marker tells the function which button was clicked. That keeps you from setting the pg value to -10 or +100 by repeating a click on the back and next buttons.  It disables the appropriate button when you are out of range, or for Navigator, it writes "Start" or "End" on the button. Note the empty spaces in the string "End" - when you write a value to the text on a control in Navigator the control doesn't resize to suit the new value. If you write a long string to a button with a short value, some of the new text will get amputated.

pg is the global page tracking variable. It tracks the the value of the current page, which is useful. The reason I assign values to npage and bpage is to prevent the actual page and button values from getting lost in the shuffle. pg is a number, bwot is a number, but npage and bpage are strings. This is one of those areas where it's hard to be sure of your footing. JavaScript is supposed to convert the data as needed, but it doesn't always do so when there is more than simple addition operations between strings and numbers. 

So here, finally, is the value of my n variables. I could not get "npage+(n-1)" to work. Too many operators, NaN. pg +(n-1) is fine, it's all numbers. But since I want to keep pg out of situations where it can be converted to a string, I got "npage + n1" to work as well, straight concatenation, and did the math back in setPg().

After determining what the selected page is, setVis() and btnVis() run through all the pages in the document and make all the pages hidden and their buttons their default values. Then the selected page is made visible and its button is either disabled in IE or written as "Here" in NS.

function turnPage(evnt,mrkr) {
var npage=evnt;
if(mrkr && mrkr==1 && evnt<0)npage=0;
if(mrkr && mrkr==2 && evnt<=0)npage=1;
if(mrkr && mrkr<=2 && evnt>=n3)npage=n3;
pg=npage;
var bpage="btn"+npage;

Make sure to use the correct parameters for the non-numbered pages:

if(evnt==n1)bpage="codebtn";
if(evnt==n2)bpage="forumbtn";
npage=npage.toString();

All this has been to get the correct references for the page and button, plus a marker for the back or next button. Now we hide all the pages and set the buttons to their defaults:

   for (var i=0;i<n;i++){
     btnVis(i);
     setVis(("page"+i),("hidden")); 
   }

And we now make the selected page visible:

setVis(("page"+npage),("visible"));

We have some housekeeping to do in each client. We will disable the selected page button in IE, and if we are at either end, we disable the back or next button. Another thing we take care of here is to clear the tips popup window ("info"). 

   if(brid=="IE"){
     document.all.info.style.visibility="hidden";
     (pg<=0)? document.all.bckbtn.disabled="true" : document.all.bckbtn.disabled="";
     (pg>=(n3))? document.all.nxtbtn.disabled="true" : document.all.nxtbtn.disabled="";
   } 

Navigator needs to do the same, plus some of what IE did in the setPg() function.

   if(brid=="NS"){
     setVis("watermark","visible");

Navigator has to hide the background to display its tips. This puts it back. Then we assign a couple of shortcut names for the next and back buttons. We still have the shotcuts for the Forum and Resource buttons that we made in btnVis().

The info tips in Navigator are written on the fly and thus create a new layer in the layer they are written to. So when we turn a page, we make sure both the layer and its parent are hidden. 

     var nsbb=document.nexter.document.forms[0].bckbtn;
     var nsnb=document.nexter.document.forms[0].nxtbtn;
     document.info.document.moInfo.visibility="hide";
     document.info.visibility="hide";

Next it checks to see if the selected page is one of the outside src pages. If so, it writes "Here" on the button and opens a new window for the content with nwWind(). I played around a lot with getting the src file to load on a layer or an ilayer. That works fine for content you can control, like the info tips, but outside HTML doesn't do very well with positioning in NS. I'm sure Navigator will support the iFrame some day, which is the way to go with content you want to include from an outside file. Or you can always go to a framed page. When we begin discussing the positioning of controls in the second part of this article I'll show some ways to use the layer.src in Navigator, but it got too unwieldy for this project.  Meanwhile, for these two pages, a new window will do. And lastly, we change the text on the back or next button if we've reached the end of the range.

     (npage<(n2)) ? formB[bpage].value="HERE" : formB1[bpage].value="HERE";
       if(!mrkr){
         if(pg==n1)nwWind(1); 
                     if(pg==n2)nwWind(2);
       }
     (pg<=0)? nsbb.value="First " : nsbb.value=" Back ";
     (pg>=(n3))? nsnb.value=" End " : nsnb.value="Next ";
   } 
}

Now control returns to the user. If this was the initial run from setPg() the return goes to setPg().  setPg() uses setVis() on a timer to make the controls and page tab bar visible, and returns to the user. We are almost through the script. There are a couple of event handlers left.

All the Options

Comments are welcome

 


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

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