Implementing Cross-Browser Compatible Smart Navigation Features

by Damon Armstrong

Rating:

SmartNavigation is a feature built into ASP.NET that makes postbackssmoother by remembering the page scroll position, retaining elementfocus, reducing screen flicker, and not registering the postback in thebrowser?s history. This greatly enhances the user experience for pagesthat make use of postbacks, but it only works in Internet Explorer 5.5and up. In this article Damon Armstrong will discuss how to buildsimilar page position and focus tracking features, but which will workin all modern, standards compliant browsers.

Introduction
On a recent project for a government client I was tasked with creating a user information page that needed to identify the region and office in which an individual worked. There were around 3,000 total offices, so I ended up creating two drop down lists to help narrow down the selection. The first drop down contained a list of all of the regions, and the second was automatically populated with region-specific offices by autopostbacking the form when a region was selected. Because the form had a number of data entry fields, these drop down lists were located near the bottom of the form and required viewers to scroll down to see them. It worked well in Internet Explorer. The trouble was, it only worked in Internet Explorer and some of our users had other browsers.

Inevitably, slightly irritated people began calling in and complaining that when they selected a region they were returned to the top of the page after the postback. This meant they had to scroll all the way back down the page to select an item from the office drop down list, and it was a bit irksome. They wanted the page to stay in the same place and maintain the tab position so they could just tab over to the office drop down. They wanted the Smart Navigation features that would have been available had they been using Internet Explorer.

My first inclination was to tell them download Internet Explorer because it would make all of their problems go away without much effort on my part, but I had a feeling that wouldnt go down very well. People who used browsers other than Internet Explorer are comfortable with and partial to their browsers, so why should they have to change? Instead, I decided it would be better to build something that would mimic the ASP.NET Smart Navigation functionality but which would be compatible with the most recent versions of Navigator, Opera, and FireFox.

This article is going to cover how to go about implementing some of the Smart Navigation functionality found in ASP.NET using cross-browser compatible JavaScript. It will also wrap all of the code into an easy to reuse assembly so you can import it into whatever projects you so choose without having to do a lot of reworking.

To understand this article you should have a good understanding of JavaScript, as well as the page scripting model. If you have never heard of the Page.RegisterClientScriptBlock() method then you should check out the links section of this article and do some catching up before pressing onward.

I'll be discussing, in some detail, how all the code works. But I know there are those of you out there who wont really want to get into it that deep into the underlying mechanism, but would just prefer to use the code. I sympathize with you, so if you are one of these people then you should read the "Using SmartNav on a Page" section. For those of you that want a more in depth understanding, I'll be discussing what Smart Navigation is, how it works, and getting into the details of how to implement our own version of the features with cross-browser compatible code.
System Requirements
To run the code for this sample you should have
A web server running on Windows 2000 or later The .NET Framework version 1.1 VS.NET 2003Installing and Compiling the Sample Code
Full instructions for installing the sample code are contained in the ReadMe.txt file that comes with the download. To make the sample easier to install, I've provided an installer file, SmartNavSetup.msi This will launch a setup program that will create the appropriate IIS entries and a SmartNavDemo virtual directory and copy the sample application there. There is one step that the installation routine doesn't do, which you must therefore do by hand: You will need to copy the WebTools.js file from [webroot]/ SmartNavDemo/WebTools/ClientScript to [webroot]/aspnet_client/WebTools . The aspnet_client directory is a central location where web applications for your site can find client-side script files, and the code in the sample application expects the file to be in this location. The sample won't work correctly if you don't carry out this step . There is a batch file called deploy.bat that can automatically create the necessary directory structure and copy the WebTools.js file into the appropriate location if your webroot is located in c:\inetpub\wwwroot .

I have also included a copy of the demo application for XCOPY deployment if you have any issues with the setup file.
Running the Sample Application
If you run the sample application's Default.aspx page, you'll see a menu with various links to other pages, as shown in figure 1. This page gives a pretty good explanation of the purposes of the other pages so I'll let Figure 1 speak for itself:



Figure 1. The sample application, on startup.

Other than the Browser information page, any of the links will get to to an identical-looking form. The contents of this form are not important it simply contains a sufficiently large number of controls that you may have to scroll down to see them all, as shown in figure Figure 2.



Figure 2. The large form in the sample application.

Some of the controls have auto-postback enabled, and there's a submit button to submit the entire form. No action is taken when you submit the form; the interest in this article is that, with the smart navigation that I will code up, the form will be able to remember its scroll position and which control has the focus when you post back, in any modern browser.
What is Smart Navigation?
Smart Navigation is a feature of ASP.NET that makes post backs from web forms a bit more user friendly. It accomplishes a couple of key tasks such as maintaining scroll position, element focus, reducing screen flicker, and not registering the redisplayed page in the browsers history. The functionality, however, is highly dependent on Internet Explorer specific features and it does not work across all browsers. You can take a look at the Smart Navigation code by opening the SmartNav.js client-side script file located in the /aspnet_client/system_web/[version]/ folder, but be warned that it is a very advanced piece of code. Don't edit it.

Whenever a page has Smart Navigation enabled, the page will be output with a hidden iFrame and a reference to the SmartNav.js file. The client-script then registers functions that allow the iFrame to respond to events that occur on the web form, such as when the page loads or is submitted.

The general idea behind Smart Navigation is that the hidden iFrame is responsible for a lot of the page processing. When the user submits the web form, the iFrame gathers all the form data and sends it to the server for processing. It also determines which element currently has the focus, and saves this information for later use. The HTML response from the server is then received by the iFrame, which then writes that HTML out to the actual web form once it has been completely received.

This accomplishes two things. First, it reduces flicker. Normally, a page is cleared completely before new content is displayed, causing a completely white page to be shown briefly before the new content is presented. If the content of the submitted page and the new page is similar, the page just appears to flicker. When the iFrame writes HTML back to the web form, however, the output is displayed without clearing all the contents of the page. There is no momentary flash of white, so flicker is therefore reduced. Second, it maintains scroll position. Since the web form never actually submits, the page position never gets reset. When the iFrame rewrites the web form using the HTML response from the server, the web form will still be in its original location because it never moved.

Client-script from the SmartNav.js file is also responsible for resetting the element focus after loading the HTML into the web form, and for ensuring that history is not saved for post backs. By avoiding an entry into the browser history during post backs, Smart Navigation helps avoid issues with users clicking the back button and being presented with a dialog box asking them if they want to resubmit their form data. Considering that there could be many postbacks from a single page, this is a very useful feature.

Nothing is perfect, however, and Smart Navigation is no exception. There will be times when using Smart Navigation wont work or causes bugs to pop up. And, as mentioned before, it doesnt work in all browsers, which tends to exclude its use on major public websites. But its a great option for an intranet application where all of your users are on Internet Explorer.

In our implementation of cross-browser compatible Smart Navigation features we are going to focus on retaining page position and element focus. Page flicker is a minor annoyance that is rapidly decreasing with processor speed, and the history issue can be lessened with appropriate navigation options. If you give people obvious navigation routes then they may be less inclined to use the back button, although because many people are so accustomed to the ease of the back button, you're unlikely to completely prevent users from using it. Hence you should still take care to ensure that your code can cope with an accidental resubmission and behaves sensibly if that happens.
SmartNavigation Implementation Overview
In this section I'll go over what the implementation of the sample code looks like, so you can see how the various projects and files fit in.
Solution Architecture
The demo application itself is fairly straightforward. There are two projects in the VS. NET solution: The web application, and the assembly that contains the smart navigation features.

The web application contains the following pages:
Default.aspxOrganizational page displaying links and descriptions of other pages. NoSmartNav.aspx Webform with Microsofts Smart Navigation disabled. SmartNavIE.aspx Webform with Microsofts Smart Navigation enabled. SmartNavJavaScript.aspx Webform using our implementation of the cross-browser compatible Smart Navigation features. BrowserInfo.aspx Shows browser information using the Request.Browser object, and the window.navigator.appName property in JavaScript.
You can open these pages up in various browsers to see the different behaviors in each. You should notice when Smart Navigation is enabled that Internet Explorer will stay in the same position when a postback occurs. In other browsers, the page will return to the top left. You should also notice that the Request.Browser object correctly identifies the browser types, but that Opera and FireFox identify themselves as Internet Explorer and Netscape (respectively) from the window.navigator.appName property in JavaScript.

