ASP 101 - Active Server Pages 101 - Web06
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
Migrating to ASP.NET
Getting Scripts to Run on a Schedule
The Top 10 ASP Links @ Microsoft.com

QUICK TIP:
How to Empty an Array
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Creating Browser-Specific Pages
Back Contents Next

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:

 

...

<SCRIPT LANGUAGE="JavaScript">

<!--

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>

<NOSCRIPT>

<!-- non script-enabled browser page contents go here -->

<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

%>

<!-- non script-enabled browser page contents go here -->

<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>

<SCRIPT LANGUAGE="JavaScript">

<!--

// 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>

<NOSCRIPT>

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>

<BODY BGCOLOR="#FFFFFF">

<CENTER>

<FORM>

<TABLE WIDTH="90%" BGCOLOR="#FFFFFF" BORDER="1">

<TR>

<TD COLSPAN="4" ALIGN="CENTER">

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

</TD>

</TR>

 

<!-- Colors by Name -->

<TR>

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

<TD ALIGN="CENTER">

��� <SELECT ONCHANGE="ChangeColor(0)" SIZE="1">

����� <OPTION>> Select a color here

����� <OPTION>aliceblue

����� <OPTION>antiquewhite

����� ...

����� ... etc

����� ...

��� </SELECT>

</TD>

<TD ALIGN="CENTER">

��� <INPUT TYPE="RADIO" ONCLICK="ChangeColor(0)" NAME="BGFG1">

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

</TD>

<TD ALIGN="CENTER">

��� <INPUT TYPE="RADIO" ONCLICK="ChangeColor(0)" NAME="BGFG1" CHECKED>

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

</TD>

</TR>

...

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

... with the colors in the appropriate order

...

<!-- Display Numeric Color Values -->

<TR>

<TD ALIGN="CENTER" COLSPAN="4">

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

��� <INPUT TYPE="TEXT" SIZE="20" NAME="txtFG">

��� <INPUT TYPE="TEXT" SIZE="20" NAME="txtBG">

</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>

 

<SCRIPT LANGUAGE="JavaScript">

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:

 

...

<!-- The layer that holds the text that will change color -->

<!-- Note: you can't write to an ILAYER, you must use a LAYER -->

<LAYER ID="textlayer" LEFT="50">

<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:

 

...

<!-- Hidden layer that is used to convert the color name to a value -->

<!-- There is no content, because we're just changing its bgColor -->

<ILAYER NAME="convertlayer" VISIBILITY="HIDDEN">

<BODY BGCOLOR="#FFFFFF">

</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:

 

...

<SCRIPT LANGUAGE="JavaScript">

 

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
©1999 Wrox Press Limited, US and UK.
Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers