Click here to Skip to main content
Click here to Skip to main content

Crossbrowser SmartNavigation Alternative

, 3 Dec 2004
Rate this:
Please Sign up or sign in to vote.
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:

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.

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

About the Author

ibrahimuludag
Web Developer
Turkey Turkey
Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
http://ibrahimuludag.blogspot.com/
http://www.ibrahimuludag.com/

Comments and Discussions

 
Generalgood example Pinmemberkrishnaclc3-Apr-07 6:20 
Generalhidden fields Pinmemberpavlyku31-Jan-07 2:50 
GeneralASP.NET 2.0 has MaintainScrollPositionOnPostback PinmemberMarcSchluper22-Sep-06 8:45 
GeneralRe: ASP.NET 2.0 has MaintainScrollPositionOnPostback PinmemberRiza Azmi18-Jan-07 16:52 
GeneralGood job - thnx Pinmembermarcin.rawicki18-Sep-06 3:12 
GeneralJavascript problems with smartnavigation PinmemberTalal Sultan15-May-06 1:49 
GeneralThank You PinmemberDignityCentral14-Jan-06 11:27 
GeneralFUNCIONA EXCELENTE!!! PinmemberAlejoFC13-Jan-06 4:26 
GeneralGreat Control PinmemberCodeNameHar5-Jan-06 10:15 
Generalflickering Pinmemberjsbroker24-Nov-05 2:52 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 3 Dec 2004
Article Copyright 2004 by ibrahimuludag
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid