sample chapter

Professional ASP web techniques

Creating Browser-Specific Pages In some cases, especially with complex pages that take advantage of the latest features in modern browsers, it becomes very difficult to create pages that work properly on all versions. In this case, an easier option is to build separate pages for each 'group' of browsers you intend to support. By a group, we mean browsers that are relatively similar in their feature set. The four obvious groups are:

q Non-script enabled browsers (generally version 1.x releases)

q Early script-enabled browsers (Navigator 2 and 3, and IE3)

q Navigator 4 and above

q Internet Explorer 4 and above

You may decide to combine these into two or three groups, depending on the features you use. In general, with the increasing take-up of the two version 4 and version 5 browsers, you may decide to provide a simple page for all version 3.x browsers and below, and then individual pages for Navigator 4+ and IE4+.

Browser-Specific Pages And Redirection Of course, if we're creating different pages for different browsers, we need to redirect the browser to the appropriate page. We can do this client-side, using script, or on the server with ASP. We covered redirection techniques in some depth back in Chapter 2, and we've seen browser detection methods earlier in this chapter. It just remains to combine the two.

Browser-Specific Page Redirection On The Client If we want to use Dynamic HTML, for example, we can create a page each for Navigator 4+ and IE4+, and one for the version 3 browsers, which uses more generic (non-Dynamic HTML) techniques. Then we can redirect our visitors to the appropriate page automatically from our default page:

...

<!--

if (navigator.appName.indexOf('Netscape') != -1)

if (navigator.appVersion.substr(0, 1) > 3)

window.location.href = 'nav_dhtml.htm'

else

window.location.href = 'v3_with_script.htm';

if (navigator.appName.indexOf('Microsoft') != -1)

if (navigator.appVersion.substr(0, 1) > 3)

window.location.href = 'ie_dhtml.htm'

else

window.location.href = 'v3_with_script.htm';

//-->

</SCRIPT>

<P>Welcome to our site</P>

...

</NOSCRIPT>

...

Remember that the expression navigator.appVersion.substr(0, 1) will return 4 for Internet Explorer 5.x, and not 5 as you might expect. This is the version of Mozilla that it is compatible with. To get the 'real' version number, use:

intPos = navigator.appVersion.indexOf('MSIE') + 5

strVersion = navigator.appVersion.substr(intPos, 1)

Browser-Specific Page Redirection On The Server And of course, we can do the same on the server in ASP. This is neater, because the user won't see the default page being loaded first, followed by the appropriate page that their browser supports. In this next example, we're using the Microsoft Browser Capabilities component, but you could do the same with plain script, or use something like BrowserHawk instead:

...

Set objBCap = Server.CreateObject("MSWC.BrowserType")

If objBCap.Browser = "IE" And CInt(objBCap.Version) >= 4 Then

Response.Clear

Response.Redirect "ie_dhtml.htm"

ElseIf objBCap.Browser = "Netscape" And CInt(objBCap.Version) >= 4 Then

Response.Clear

Response.Redirect "nav_dhtml.htm"

ElseIf objBCap.javascript = True Then

Response.Clear

Response.Redirect "v3_with_script.htm"

End If

<HTML>

...

<P>Welcome to our site</P>

...

Dynamic HTML In Navigator 4 And IE4/5 The ability of the version 4 browsers to use a new technique called Dynamic HTML (DHTML) was hailed as a major advance in browser development when it first appeared. However, in reality, it has just added another headache to the Web developer's list of migraine-inducing problems. Unfortunately, Netscape and Microsoft were unable to provide a compatible version, so to get anything more than trivial effects using DHTML means developing two sets of code – one for each browser.

However, there are times when you do want to take advantage of DHTML in your pages, and it comes down to a decision. Do you support one browser, or spend the extra time developing two sets of pages? And, if you decide to support both browsers, how do you get the right page to the right one?

Building Browser-Compatible Interactive Pages We provide a simple page that helps developers to choose text and background colors by displaying them in the browser. Rather than re-loading the page each time, and using ASP to set the colors, we chose to use DHTML and do all the work on the client. It's only possible in version 4 or better browsers, because others don't allow you to change the background color without re-loading the page.

Loading The Appropriate Page The first step, then, is to decide which page to send to our user, depending on which browser they are using. The 'start' page for our Color-Chooser application is color_choose.htm, shown below:

<HTML>

<HEAD><TITLE> Loading, please wait </TITLE></HEAD>

<BODY>

<!--

// Get the manufacturer and version information

manufacturer = navigator.appName;

version = navigator.appVersion;

// Look for Navigator 4+

if (manufacturer.indexOf('Netscape') >= 0) {

if (version.substr(0, 1) > 3)

window.location.href = 'nncolors.htm'

else

document.write('Your browser can\'t run our Color-Chooser page.');

}

// Look for Internet Explorer 4+

if (manufacturer.indexOf('Microsoft') >= 0) {

if (version.substr(0, 1) > 3)

window.location.href = 'iecolors.htm'

else

document.write('Your browser can\'t run our Color-Chooser page.');

}

//-->

</SCRIPT>

Your browser can't run our Color-Chooser page.

</NOSCRIPT>

</BODY>

</HTML>

You can see that we use simple client-side script code to discover if we are running under Navigator 4+ or IE4+, and then load the appropriate page by changing the href property of the browser's location object. If the browser doesn't support scripting, or isn't Navigator 4+ or IE4+, we just display a suitable message.

The Common Color-Chooser Page Content Both the iecolors.htm and nncolors.htm pages contain a set of simple HTML controls that allow the user to select a color for the background or foreground from one of three drop-down lists. The lists show the colors sorted in different ways; alphabetically, by color group, and by color depth:

The outline of this 'control section' is shown below. You'll find all the pages for the Color-Chooser in the samples for this book that you can download from http://www.wrox/com/:

<HTML>

<HEAD><TITLE>The Wrox Color Chooser</TITLE></HEAD>

<FORM>

<TR>

<FONT COLOR="#FF0000"><H3>The Wrox Color Chooser</H3></FONT>

</TD>

</TR>

<TR>

<TD ALIGN="CENTER"><FONT COLOR="#000000">Colors by Name:</FONT></TD>

<OPTION>> Select a color here

<OPTION>aliceblue

<OPTION>antiquewhite

...

... etc

...

</SELECT>

</TD>

<FONT COLOR="#000000">Foreground</FONT>

</TD>

<FONT COLOR="#000000">Background</FONT>

</TD>

</TR>

...

... repeated for the other two <SELECT> lists

... with the colors in the appropriate order

...

<TR>

<FONT COLOR="000000">Equivalent numeric color values: </FONT>

</TD>

</TR>

</TABLE>

</FORM>

...

... browser-specific HTML and <SCRIPT> section goes here

...

</BODY>

</HTML>

Each of the three SELECT lists and radio buttons calls a function named ChangeColor when they are changed or clicked, and they pass to the function the index of the SELECT list on the FORM. The first one passes the value 0, the second one the value 3, and the third one the value 6. At the end of the listing above are the two text boxes that will be dynamically updated to show the actual numeric value of the color as a hexadecimal number suitable for use in your browser-compatible pages.

The IE-Specific Color-Chooser Page Content In the IE-specific Color Chooser page, iecolors.htm, we place some sample text that will show how the combination of colors looks in the browser, and then add a <SCRIPT> section containing the ChangeColor function that does all the work. In IE4 and above, we can freely change the foreground (text) and background colors of a page by simply changing the DHTML fgColor and bgColor properties of the HTML document object.

So, the first step is to collect the selected color name from the list that was changed, or the one for which the Foreground or Background option button was clicked. Remember that the function is called with an argument that is the index of the appropriate <SELECT> list on the <FORM>:

...

<H3 >Select the Colors for the Background and Foreground<BR>

of this page in the Lists above, to see what they look like.</H3>

If your browser does not support the color, you may get white instead.

</CENTER>

