|
|
 |
 |
 Events
Jobs
Premium Services
Media Kit
Network Map
E-mail Offers
Vendor Solutions
Webcasts
|
|
|
[
Home | Discussion Forum | How Do I... |
Lotus Notes Intranets |
Microsoft SharePoint |
Products |
Shopping
]
Simple Hybrids If we choose not to maintain two separate and distinct versions of our pages, we're necessarily looking at a hybrid. A hybrid is a page whose code contains contingencies for either browser. In this way, either browser can load the same page. This doesn't mean that all of the code within is executed by both browsers; rather, using one or more approaches we construct the code such that the relevant bits are executed by the appropriate browser. Let's consider an example. Suppose your page contains a block of content, typically created by using <DIV> tags: <DIV ID="title" STYLE="position:absolute; top:10px; left:100px; width:150px;"> <P STYLE="font-family:Arial; font-weight:bold; color:red;"> Welcome to my World </P> </DIV> Now let's suppose that you want to change the background color of this content block. Knowing the differing DOM's for each browser, we know that the background color property for a content block is part of the layer object in Netscape but part of the style object in Microsoft. Furthermore, the background color property is named bgColor in Netscape yet backgroundColor in Microsoft. The simplest way to hybridize these differences into JavaScript code is to use the mini-fork: <SCRIPT LANGUAGE="JavaScript1.2">
if (document.all) //only Microsoft 4/5 supports the "all" array
{document.all["title"].style.backgroundColor="black"}
else //only Netscape supports the "layers" array
{ if (document.layers) {document.layers["title"].bgColor=
"black"} }
</SCRIPT><
/FONT>
Conceptually, this mini-fork operated on the same principle as the top-level fork we saw earlier. The line if (document.all) is a browser test of sorts; actually, known as an object test. We know that Internet Explorer supports the all array, and so we test for it as a conditional for MSIE. If the conditional code rules out MSIE, we can probably assume Netscape; but, just to be safe, we test for the presence of the layers collection (which is unique to Netscape) before execute the Netscape-specific syntax. We can also assume that a browser that has reached this script does support one variety of DHTML, otherwise it would have been weeded out at an earlier stage. Thus, if the browser does not support the all object (the else clause in this example), it is likely Netscape (since that is the only other DHTML browser), and we can use Netscape syntax in our statement. Ultimately, the script above will change the content block's background to black, using the appropriate syntax for the browser being used. This is a hybrid. Although still a coarse solution, hybridizing your code to cover both browser scenarios will likely play an integral role in many cross-browser DHTML pages. Nonetheless, such hybrid code is not yet the height of elegance. You are still essentially maintaining two independent versions of the page, but simply threading them together in one file with logic code to tease them apart. If you wanted to modify your page so that the background color was instead changed to green you would still have to update this data in two places -- the Microsoft-syntax statement and the Netscape-syntax statement, albeit within the same file. To reduce duplication of data, we could use variables rather than explicit literals to contain style data -- for example, in the variation below, we assign the value "black" to a JavaScript variable, which itself is used within the hybrid code. This way, if we decided to prefer a green background, we need only change one line of code: <SCRIPT LANGUAGE="JavaScript1.2"> bgColorStyle="black"; //change this to change layer |
|
