Writing Friendly Code - Part 2, HTML | WebReference

Writing Friendly Code - Part 2, HTML

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

The Clockwise Box (Friendly HTML)

The things I need containers for are the toolbars, the info popup tips, and the pages. All the containers get absolute positioning. Everything that is absolute positioned gets a class and an id. In keeping with writing for the script unabled, I put the all of the content first, before any of the "control" elements. The template could hardly be simpler:

<body >
<!-- cover page -->
<div class="pageClass" id="page0" >
<h2 >Practical Internet Code</h2>
This is the content for the cover page.
</div>
<!-- This is where the changing content goes-->
<div class="pageClass" id="page1">
This is any ordinary text and HTML.
</div>

<div class="pageClass" id="page2">
This is any ordinary text and HTML.
</div>

<!-- New pages are added easily, either manually or with a bit of code. -->

The next part of the HTML defines two special pages. This allows me to bring in a couple of regular features for the newsletter that live at their own URLs. Note they are both in "pageClass" containers, so they will have the same position and styles that the rest of the newsletter's content has. Their generic ids are made to equal "page"+ n-1 or n-2 when the page loads and the script runs.

The iframe is a W3C tag, although Microsoft's implementation is not up to the standard yet. (Though they have addressed some of its shortcomings in their version for Windows 2000). Netscape so far doesn't even see the iframe tag, but you can set a src property for any layer, so I wrote it in the code for the script. Writing to a layer destroys the old layer, so you have to rewrite the style rules when you rewrite a layer. For the scriptless, I include ordinary links in the "noClass" style, which is set to "display:none" by the style sheet. Thus they are invisible for those that have the right stuff.


<div class="pageClass" id="pageX" >
<h3>Feedback- Send us Your Questions and Comments</h3>
<div class="noClass"><a href="ywforum.htm">Forum</a></div>
<iframe id="formSrc" src="ywforum.htm"></iframe>
</div>
<div class="pageClass" id="pageY">
<h3>Source Code</h3>
<div class="noClass"><a href="ywcss.htm">Forum</a></div>
<iframe id="codeSrc" src="ywcss.htm">
</iframe>
</div>

The block for the informative pop up tips is a little different - I wanted to position them relative to the page they appear on, so I contained an "inner" container. This "moinfo" guy gets his size and position, as well as the content set from script when the tips are called from a page.


<!-- help and tips block-->
<div class="pageClass" id="info" >
<h3 >Help</h3>
<div class="innerClass" id="moInfo" >
</div>
</div>

After all this I write the navigation and option toolbar containers. There are four separate toolbars. I made the controls all div wrapped forms containing elements of "type=button". This was the simplest context that would allow me to change the text or behavior of the controls in both version 4 browsers. Each toolbar is in its own form and each form's action attribute is set to "return false". Here is a good spot for finesse - IE 3 and Navigator 3 return silently from any of the script calls. All the functions called from elements on the page have the line:

if(brid=="")return;

So if a script-deprived visitor has got to the end of the newsletter and clicks a form button, nothing happens. Most likely with a bit more effort I could have come up with workarounds for Navigator 3, and maybe even for IE3. But, as the Queen of France said about the less fortunate of her time, "let them read text."

Speaking of the controls:

First are the page tabs, a row of buttons across the top for quick navigation. This can be edited as the number of pages varies between issues:


<div id="tabBar" class="tabClass">
<form name="turner" action="return false">
<input type="button" class="btn" name="btn0" value="Cover" onclick="turnPage(0)">
<input type="button" class="btn" name="btn1" value="Pg. 1" onclick="turnPage(1)">
<input type="button" class="btn" name="btn2" value="Pg. 2" onclick="turnPage(2)">
<input type="button" class="btn" name="btn3" value="Pg. 3" onclick="turnPage(3)">
</form>
</div>

The next is an on-off switch for the options bar. When clicked it disappears and the options bar is made visible at the bottom of the page. The options bar has a "hide" button that does the same code in reverse. See Part 1 for more on the script that gets called from these onclick events.

<div id="optins" class="toolClass">
<form action="return false">
<input type="button" class="btn" name="optbtn" value="Options" onclick="shoOpts(this.value)">
</form>
</div>

The options bar:


<div class="toolClass" id="toolBox">
<form action="return false">
<input type="button" class="btn" name="optbtn1" value="Hide Tabs" onclick="shoOpts(this.value)" >
<input type="button" class="btn" name="btn8" value="Forum" onclick="turnPage(n2)">
<input type="button" class="btn" name="btn9" value="Code" onclick="turnPage(n1)">
<input type="button" class="btn" name="optbtn7" value="Resize" onclick="inform(4)">
<input type="button" class="btn" name="optbtn8" value="Hide" onclick="shoOpts(this.value)">
<input type="button" class="btn" name="optbtn4" value="Help" onclick="inform(3)" >
</form>
</div>

And finally, back and next buttons that are always visible, located at the lower right of the screen:.



<div class="toolClass" id="nexter">
<form action="return false">
<input type="button" class="btn" name="bckbtn" value="Back" onclick="turnPage(pg-1,1)">
<input type="button" class="btn" name="nxtbtn" value="Next" onclick="turnPage(pg+1,2)">
</form>
</div>

 

 

Last Words  Next Page

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word 

Comments are welcome

 



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