Crossbrowser SmartNavigation Alternative

• Download source files - 12.6 Kb

Introduction

One of the features of SmartNavigation is preserving the scroll position in longer pages. However, SmartNavigation only works with Internet Explorer. And another issue is, using SmartNavigation may cause some JavaScript errors.

As a web developer, I need to preserve scroll position in longer pages to prevent the visitor be lost in the page.

So, I came with an idea of a cross browser server control to maintain the scroll position in postbacks.

Using the code

Import the required assemblies:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

The control derives from the base Control class to participate in the HTTP request/response processing provided by the page framework.

namespace Uludag
{
public class Lili : Control {
    public Lili(){
    }

The control overrides the inherited Render method to write to the output text stream.

protected override void Render(HtmlTextWriter writer){

My approach is to add an event to the OnSubmit event of the form. This event assigns the positions of the source of the event to hidden values. Declare hidden values:

writer.Write("<input type=\"hidden\" id=\"" + 
       this.ID + "_OffsetY\" name=\"" + this.ID + "_OffsetY\" value=\"0\">\n");
writer.Write("<input type=\"hidden\" id=\"hidden\"" + 
       this.ID + "_OffsetX\" name=\"" + this.ID + "_OffsetX\" value=\"0\">\n");

Then detect the user browser.

writer.Write("<script language="\""Javascript\">\n");
writer.Write("var ua = navigator.userAgent.toLowerCase();\n"); 
writer.Write("var isIE = (ua.indexOf('msie') != -1 && 
       !this.isOpera && (ua.indexOf('webtv') == -1) );\n");

attachEvent is used to bind the specified function to an event in Internet Explorer. For the other browsers, addEventListener is used. Define function for OnSubmit event for Internet Explorer.

• window.event.offsetY sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
• window.event.clientY sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
• window.event.offsetX sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
• window.event.clientX sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.

writer.Write("function " + this.ID + "_OnSubmitIE(){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetY\").value = window.event.offsetY - window.event.clientY + 2;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetX\").value = window.event.offsetX - window.event.clientX + 2 ;\n");
writer.Write("}\n");

Define function for OnSubmit event for browsers other than Internet Explorer.

• event.pageY returns the vertical coordinate of the event relative to the visible page.
• event.clientY returns the vertical position of the event bars.
• event.pageX returns the horizontal coordinate of the event relative to the page.
• event.clientX returns the horizontal position of the event bars.

writer.Write("function " + this.ID + "_OnSubmitNS(event){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetY\").value = event.pageY - event.clientY;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetX\").value = event.pageX - event.clientX;\n");
writer.Write("}\n");

Add the events to the form:

writer.Write("if (!isIE){\n");
writer.Write("document.forms[0].addEventListener('submit'," 
             + this.ID  + "_OnSubmitNS, false);\n");
writer.Write("}\n");        
writer.Write("else{\n");
writer.Write("document.forms[0].attachEvent('onsubmit'," + 
                            this.ID  + "_OnSubmitIE);\n");
writer.Write("}\n");

If PostBack, add an OnLoad event to scroll to the source of the event.

if (Page.IsPostBack ){
    writer.Write("function " + this.ID + "_OnLoad(){\n");
    writer.Write("window.scrollTo(" +  Page.Request.Form[this.ID + 
                 "_OffsetX"]+ "," + 
                 Page.Request.Form[this.ID + "_OffsetY"] + ");\n");
    writer.Write("}\n");
    writer.Write("if (!isIE){\n");
    writer.Write("window.addEventListener('load'," + 
                 this.ID  + "_OnLoad, false);\n");
    writer.Write("}\n");        
    writer.Write("else{\n");
    writer.Write("window.attachEvent('onload'," + this.ID  + "_OnLoad);\n");
    writer.Write("}\n");
}

End the script and render. Close the parenthesis.

writer.Write("</script>\n");
this.RenderChildren(writer);
}
}
}

I have tested this on Internet Explorer 6.0, FireFox 1.0 and Netscape 7.2.

Adding this control to Visual Studio

To add this control to your toolbox on Visual Studio, right click on your toolbox, and click on Add/Remove Items.

Then locate the Lili.dll:

Make sure that Lili is checked.

Then Lili is seen on your toolbox.

All you have to do is just drag and drop Lili to your page.

I hope this helps somebody out there, I would be interested in receiving any bug fixes for other browsers, enhancements etc.