Writing Friendly Code - Part 2, Naming | WebReference

Writing Friendly Code - Part 2, Naming

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

The Clockwise Box (Names and Numbers)

Naming things is the most important thing you will do on any code application. It helps to name groups of similar things so they can be manipulated in arrays. For instance, I have a set of containers I call pages that are all absolutely positioned divs. Their orientation and dimensions are all identical, so I define all these attributes in the style sheet for the page class. Their individual ids are "page1", "page2", and so on. The containers are set up like this:

<div class="pageClass" id="page1">
content goes here
</div>

In my style sheet I set up all my specifics for the pageClass in one swoop:

.pageClass{ position:absolute; visibility:hidden; z-index:2; left:55; top:35; width:590; height:365; clip:rect(0 590 365 0); font-weight:bold; padding:0}

 

When I need to do something to all of the pages, I can run through them all in a for loop. This sequence hides all the pages, n being 1 more than the number of pages:

for(var i=0;i<n; i++) {
(brid=="NS") ? wotpage=document["page"+i] : wotpage=document.all["page"+i];
(brid=="NS") ? wotpage.visibility="hide" : wotpage.style.visibility="hidden";
}

/*.*/

First I get the document object for the detected browser, then I set the visibility property. In Navigator this is the visibility property of the named layer, in IE it is the visibility property of the style of the named member of the document.all collection.

This naming convention came in handy when I realized that there could be a varying number of pages from month to month. I decided to let the script count the instances of things that have the word "page" in their id. In IE the collection you work with is document.all.srcIndex; in Netscape you can search the name attribute of the document.layers collection. I used the same scheme to set up the page number buttons in the tab bar. You can refer to Part 1 if you want all the gritty details.

 

 

Style Rules  Next Page

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

Comments are welcome

 



URL: http://webreference.com/dev/clockwise/clockwise7.html