Click here to Skip to main content

Article

Crossbrowser SmartNavigation Alternative II

ibrahimuludag

Rate me:

5.00/5 (13 votes)

3 Apr 2005

124.4K

616

29

32

An article describing how to create a server control that preserves the scroll position in longer pages.

Download source files- 4.64 Kb

Introduction

In my previous article, I have introduced Crossbrowser SmartNavigation Alternative. However, this doesn't support link buttons, because the link buttons either does not submit the form or does not fire an event. Instead of getting the scroll positions in the onsubmit event, getting them in the onscroll event is better. But other browsers badly supports the onscroll event. This event is fired when mouse moves the scroll in other browsers. So I get the scroll positions using onscroll, onkeypress and onclick events in other browsers.

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

Adding this control to your page

Insert this code to the head of your page.

HTML

<%@ Register TagPrefix="cc1" Namespace="Uludag" Assembly="lili2" %>

And insert this code into your form.

HTML

<cc1:Lili2 id="Lili1" runat="server"/>

Or, you can follow the instructions in my previous article.

I hope this helps somebody out there, I would be interested in receiving any comments.

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

ibrahimuludag

Software Developer (Senior)

Turkey

Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
https://linkedin.com/in/ibrahimuludag
http://www.ibrahimuludag.com/

Comments and Discussions

Thanks for sharing this.

Thanh H. Pham10-May-09 13:41

10-May-09 13:41

I'm using ASP.NET 1.1 to develop my customer's site. They don't want to upgrade to 2.0 so your idea is really good. Thanks.

IMPORTANT: Fix for Firefox, IE7, etc. when using doctype

CabbageMonster26-Mar-09 10:25

26-Mar-09 10:25

In these browsers, scrollTop is no longer located in document.body, but in document.documentElement. It will not work unless Lili2.cs is modified.

In Lili2.cs, locate:

writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");

and replace it with:

writer.Write("if (document.documentElement.scrollTop || document.documentElement.scrollLeft) {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.documentElement.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.documentElement.scrollLeft;\n");
writer.Write("} else {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");
writer.Write("}");

After a recompile, this fixed mine

Thanks for the great share.

Michael Sadlon19-Apr-07 13:08

19-Apr-07 13:08

Using this for a project involving ASP.NET in VB. Works great with DropDownList boxes, inside DIV tags, etc.

Also a hint for some people who hate page flashing. Try this metatag. I found an article with this semi-solution on the web.

<meta http-equiv="Page-Exit" Context="blendTrans(Duration=0.01)">

Lili2 with that metatag improves the usability of the page 200% in my opinion. Thanks again.

Doesn't works under IE7.

marcin.rawicki12-Mar-07 5:46

12-Mar-07 5:46

Any ideas, why it doesn't works under IE7 (under IE6x it works fine) Confused | :confused:

Confused | :confused:

Doesn't Work under XHTML DOCTYPE

gtownsend200715-Jan-07 12:46

15-Jan-07 12:46

I have not been able to get it to work under the following doctypes i take them out it works wonderfully put them in and it stops working i get no errors or warnings of any sorts. Just doesn't work

XHTML 1.1 DTD

BobsAfro14-Jan-07 23:39

14-Jan-07 23:39

I am trying to create a link on a page back to the previous page.
But I would like to return the user to the scroll position on that page.
I can't use javascript:history.back() because they may have performed a postback
in which case it will not take them to the previous page.

Could this control be modified or used in the way I have said?

Farhan Noor Qureshi16-Oct-06 13:12

Farhan Noor Qureshi

16-Oct-06 13:12

Hi Ibrahim,

Thank you for sharing Lili1 and Lili2. I am using Lili2 and I am quite happy to state that it works beautifully. I tested it in IE6 with SP1 and FireFox 1.5.0.7, both on Windows XP SP2. Cheers.

Farhan Noor Qureshi

Works perfectly, thanks a million!

zangad19-Jul-06 7:05

19-Jul-06 7:05

The control you wrote works perfectly with my .NET app. I'm using a datagrid with edit/update/delete buttons and your control preserves the scroll position just like SmartNavigation does, but with the added bonus of working with our custom JavaScript libraries!

Thank you!!! Big Grin | :-D

Big Grin | :-D

Link for Lili3 not working?

Mads Christensen29-Jun-06 4:54

Mads Christensen

29-Jun-06 4:54

İbrahim

Really nice work with the control!

I can't d/l lili3 - dunno why. I need the enabled functionality.

grascioni14-May-06 7:28

14-May-06 7:28

Nice Work !!!

Gustavo

raoulguenette1-Feb-06 12:41

1-Feb-06 12:41

Hi
I'm using Lili3 with the Enabled property. It seems that once you disable it in a PostBack, it can't be enable anymore (Enabled = true had no effect).

Thanks

Re: Lili3 Enabled