function ChangeColor(listnumber) {

thisform = document.forms[0];

thislist = thisform.elements[listnumber];

thisindex = thislist.selectedIndex;

thiscolor = thislist.options[thisindex].text;

...

If the selection starts with '>', we can ignore it. These are just the instructions or placeholders in the select list (that is, '> Select a color here'). Otherwise, we check to see which of the option buttons was checked: if it is the Foreground one (listnumber + 1), we assign the selected color to the fgColor property; or else we assign it to the bgColor property:

...

if (thiscolor.indexOf('>') == -1) {

if (thisform.elements[listnumber + 1].checked)

document.fgColor = thiscolor

else

document.bgColor = thiscolor;

thisform.elements['txtFG'].value = 'Foreground: '

+ document.fgColor.toUpperCase();

thisform.elements['txtBG'].value = 'Background: '

+ document.bgColor.toUpperCase();

}

</SCRIPT>

The last two lines of the code then read back the values of the document's fgColor and bgColor properties, and assigns them to the value properties of the two text boxes. The color property returns the color as a hexadecimal lower-case number, so we convert it to the more usual upper-case format on the way.

The Navigator-Specific Color-Chooser Page Content The code required to make the page work is quite simple in IE4+, but unfortunately, to replicate the functionality in Navigator 4+, we have to do a lot more work. The problem is that Navigator doesn't update the foreground (text) color of a page while it is loaded, so we have to find another way to display the changes.

The Navigator-specific Color Chooser page, named nncolor.htm, uses the DHTML <LAYER> element that was introduced in Navigator 4. The idea is that we will display the text in a document that is within a <LAYER> element, and then use the HTML TEXT attribute of the layer's <BODY> element to set the appropriate foreground color.

When the page is first loaded, we can create the <LAYER> element and put the text in it that will change color:

...

<H3>Select the Colors for the Background and Foreground<BR>

of this page in the Lists above, to see what they look like.</H3>

If your browser does not support the color, you may get white instead.

</LAYER>

...

However, that's not the only problem. We can't read back the color of the text either. It doesn't expose a property that we can 'get at' in our code. However, the background color does, so we create a hidden layer as well (in this case an <ILAYER> element), and use it simply to retrieve the hexadecimal equivalent of the color name. We do this by setting its background color to the selected foreground (text) color, and then reading it back. As it's hidden, the user won't see this happening:

...

</BODY>

</ILAYER>

...

Next comes our <SCRIPT> section. Obviously this is going to be more complex than the IE page, because we have a lot more to do. So, we have a separate function named ChangeTextLayer that accepts a foreground color, displays the text in that color, and sets the background of the hidden layer to that color as well. To display the text in the selected color, we have to write it to the document object that resides within the <LAYER> element:

...

function ChangeTextLayer(fgcol)

{

// create a string containing the new layer content

newcontent = '<BODY TEXT="' + fgcol + '"><H3>Select the Colors for the ';

newcontent += 'Background and Foreground<BR> of this page in the Lists ';

newcontent += 'above, to see what they look like.</H3> If your browser ';

newcontent += 'does not support the color you may get white instead.</BODY>';

// write it to the layer's document and close it to update the display

document.layers["textlayer"].document.write(newcontent);

document.layers["textlayer"].document.close();

// change the background of the hidden layer to the new foreground color

// so we can read back the converted RRGGBB value from it for the textbox

document.layers["convertlayer"].document.bgColor = fgcol;

}

...

Now we have our main ChangeColor function. This dos much the same as the IE version: collecting the color from the appropriate <SELECT> list, and checking to see if the Foreground or Background option button is checked. If it's the foreground, we call our ChangeTextLayer function. If not, we just change the bgColor property of the document in the main window:

...

function ChangeColor(listnumber)

{

// get a reference to the form, and then to the color selector list

thisform = document.forms[0];

thislist = thisform.elements[listnumber];

// find out which entry is selected, and get the text for it

thisindex = thislist.selectedIndex;

thiscolor = thislist.options[thisindex].text;

// change appropriate setting and update two text boxes with new values

// but only if a color is selected, not an entry starting with '>'

if (thiscolor.indexOf('>') == -1) {

if (thisform.elements[listnumber + 1].checked)

ChangeTextLayer(thiscolor)

else

document.bgColor = thiscolor;

// to get foreground color query background color of hidden layer

thisform.elements['txtFG'].value = 'Foreground: ' +

document.layers["convertlayer"].document.bgColor.toUpperCase();

thisform.elements['txtBG'].value = 'Background: ' +

document.bgColor.toUpperCase();

}

</SCRIPT>

Again, the last two lines of the function get the hexadecimal values and display them in the text boxes. Notice that we have to collect the background color of the hidden <ILAYER> element as the value of the main document's foreground color. And, to prove that it works, here's the result in Navigator 4.61:

This is only a simple example of the incompatibilities that you will face building pages that use Dynamic HTML. Obviously, the more complex the effects required, the more difficult it is to make one page work in both browsers. In most cases, you'll probably find it easier to detect the browser type and load version-specific pages instead, as we've done in this example.

Back | Contents | Next

Sponsors