Building the Imperfect Beast: Part 3 (embedded mission control)
January 19, 1999
The client's original page must contain the embedded code
which "pulls the strings," like a master
of puppets. One of the design constraints imposed by the
client's overall site design was that this code had to
function entirely from within a cell of a table. Not merely
an academic challenge, the reason was that this particular
cell was automatically replicated on each page of the client's
site, and the pop-up menus had to function from
each page on the site without manually adding them in to each
and every page.
All of the mission control code, consequently, fits into a
neat package, rather than being scattered around
the original
HTML.
Only this code is shown below rather than
the entire page into which it fits -- suffice it to
say, all of the code exposed here resides within a single
cell in a table on the original page.
Browser detection: filtering out older browsers
and non-Windows browsers.
<!-- Main Pop Up Code ("mission control") Begins Here,
by Aaron Weiss (aaron@pobox.com) -->
<script language="JavaScript">
if((parseInt
(navigator.appVersion)>=4)&&
(navigator.appVersion.toLowerCase().indexOf('win')>0))
{ popAble=true }
else { popAble=false }
</script>
<script language="JavaScript1.2">
<!-- hide code from non-JS browsers
|
DHTML is only supported in version 4+ browsers but the
client's page must also appear in unenhanced form for
visitors with older browsers. First, then, we must filter
out older browsers from interpreting any of the mission
control code. It was also found that some DHTML techniques
did not work well on the Macintosh platform. Despite
the fact that both browsers are supposed to function nearly
identically across platforms the reality is that there
are many nuanced differences in DHTML behavior on the Windows
platform versus the Macintosh. This client's audience
was overwhelmingly Windows-based, according to the web
server logs, and so the decision was made to disable pop-up
menus for Macintosh computers rather than spend the extra time
and money debugging only for the Mac platform (one
imagines many shrieks of objection at this point ... one covers
ears with hands).
The simple code above sets the global boolean variable
popAble to true if the browser is Windows-based
and version 4 or above; otherwise, popAble will be
false and later code will prevent any of the menus from
appearing in this case.
Defining cross-browser DHTML translations.
function crossBrowser()
{ if (document.all)
{ obj = "popWin.document.all";
posLeft = ".style.pixelLeft";
posTop = ".style.pixelTop";
posWidth = ".clientWidth";
posHeight = ".clientHeight";
visibility = ".style.visibility";
visible = "='visible'";
visible_eng = "visible";
invisible=" = 'hidden'";
invisible_eng = "invisible";
}
else
{ obj = "popWin.document.layers";
posLeft = ".left";
posTop = ".top";
posWidth = ".clip.width";
posHeight = ".clip.height";
visibility = ".visibility";
visible = "='show'";
visible_eng = "show";
invisible = "='hide'";
invisible_eng = "hide";
}
clearPop = 0;
opentopic = null;
}
|
The familiar face of crossBrowser() should ring
a reminiscent bell. As seen similarly in popups.html,
this function's main purpose is to
define a translation syntax
to aid in cross-browser
DHTML. This instance of the crossBrowser() function
doesn't contain exactly the same set of terms but the
concept is the same. Ultimately, these terms will be used
to help hide and show the appropriate menus inside the
spawned menu window. Towards the end of this function we
also initialize some global variables used for keeping
track of various things in later code (dismissing the
pop-up window and passing topic names between functions).
Building the HTML
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Action Hero
|