The WebTools project wraps the JavaScript Smart Navigation features into an easily reusable assembly. There are two classes
Scripting.vbContains methods for DoPostBack Hijacking SmartNav.vb Contains methods for JavaScript smart navigation
This assembly assembly contains the.NET code that allows you to enable page position and focus tracking from a web form. It is encapsulated in an assembly for easy reuse across multiple projects.

The WebTools assembly also contains the client-side script file named WebTools.js that should be deployed to the /aspnet_client/WebTools folder , as mentioned earlier. It contains static methods to assist with the page position and focus tracking features, and it is included on each page in which you want to use the functionality we will be implementing. Note that any changes you make to the WebTools.js file included in the project will not take effect until those changes are copied to the /aspnet_client/WebTools folder.

Figure 3 shows the overall file structure of the applciation.


p>Figure 3. Overview and File Structure of the Sample Appliation
Pages in your ASP.NET application make use of the WebTools assembly by calling the WebTools.SmartNav.Enable() method. Calling this method will output the necessary JavaScript on the page sent to the browser so the page position and focus information will be tracked. It also make sure the right JavaScript include information is sent to the browser so the browser will reference the WebTools.js script file.

I'll now quickly review the individual parts of the application in more detail.
WebTools.js
The bulk of the JavaScript used for the smart navigation is encapsulated in the WebTools.js client-side script file. Placing this code in a client-side script file allows browsers to cache the document, thus saving bandwidth in the long run. Additionally, the WebTools.js file is located in a directory from which all of your web applications can access it. This allows multiple applications for a site to reference the same client-side script file and provides a single location that you need to update if changes are required to the script.

You will see code in the SmartNav class registering client-side script for page execution that makes use of the functions located in the WebTools.js file.
Scripting.vb
This file contains a workaround for a behavioral issue with the Page.RegisterOnSubmitStatement() method. This issue and workaround were documented in a recently published ASP Today article I wrote, DoPostBack Hijacking so I will not cover it in detail in this article. If you would like a full understanding of the issue, a link to this article is provided in the links section, but you can get by with what we talk about here if you so choose.

The JavaScript methods required to implement DoPostBack Hijacking and the workaround mentioned above are located at the end of the WebTools.js file. You will see code in the Scripting class registering client-side script for page execution that makes use of those functions.
SmartNav.vb
The SmartNav class contains the code for registering client-side script on a page that will setup scroll position and tab location tracking. Methods from this class will be called from a web form (.aspx page) to enable JavaScript Smart Navigation.

The process works like this:
The page will call the SmartNav.Enable() method. Three hidden form variables will be added to the page. __lastTab will hold the last known tab position. __leftPos will hold the X (horizontal) scroll position. __topPos will hold the Y (vertical) scroll position SmartNav.Enable() will register the WebTools.js client-side file on the page. This ensures that the SmartNav JavaScript functions will be available on the client. SmartNav.Enable() will register the required JavaScript functions with the page that are used to populate the three hidden variables when the page closes. If a postback occurs, the SmartNav.Enable() method will read the hidden variables and register JavaScript functions for execution when the page loads. These functions will return the page to the proper scroll position and setup the appropriate tab location.The Web Forms (.aspx Pages)
The Web Forms need to call SmartNav.Enable() to setup JavaScript Smart Navigation. JavaScript functions will be registered on the page through that function, then output the browser when the page renders.

The browser is where everything comes together and executes. The browser will pull down the WebTools.js client-side script file and execute JavaScript functions on the page to save page location and tab position before each form submission. The browser will then send these items back to the web form for processing via the hidden form variables.
The Client-Side JavaScript
All of the client-side functions needed to implement JavaScript Smart Navigation are located in the WebTools.js client-side script file. As mentioned earlier, this file is located in the aspnet_client subdirectory of the webroot in a directory called WebTools . The aspnet_client directory is created when ASP.NET is installed to hold client-side include files that are available to multiple applications. If you drill down through the directory structure, you will find all of ASP.NETs validation routines and Internet Explorer specific Smart Navigation files. Microsoft recommends that you place your non-application specific include files in this directory because it is a central repository for client-script files for a site.

There are five main functions that I'll be discussing in the WebTools.js client-side script file that deal specifically with JavaScript Smart Navigation: setFocus() , saveTabPos() , setupTrackTab() , setScrollPos() , and getScrollPos() . There are three additional functions that pertain to DoPostBack Hijacking. DoPostBack Hijacking is a technique that replaces the DoPostBack() function written to a page by ASP.NET with another function written by a developer. DoPostBack Hijacking is used to implementing a workaround for the behavioral issues in the Page.RegisterOnSubmitStatement() method. I won't cover those functions because they are outlined in detail in my earlier article on DoPostBack Hijacking. A link to the article is provided in the links section.
The setFocus() Function
When the page is loaded, we need to be able to set the focus to a particular page element. The setFocus function accomplishes this task for us. The code for the setFocus function is shown below:

function setFocus(elementId){
if(document.getElementById){
//getElementById is supported, so use it
if(document.getElementById(elementId)){
document.getElementById(elementId).focus();
}
}else{
if(document.getElementsByName){
var items = document.getElementsByName(elementId);
if(items.length > 0){
items[0].focus();
}
}
}
}//end function


This function takes a single parameter called elementId that defines the HTML element that should receive the focus. Notice that the first if statement is used to determine whether or not the browser supports the getElementById function. If so, then we determine whether or not the elementId references a valid element on the page on the page. If it does, we call the focus function of that element. At the time of writing, IE, Firefox, and Opera all support the getElementById() function. Netscape, however, does not.

If someone is using the Netscape browser then we must use the document.getElementsByName() function to locate the item that is to receive the focus. The document.getElementByName() function returns an array, so we create a variable to hold all of the return values. If the length is greater than zero, we assume the first item in the array is the item for which we are looking and call its focus() method to set the focus to the element.
The saveTabPos() Function
We can set the tab position, but we also need to be able to save it when the page is submitted. The saveTabPos() function is used for this. When the SmartNav.Enable() method is called, it will save the element id of the active element in a hidden form variable named __lastTab The code for this function is shown below:

function saveTabPos(formName){
if(document.forms[formName]){
if(document.forms[formName].__lastTab){
document.forms[formName].__lastTab.value =
document.activeElement.name;
}//end if
}//end if
return true
}//end function


The saveTabPos() function is passed the name of the form that contains the __lastTab variable. It checks to ensure a form object can be located with the given formName , that the __lastTab variable can be located with that form object, and if so it then sets the __lastTab variable to the name of activeElement in the document .
The setupTrackTab() Function
Internet Explorer and Opera let us know what element currently has the focus via the document.activeElement property. Netscape and Firefox do not have a corresponding property to let us know this information, so we have to setup a mechanism to determine this on our own.

Heres the plan. If the browser identifies itself as Netscape, which both Netscape and Firefox do, then we are going to iterate through each one of the elements looking for items that have a focus() method. The objective of us saving the element name is to call the focus() method on the element later on when the page refreshes. Thus, if the item does not have the focus method then we can ignore the element.

If the item does have the focus() method, then we need alter its onfocus property. Remember that the onfocus property is a JavaScript string that will be executed when the item comes into focus. We want the following JavaScript to execute whenever an item comes into focus:

document.activeElement = this;


This will effectively set the document.activeElement property in Netscape to the item that currently has the focus. The code to accomplish this task is outlined below.

function setupTrackTab(){

if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
var allElements = document.body.getElementsByTagName('*');

for (var i = 0; i<allElements.length; i++) {

if(allElements[i].focus != undefined){

var functionBody = 'document.activeElement = this;';
var oldOnFocus = allElements[i].getAttribute('onfocus');
if (oldOnFocus) functionBody += oldOnFocus;
allElements[i].onfocus = new Function (
'event', functionBody);
}//end if
}//end for
}//end if

}//end function


The first if statement determines whether the browser identifies itself as Netscape. Opera will identify itself as Internet Explorer, and Opera supports the activeElement property. So, for Opera and Internet Explorer we do not have to do anything in this function. If the browser is Netscape or Firefox, then we need to setup our own activeElement property so tab tracking will function appropriately.

Once we are in the main if statement, we setup a variable named allElements that will contain an array of all the elements on the page. Using a for loop, we iterate through all of the elements on the page. The if statement inside of the for loop determines whether or not the item has a focus() method. If the element has a focus() method, we will alter its onfocus property. If there is not onfocus property, we disregard the item because we are only interested in elements that can receive the focus.

It is perfectly reasonable to expect the onfocus property to already have JavaScript in it, so we have to take that into account when modifying it. First, we create a variable named functionBody that contains the JavaScript we want executed to setup our activeElement property. Then, we get the JavaScript that is currently in the element and place that into a variable named oldOnFocus . If any JavaScript is contained in oldOnFocus , then we add it to the end of functionBody . This allows our code to execute first, and then the code that was there previously to execute next. Finally, we create a new Function object with the code contained in functionBody and assign it to the onfocus property of the element.

Although it was fairly troublesome, this will effectively mimic the activeElement property of the document object found in Internet Explorer. Now that weve covered all of the functions required to track the tab position, lets move right into tracking the scroll position.

The getScrollPos() Function

We need the ability to acquire the scroll position before the page is submitted for a postback, and this is the method that accomplishes that task. Following is the code for the getScrollPos() function:

function getScrollPos(formName){
if(document.forms[formName]){
if(document.forms[formName].__leftPos){
document.forms[formName].__leftPos.value =
document.body.scrollLeft;
document.forms[formName].__topPos.value = document.body.scrollTop;
}
}
}


This function is passed the name of the form that contains the __leftPos and __rightPos hidden form variables. The first line of code checks to make sure that the formName references a valid form on the page. The next line checks to make sure that the __leftPos hidden form variable is defined. If so, we assume that __topPos is also defined and we set the values to the scrollLeft and scrollTop properties of the document . body object, respectively. All modern standards compliant browsers support the document.body.scrollLeft , and document.body.scrollTop properties, so we do not have to do any special checking here.
The setScrollPos Function
We also need the ability to set the scroll position of the browser when the page is loaded. This is accomplished from the setScrollPos() function. Following is the code for the function. Like the getScrollPos() function, it is relatively simple because FireFox, Opera, Netscape, and Interenet Explorer all support the same scroll position properties.

