Base Web Files

Welcome. This is meant to describe some of the base files that this site is probably likely to reference on pages from multiple distinct sections of the web page.

Below a description of the various components, some sample HTML for these base technologies is available.

Controls

Sections of the JavaScript tree can be expanded (by clicking on plus signs) and collapsed (by clicking on minus signs). The following controls are JavaScript links to help web browsers collapse and/or expand the definition list tree to specific specified amounts:

The LinkNav (with LinkNav Fix) JavaScript may cause a widget to appear in the upper-right corner.

JavaScript
[#dttag]: DT Tag
[#dttagexm]: Example

If the DT Tag JavaScript is being used, the “definitions” in lists may be collapsed, allowing easier navigation from one part of a tree outline to a different, unrelated section. The page has “partial expansion” controls that can be used, and which are used by default if the browser is not expecting to visit an anchor when the page loads. With this default partial expansion, specific pre-selected page sections of likely interest open up for quicker access, while other sections remain collapsed for quicker navigation to other sections. For example, the “instructions” section is short (when it is not further expanded) and so it is expanded one level by default, so its contents can easily be viewed. However, the DT Tag: Status section, which is more verbose, is collapsed so that it doesn't take up a lot of viewing area for people who are more interested in skipping over that section and reading about other JavaScript files on this page.

Expanding an ancestor element doesn't result in the browser losing track of which descendents were previously visible before any earlier collapse of the ancestor.

The example sub-lists have been commented out of this page. Later sections of this page, such as the example code, service as a real-life example of deeply nested definition lists and so they can be used for testing. (The example code was, in fact, needlessly broken up into multiple sections for the clear purpose of being more deeply nested so it could serve as an example of a deeply nested definition list.)

Impact of named anchors

If an anchor tag's “NAME” attribute is specified in the web browser's address bar (e.g. file://filename.htm#shortcut), it would be ideal if the definition list containing that tag, and all parents, were automatically expanded so the referenced anchor starts out being visible. To have the definition list containing that named anchor be the only definition list that gets special treatment (being expanded when it is normally collapsed) would involve the code needing to figure out what definition list the specified named anchor is in. To implement something more sensible more quickly, code was added to make it so that any named anchor causes all definition lists to be expanded. Specifying an anchor (such as #start) will lead to web browsers putting to focus at the top of the page if the specified named anchor does not exist or if it is at the top of the page, and will cause the lists to be expanded. (Specifying just a # may cause the browser to put the focus on the page but to not have the referenced anchor be noticable via the Javascript check, and not cause the lists to be expanded.)

Licensing information
See the comments inside the dttag.js file. It is free for personal, non-commercial use.
[#dttagins]: Installation Instructions
Simplest using of DT Tag as a webmaster

This was made to be intentionally easy. Basically, the requirements on the webmaster are the fewest possible that perform the technical necessities:

Make the JavaScript available to the web browser
A simple SCRIPT tag causes this
Run the JavaScript code
This can be done simply with hyperlinks, in order to test things out. Ultimately, it may be nicer to have JavaScript code, including DT Tag, be run automatically when the page loads.
Example
Example code
Overview

The following loads DTTag and LinkNav. (Please respect licensing information, and customize the page references such as properly identifying the Copyright page.)

Code for the beginning of a web page
<HTML><HEAD><TITLE>Page title</TITLE>
<LINK REL="stylesheet" HREF="http://toogam.com/base/css/toogcmv3/toogcmv3.css"
   type="text/css" />
 <LINK REL="stylesheet"
   HREF="http://cyberpillar.com/dirsver/1/mainsite/base/css/dttagclr.css"
   type="text/css" />
<LINK REL="stylesheet" HREF="http://toogam.com/base/css/linknav.css"
 TYPE="text/css">
<LINK REL="Copyright" HREF="about:blank" />
 <LINK REL="Start" HREF="./index.htm" />
 <LINK REL="Previous" HREF="./index.htm" />
<SCRIPT LANGUAGE="JavaScript" SRC="http://toogam.com/base/js/linknav/linknav.js"
 TYPE="text/javascript"></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript" SRC="http://toogam.com/base/js/dttag/dttag.js"
 TYPE="text/javascript"></SCRIPT><SCRIPT LANGUAGE="JavaScript"
 SRC="http://toogam.com/base/js/linknav/lnknavfx.js"
 TYPE="text/javascript"></SCRIPT>
<SCRIPT Language="JavaScript"><!--
 window.onload= function(){
initem();//DTTag: Initialize HTML tags on definition tags
if(typeof(window.buildLinkNav)=="function")
buildLinkNav();//LinkNav
if(typeof(window.linkNavFix)=="function")
linkNavFix();//Modifies LinkNav (lnknavfx.js)
expandIfURLHasAnchor();//From DTTag.js
}//-->
 </SCRIPT>
<STYLE><!--
  /* More custom CSS can go here.  (Some CSS is in CSS file(s) LINKed above.)*/
 //-->
 </STYLE>
</HEAD>
 <BODY>
Code for the end of the web page
</BODY></HTML>
[#ifuseexm]: Impacts if using the example

Using window.onload will cause the code to be loaded only after the entire body is loaded. If the web browser continues to load the page indefinitely, which may happen if there is a missing file (with a file:// reference), the window.onload may not run. This can likely to worked around by creating a more standard function and then placing an additional JavaScript tag when all the other content is loaded, so just before the </BODY> and </HTML> tags.

Having web pages run the initialization script can be a bit distracting if content, which the user is trying to view, collapses out of view (even if only temporarily before it is re-expanded) or is scrolled out of view due to other content that is collapsing.

Different web browsers may process the definition lists at different speeds. Therefore, testing the experience in one web browser (like Firefox 2) may make things seem much better than how the content ends up getting displayed in another web browser (such as MS IE 7). Having large definition lists (with dozens and dozens of items) may take well over ten and perhaps even thirty seconds even if the HTML file is loaded quickly. Any use of the hideem() function can therefore be quite distracting.

It is possible that some of this may be improved with different code, such as if initem() becomes enhanced to try to be more graceful with a BODY that isn't yet done loading. However, this does describe some potential experience with the current state of things.

Intermediate: Interacting with JavaScript
Warning on multi-threading

The changeem() function (and any other function that simply calls changeem() and exits without checking changeem()) might not be complete when the function exits. This is intentionally done to improve browser responsiveness (by breaking changeem() up into pieces) and because JavaScript's while command should not wait on the results of a setTimeout (or else the thread with the while command may hog up the CPU time allocated to the JavaScript processing, and not allow the other code which setTimeout runs to ever be able to run and complete.)

After calling changeem(), do not expect that the function is compete until isChangeEmDone() indicates that it is complete. For example, calling changeem() multiple times could cause an earlier, more elaborate changeem() process (perhaps one affecting more list elements) to complete after a later, simpler call. The end result of what is showing and what is not showing may be something other than desired.

Partial expanding

For now, all parents must be expanded in order for a child to be visibly expanded when the page begins. The code could be modified to automatically expand any ancenstors whenever a child is expanded. However, unless that was made into an option, that would limit possibilities. For example, on this page, expanding the “Example code” will cause some sections, like the Overview, to be expanded while the larger section of code remains collapsed. This may or may not have really good uses, but as this page shows, the capability for such hidden sub-expansions does exist.

A wrapper function expnamed() has been made. See example of partexp() in this HTML file for an example of how to use expnamed().

Although manually naming DT elements is not necessary just to implement basic expandability, manually naming DT elements is highly recommended as an easy to way reference what gets expanded and what doesn't. If the tags are not manually named, they can be expanded partially if they are properly referenced, but referencing the tags may be more difficult if they aren't given manually-assigned names.

[#DTTagSts]: Current status

Thoughts/plans:

  • This probably shouldn't be version 1.0 yet, although some basic functionality exists.
    • The following may be referencing a bug that has now been squashed. In expnamed(), the passed “generation count” variable only seems to be working right for the highest ancestors. Further, expnamed() seems to require that parents be called before children. (Perhaps calling expnamed() to have it work on a parent is causing an effect that causes behavior to be different later when expnamed() is called to work on the children of that parent.)
    • It might be nice for 1.0 to support more elements (like UL, OL). I believe that was my original intent. I just happened to start with definition lists first. Deciding how to collapse and uncollapse such things may be necessary: With the multi-part definition lists this is implemented by putting controls in the DT which is visible even when the DD is collapsed.
      • Note: Collaspablity of UL and OL lists might be provided by W3C's Slidy2. See: Slidy2 Presentation: Slide #10 for an example and some details on how to use that functionality. However, this may require a bit more customization for pre-existing lists, as the lists may need to use a class called "outline". (Also, the functionality is likely integrated into Slidy, which has other impacts on a document.) Also, this doesn't work by MS IE 6 due to a lack of support for the “:hover” functionality. For these reasons, adding such support into this library could still be a bit nice. For further details on implementing Slidy2, see the relevant details at web-based slideshow implementations on ][Cyber Pillar][.
  • I should have some sort of example code that shows this branching out 2 or 3 levels deep. (This is now done, but a more elaborate tutorial or other guide, nicer than just an example, may be nicer.)
    • If this can be simply done, it may be good to allow end users (web site visitors, not just webmasters) to expand sub-trees at their discretion. This means allowing users to expand not just one definition list (DL) definition (DD), but some amount (such as “all”) sub-definition lists.
    • If I find there isn't an easy, sensible way to do this (without cluttering the screen with large user controls, like a text box to input how deep to expand which would be easy but might be controls that are needlessly large and might not often be used) then it would be nice to at least let webmasters build their own controls (meaning hyperlinks that run code which expands in certain ways that webmasters choose). If I go that route, I should document a nice path for this.
    • Have a function that can return how deeply nested a tree is. That way, generationcnt can be based on a variable which is calculated, instead of being hard coded. This way one can surround an existing DL with another DL and not have to worry about re-coding a generationcnt value used for a partial list expansion.
  • It may be nice to allow rename functions so they look DT Tag specific. This way, a generic-sounding name that could have other uses, like initem() (to initialize them, where the undefined pronoun refers to the lists) and hideem() (to hide 'em) can be used in other functions.
  • Perhaps it would be nice to allow the visible user controls (and perhaps the entire functionaly of DT tag) to be restricted to only some of the supported lists, like only the second and third definition list (but not the first one). I don't see this as being extremely necessary, but it shouldn't complicate existing code by much and would give webmasters a bit more flexibility in the look of the page for a case where the visible controls don't have to be an all-or-nothing type deal. Note that useful detection of whether initem() is done might be complicated if multiple sections are being individually initialized.
Known issues/problems
  • If an anchor is visited, but that anchor is invisible, that may not make a lot of sense. In Firefox 3, the reference to the anchor seems to be ignored if the anchor is not visible. For example, when viewing a page, adding an anchor has no effect if the anchor is set to display:none instead of display:block. One solution is used in this HTML file: The #lnknavfx anchor has an effect because showem() is used if an anchor is used. (See the references in the web page's JavaScript to window.location.hash.)
  • Other issues/problems have been addressed as the code has been developed. For more, see the “DT Tag” Current Status.
  • See also if using the example code.
  • DTTag may not work as quickly with some browsers compared to how quickly it works with other browsers. The truth of this may be substantially noticable. For instance, loading the page may cause a substantial amount of resizing, resulting in the page's scroll bar to behave a bit odd (because it is busy re-drawing itself according to the latest page size). This may be more noticable with a page that has dozens (and dozens) of tags, and was quite noticable with MS IE 7.0 (but not Firefox). Testing under multiple browsers is generally recommended, and realize that over-use of this script on a single page may result in a noticable performance hit.
[#linknav]: LinkNav
LinkNav Overview

Brian Lalonde's LinkNav file uses both JavaScript and CSS.

LinkNav causes the upper-right corner to show a widget with hyperlinks allowing easy access to web pages that are specified by some standard HTML code that some popular browsers do not support. However, the <LINK> tag is considered standard HTML and other web browsers do support the tag. This allows for an easy way for a web master to provide benefit for supporting browsers while making the efforts usable by those using other browsers that support JavaScript but provide very low (and quite possibly no) support for this tag.

Redistribution is permitted according to the license specified in the files.

Added/changed code

[#lnknavfx]: The lnknavfx.js adds support for browsers that don't support :hover (such as MS IE 5.5) and shows how one can remove a reference to the linknav download site (which is done not to resist giving credit to the site, but rather just to make the widget smaller). No changes are needed to be made to the linknav.js or linknav.css file: just include this file as well. This LnkNavFx (LinkNav Fix) code is licensed for distribution with the same permissions granted by the LinkNav's license. (This is a simple script, and ideally the license would be this simple three word license: “No rights reserved.” However, LinkNav's license's “Share Alike” clause is more restrictive.)

Possible additions/changes that may be made: Add/document support for creating a custom footer, supporting title elements of LINK tags (as used by FGA: Providing "split horizon" DNS service as an example).

Some future JavaScript controls

Coming... I wouldn't say coming soon, because these might take some time before it is launched.

Controls for multimedia codecs

Controls over embedded files, notably multimedia files such as music and movies, is something that TOOGAM is very likely to include on this site at some point in time.

Such supporting code does exist: some code had been developed to support multiple plug-ins (such as QuickTime and Windows Media Player) and browsers (including Microsoft Internet Explorer and Netscape Navigator), although the code was developed before Firefox. Making sure the code works okay with newer browsers is likely to be done before public release. Also, testing with mozplugger and Timidity is likely to be done as well.

The code used cookies to save preferences, so users could save whether they preferred one codec over another. (There may be various reasons for this: speed issues, cosmetics, or even how the output is played, which can be dramatically different quality with MIDI files.) There were plans (although this might not have been implemented yet) to allow the user to pick a task, such as picking a background music, and having it play uninterrupted as the user went from one web page to another. (This was done with an additional window, such as a legitimate and useful and non-intrusive use of a pop-under that would politely close when the main web page was left. This might not commonly work as well now that browsers have become more aggresive against less user-favorable usage of pop-up technologies.)

Speech in the web browser

Another cool feature that was working was SAPI: having web pages speak to users. This began to work less well as unsigned ActiveX controls became less runnable, but there may be some potential in having this be released yet.

CSS / etc.
LinkNav, LinkNavFix

See LinkNav in the JavaScript section.

CSS for TOOGAM.com

This is not included here for the intentions of recommending that others use it (in its current state). Instead, the reason this file is being mentioned is simply so that another file, that is used by this web page, is being publicly documented and made available.

This may be updated quite a bit before being recommended for widespread use. Counting on its contents is currently not a recommended practice.

This was initially named the “CSS for Operating System Installer Guide”. This was named after a guide that TOOGAM started working on. However, that guide has since evolved into a website called Cyber Pillar.

[#DTAsamph]: Sample Base HTML

Start with something like this:

<HTML><HEAD><TITLE>...</TITLE>
<!-- 01234567890123456789012345678901234567890123456789012345678901234567890123456789
 01234567890123456789012345678901234567890123456789012345678901234567890123456789ExtraLong
 -->
<!-- MOTW http://msdn.microsoft.com/en-us/library/ms537628%28VS.85%29.aspx -->
 <!-- saved from url=(0014)about:internet -->
 <!-- DISABLED COMMENT saved from url=(0016)http://localhost -->
<LINK REL="stylesheet"
   HREF="http://toogam.com/base/css/toogcmv3/toogcmv3.css"
   type="text/css" />
 <LINK REL="stylesheet"
   HREF="http://cyberpillar.com/dirsver/1/mainsite/base/css/dttagclr.css"
   type="text/css" />
 <LINK REL="stylesheet" HREF="http://toogam.com/base/css/linknav.css"
   TYPE="text/css">
<LINK REL="Copyright" HREF="../copyrite.htm" />
 <LINK REL="Start" HREF="../mainpage.htm" />
 <LINK REL="Previous" HREF="../mainpage.htm" />
<LINK REL="shortcut icon" type="image/icon"
   HREF="../filename.ico">
 <LINK REL="icon" type="image/icon"
   HREF="../filename.ico">
<SCRIPT LANGUAGE="JavaScript"
   SRC="http://toogam.com/base/js/linknav/linknav.js"
   TYPE="text/javascript"></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript"
   SRC="http://toogam.com/base/js/dttag/dttag.js"
   TYPE="text/javascript"></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript"
   SRC="http://toogam.com/base/js/linknav/lnknavfx.js"
   TYPE="text/javascript"></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript"
   SRC="http://toogam.com/base/js/stdonld/stdonld2/stdonld2.js"
   TYPE="text/javascript"></SCRIPT>
 <SCRIPT LANGUAGE="JavaScript" SRC="http://www.google.com/jsapi"
   TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"
   SRC="http://toogam.com/base/js/basesmpl/v1/basesmv1.js"
   TYPE="text/javascript"></SCRIPT>
  <SCRIPT Language="JavaScript"><!--
  window.onload=onPageOK;
//-->
 </SCRIPT>
   <SCRIPT Language="JavaScript"><!--
  // sample -- Custom JavaScript code can be inserted here
  // When the page loads, onload is set to run onPageOK which will
   // do some standard actions. This onPageOK function will check if
   // there is a function named whenPageIsLoaded and, if that function
   // does exist, then it will be run. This can be easily used to have
   // custom code be automatically started after the page is fully
   // downloaded.
  // e.g., to tabularize:
  function whenPageIsLoaded()
   {  if(!gbDidStartDDtoTbl)
       ddtotbl();
   }
//-->
</SCRIPT>
<STYLE><!--
    /* More custom CSS can go here. (Some is in base/css/toogcmv3/toogcmv3.css LINKed above*/
   //--> </STYLE>
</HEAD><BODY>

Be sure to also have a matching </BODY></HTML>

Customize as desired: