Click here to Skip to main content
15,868,005 members
Articles / Web Development / HTML
Article

Crossbrowser SmartNavigation Alternative

Rate me:
Please Sign up or sign in to vote.
4.86/5 (29 votes)
3 Dec 20042 min read 129K   533   37   39
An article on how to create a server control that preserves the scroll position in longer pages.

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:

C#
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.

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

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

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

C#
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.

C#
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.
C#
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.
C#
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:

C#
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.

C#
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.

C#
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.

Image 1

Then locate the Lili.dll:

Image 2

Make sure that Lili is checked.

Image 3

Then Lili is seen on your toolbox.

Image 4

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
Turkey Turkey
Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
https://linkedin.com/in/ibrahimuludag
http://www.ibrahimuludag.com/

Comments and Discussions

 
GeneralLinkButton not supported Pin
Marc Schluper16-Feb-05 5:22
Marc Schluper16-Feb-05 5:22 
GeneralRe: LinkButton not supported Pin
ibrahimuludag3-Apr-05 5:18
ibrahimuludag3-Apr-05 5:18 
GeneralRe: LinkButton not supported Pin
Marc Schluper8-Apr-05 5:15
Marc Schluper8-Apr-05 5:15 
GeneralI'm confused Pin
alex.barylski4-Dec-04 21:53
alex.barylski4-Dec-04 21:53 
GeneralRe: I'm confused Pin
ibrahimuludag4-Dec-04 23:13
ibrahimuludag4-Dec-04 23:13 
GeneralRe: I'm confused Pin
Patrick Long17-Jan-05 11:58
Patrick Long17-Jan-05 11:58 
GeneralRe: I'm confused Pin
ibrahimuludag17-Jan-05 12:05
ibrahimuludag17-Jan-05 12:05 
GeneralRe: I'm confused Pin
Anonymous5-Apr-05 13:55
Anonymous5-Apr-05 13:55 
Do you know what SmartNavigation is in ASP .NET?

Also, do you understand English you dork?

Read the article first before you put your foot in your mouth... Mad | :mad:
GeneralRe: I'm confused Pin
alex.barylski5-Apr-05 14:00
alex.barylski5-Apr-05 14:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.