function setScrollPos(leftPos,topPos){
try{
document.body.scrollLeft = leftPos;
document.body.scrollTop = topPos;
catch(ex){
lastExceptionLocation = 'setScrollPos';
lastException = ex;
}
}


This function is given two parameters: leftPos and topPos . The leftPos parameter contains the horizontal scroll position and the value of this parameter is passed into the document.body.scrollLeft property. The topPos parameter contains the vertical scroll position and its value is passed into the document.body.scrollTop property.
The Server-Side Scripting Class
The Scripting class, defined in Scripting.vb, contains three methods that we will be using from within the SmartNav class. The first method is called RegisterClientScript() and it is used to ensure WebTools.js will be included in the page by registering the following JavaScript:

<script language="javascript" src="/aspnet_client/WebTools/WebTools.js"
</script>


Next, there is a function called LocateServerForm() . This function is responsible for returning the name of the server from used by an ASP.NET page. It iterates through all of the elements on the page until it locates an HTMLForm object and returns its ID property. This function is used to pass in the appropriate form name to the saveTabPos() and getScrollPosition() client-side functions in WebTools.js ,

The last method is called HijackDoPostBack() . This method is used to ensure JavaScript registered to execute when the page submits will do so correctly. There is a similar method named RegisterOnSubmitStatement() that belongs to the Page object, but this method will not execute the specified JavaScript when the page submits using a __doPostBack call. For our scroll and tab position saving functions to work correctly, the page needs to execute the specified JavaScript when the page submits using a __doPostBack() call. Thus, we will be using the HijackDoPostBack() method to ensure our JavaScript code is executed as needed. Note that I've not used the onscroll event because this is not supported in Netscape.

Once again, the Scripting class and associated JavaScript functions for implementing the HijackDoPostBack() method are outlined in detail in my DoPostBack Hijacking article.
The Server-Side SmartNav Class
The SmartNav class is what you will be interacting with directly when you are coding on a page. It contains three shared functions that will help setup Smart Navigation on a page.
The SetFocus() Method
SetFocus allows you to set an initial element that should receive the focus as well track the tab position between postbacks. You will notice that it takes two parameters. The first parameter is a reference to the Page on which you are trying to setup tab position tracking. InitialElement is a string containing the element id of the element that should have the initial focus. Following is the complete listing of code for the method:

'***************************************************************
Public Shared Sub SetFocus(ByRef Page As System.Web.UI.Page,
ByVal initialElement As String)

Dim lastTab = Page.Request.Form("__lastTab")
If lastTab = String.Empty Then lastTab = initialElement

Page.RegisterHiddenField("__lastTab", "")

Page.RegisterStartupScript("setupTrackTab", _
"<SCRIPT language=""javascript"">setupTrackTab();</SCRIPT>")

Scripting.RegisterOnSubmitStatement(Page, "saveTabPos", "saveTabPos();")

Page.RegisterStartupScript("setInitTab", _
"<script language=""javascript"">setFocus('" & lastTab & "');</script>")

End Sub


The first line attempts to read the value from the __lastTab form variable into a variable called lastTab . If the page has not posted back, then lastTab will end up blank. Otherwise it will contain the element id set from the saveTabPos function defined in the WebTools.js file. If lastTab ends up blank, the next line will set it to the initialElement value. This ensures that the default form element on the page will have the focus instead of the navigation bar or some other browser element. If you do not want a default form element to receive the focus, then leave the initialElement blank.

Next, the page will register the hidden field named __lastTab . This makes sure there is a form variable into which we can save the tab position from the saveTabPos function in WebTools.js . Not to mention that we just accessed the __lastTab form variable two lines ago.

After that, the page will register a startup script to execute the setupTrackTab JavaScript function when the page loads. Remember that the setupTrackTab function is defined in the WebTools.js include file and is required to setup the document.activeElement property in Netscape.

Then we use the Scripting.RegisterOnSubmitStatement() method to ensure that the saveTabPos() method will be executed whenever the page submits. This will save the active element name in the __lastTab form variable so this function read it.

Finally, we register a startup script to set the initial tab focus using the setFocus() JavaScript function defined in WebTools.js . This will ensure that the last tab position or the initial element will have the focus when the page finishes loading.
The TrackPos() Method
TrackPos() is used to setup the page to allow for scroll position tracking. It only takes a single parameter, a reference to the page on which you want to setup the scroll position tracking. Lets take a look at the code:

'***************************************************************
Public Shared Sub TrackPos(ByRef page As System.Web.UI.Page)

Dim topPos As Integer = 0
Dim leftPos As Integer = 0

If page.IsPostBack Then
If IsNumeric(page.Request.Form("__leftPos")) Then _
leftPos = CInt(page.Request.Form("__leftPos"))
If IsNumeric(page.Request.Form("__topPos")) Then _
topPos = CInt(page.Request.Form("__topPos"))
End If

page.RegisterHiddenField("__leftPos", leftPos)
page.RegisterHiddenField("__topPos", topPos)

page.RegisterStartupScript("TrackXY",
"<script language=""javascript"">setScrollPos(" & _
leftPos & "," & topPos & ");</script>")

Scripting.RegisterOnSubmitStatement(page, _
"getScrollPos", "getScrollPos();")

End Sub


First, we define two variables, topPos and leftPos , to hold the top and left position information. If this is a postback, then we attempt to acquire the __leftPos and __topPos form variables. If they are acquired successfully they are assigned to the topPos and leftPos variables in our function.

Next, the TrackPos() method will ensure that the hidden form variables __leftPos and __topPos are created on the page. This ensures that the getScrollPos() JavaScript function defined in WebTools.js has a location to which it can save the scroll position information.

Then we register a startup script that will call the setScrollPos() JavaScript function when the page loads. This will make the page return to the proper location if it is a postback.

Finally, we use the Scripting.RegisterOnSubmitStatement() method to ensure getScrollPos() will execute when the page is submitted. This ensures that the screen position information will be saved to the __leftPos and __topPos form variables for processing inside of this function.
The Enable() Method
Most of the time you will want both tab and scroll position tracking to be enabled. The Enable method calls both of the functions for you from a single location. It mainly exists to help reduce typing. There are two overloaded enable methods:

'***************************************************************
Public Shared Sub Enable(ByRef page As System.Web.UI.Page,
ByVal initialElement As String)

SetFocus(page, initialElement)
TrackPos(page)

End Sub

'***************************************************************
Public Shared Sub Enable(ByRef page As System.Web.UI.Page)
Enable(page, String.Empty)
End Sub



If you want to specify an initial element that should receive the focus, you may call the first Enable method and pass in a string containing the elementId of the item that should receive the focus. If you do not want to specify an initial element, the second Enable() method will automatically pass in an empty string as the initialElement .
Using SmartNav on a Page
Now that we have covered all the code, we can look at how you should use the SmartNav class on a page. Before you begin coding, you must have a reference to the WebTools assembly from your web application. You should also reference the WebTools namespace on your page with the usual Imports statement in VB, or using statement in C#:

Imports WebTools


You can also setup the WebTools assembly as a global import on the Imports property page of your web application properties. This can be found by right clicking on your ASP.NET project and selecting Properties.

With that out of the way, lets take a look at the code from the SmartNavJavascript.aspx page located in the demo application. The following line of code is located in the page_load event:

SmartNav.Enable(Me, Me.txtNameFirst.UniqueID)


The first parameter of the Enable method is the page on which you want to enable JavaScript Smart Navigation. You can just pass in the Me reference because you are currently working from within the context of a page. The second parameter is the element id of the initial page element that should receive the focus when the page loads. In the example above, I used the UniqueID property of the txtNameFirst textbox control to get the element ID. You could also type it in as a string if you so desired, or use the overloaded Enable() method to avoid passing in an initial element all together.

And thats it. A single line of code inside the Page_Load event of your web form can enable JavaScript Smart Navigation for your users cross-browser compatible enhanced surfing experience. I would caution you against enabling both ASP.NETs Smart Navigation features and these smart navigation features at the same time. In brief testing, when both sets of functionality were enabled, the horizontal scroll position was always reset. Vertical positioning and focus were retained correctly, however. There may, however, be other issues that arise when both sets of functionality are enabled that have not yet been discovered.

One thing you could do, if you want to dynamically switch between ASP.NETs Smart Navigation and our alternative, is to use the Request.Browser object to determine whether or not a user has Internet Explorer 5.5 or greater. The code would look something like this:

With Request.Browser
If .Browser = "IE" AndAlso _
((.MajorVersion > 5) Or _
(.MajorVersion = 5 And .MinorVersion >= 5)) Then
Page.SmartNavigation = True
Else
Page.SmartNavigation = False
WebTools.SmartNav.Enable(Me)
End If
End With


Naturally, you would not want to paste this into each page you create on a website, so you would most likely want to create an inheritable page class and have this code in the load event of that class. Then have all the pages in your site inherit from that base page object to include the functionality. Its up to you though.
Conclusion
The Smart Navigation feature of Internet Explorer makes navigating web forms much more user friendly, and now you can port that power into other browsers as well. Be wary, however, to stay on your toes. As browsers are updated and newer versions of the .NET framework are published, this code may need to change slightly to keep up with the times.