ibrahimuludag28-Apr-06 13:01

28-Apr-06 13:01

enabled property is not saved in the viewstate . You must save it in the viewstate like

Private Property Enabled as boolean
set(byval value as boolean)
Viewstate("enabled") = value
end set
get
return Viewstate("enabled")
end get
end property

Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
www.ibrahimuludag.com

Doesn't work with auto refresh

Baelzharon25-Jan-06 7:01

25-Jan-06 7:01

I have smart navigation turned off and added your control to my page, but when using the meta tag refresh "meta http-equiv=refresh content=300" the auto refresh triggers and the page scrolls to the top. Anyway to get around this problem? I noticed the same thing happened when using the .net smart navigation.

Re: Doesn't work with auto refresh

ibrahimuludag28-Apr-06 13:03

28-Apr-06 13:03

Because refresh does not post the page. That's why it does not work. You can make change by using cookies.

Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
www.ibrahimuludag.com

AlejoFC25-Jan-06 6:06

25-Jan-06 6:06

El control funciona muy bien, muchas gracias.

Medellin - Colombia

firefox support

frankkkkk4-Oct-05 6:54

4-Oct-05 6:54

Hi mate,

good lump of code. Works in safari on a mac, btw.
Only thing is, I can't get it to work in firefox on a pc.
I'm using v1.06 of firefox.

any thoughts are welcome.

cheers,

Frank

Re: firefox support [modified]

CabbageMonster26-Mar-09 8:40

26-Mar-09 8:40

In Lili2.cs, locate:

writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");

and replace it with:

writer.Write("if (document.documentElement.scrollTop || document.documentElement.scrollLeft) {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.documentElement.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.documentElement.scrollLeft;\n");
writer.Write("} else {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");
writer.Write("}");

After a recompile, this fixed mine in Firefox and IE7

modified on Thursday, March 26, 2009 1:47 PM

modified on Thursday, March 26, 2009 3:21 PM

Disable for pagers?

Donzella6-Sep-05 7:45

6-Sep-05 7:45

I have a datagrid on a page where I am using lili2. lili2 works great but I want to be able to tell it NOT to scroll if a "pager" was clicked sending a postback. It is causing the next page in the grid results to scroll down to the bottom when I don't want that. Suggestions?

Thanks.

Re: Disable for pagers?

ibrahimuludag6-Sep-05 8:38

6-Sep-05 8:38

You can try this control. The used is the same. Just set the enabled property.

http://www.ibrahimuludag.com/external/lili3.zip

Ibrahim ULUDAG
Software Developer
ibrahimuludag@gmail.com
www.ibrahimuludag.com

Re: Disable for pagers?

Donzella6-Sep-05 9:03

6-Sep-05 9:03

If I still want lili to work on the page but just not for the pagers, is this still what I need? Can I mark it disabled only if the pager is clicked and have it still work correctly when the pager is not clicked?

Re: Disable for pagers?

Anonymous6-Sep-05 13:11

6-Sep-05 13:11

This is the same control. Only the enabled feature (which you want) is added. In the paging function add MyLili.enabled = false. Then it will be disabled. The enabled property is not stored in the viewstate. So you should set enabled = false when you need. You need not to set enabled = true.

Re: Disable for pagers?

Donzella6-Sep-05 13:21

6-Sep-05 13:21

I have not made myself clear, I'm sorry. I do not want to disable the control for the page. I actually use it on the page. On this page I have a datagrid that is paged. There are pager buttons at the bottom of the page to move to other pages within the paged list. When those pager buttons are clicked I do not want lili to scroll the page when it displays the next page. But there are functions on that same page that post back to the current page with processing and I want lili to scroll at that time. So I only want to disable lili if the pagers are clicked but I want it to work for all other postbacks. Is that making sense?

Thanks.

doesnt work with doctype

DroneX527-Jul-05 5:01

27-Jul-05 5:01

the control doesn't seem to be working when i use a doctype am i doing something wrong here or is it normal that it doesn't work with doctype.

greetings

the friendly stranger

Re: doesnt work with doctype

GreekShowPony29-May-06 6:36

29-May-06 6:36

I just read this and tried my code without a doctype and it worked. However I really need the doctype. Is there any fix to this?

Re: doesnt work with doctype

CabbageMonster26-Mar-09 10:23

26-Mar-09 10:23

In Lili2.cs, locate:

writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");

and replace it with:

writer.Write("if (document.documentElement.scrollTop || document.documentElement.scrollLeft) {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.documentElement.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.documentElement.scrollLeft;\n");
writer.Write("} else {");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetY\").value = document.body.scrollTop;\n");
writer.Write("document.getElementById(\"" + this.ID  + "_OffsetX\").value = document.body.scrollLeft;\n");
writer.Write("}");

After a recompile, this fixed mine

General News Suggestion Question Bug Answer Joke Praise Rant Admin

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

Go to top