Introduction
Now a days it is very common between programmers to use HTML <div> tag to display scrollable Data Grids. But during post backs of ASP.NET pages maintaining the scroll position is always a tedious task and if a page contains multiple scrollable grids then it causes some real problems to maintain original scroll position for grids. In this article I am going to present a very easy way to maintain scroll position of various <div> tags as well as how to maintain the smart navigation of entire page with it.
Data Grid control of Microsoft .NET does not have a inbuilt scroll bar and to display scrollable Data Grid we need to embed Data Grid control within a HTML <div>. It is very easy to display such Data Grid like this:
<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none; HEIGHT: 200px; BORDER-BOTTOM-STYLE: none">
Data Grid can be placed here.
</div>
Setting Smart Navigation of Page Through Java Script
A very simple code snippet of Java Script provides smart navigation and maintains scroll position of entire web page, this process uses window object and cookies collection of page. The code is:
<script language = "javascript">
window.onload = function()
{
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0)
{
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.body.scrollTop = strPos;
}
}
function SetScrollPosition()
{
var intY = document.body.scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
window.onscroll = SetScrollPosition;
</script>Above Java Script sets the vertical scroll position of page in page cookie section and on window.onload it retrieve back scrolling position from cookie section and set document.body.scrollTop according to it.
Setting Scroll Position of <div> Containing Controls Through Java Script
Now suppose you have a scrollable Data Grid on Page than it is very simple to associate the scroll positions of <div> containing Data Grid to page cookie section and than on same window.onload event we can set the scroll position of <div> also, to do this we need to add a new function which executes on scroll event of <div> and set the scroll position to the page cookie and a modification in function attached with window.onload event:
<script language = "javascript">
function setScrollPos()
{
var divY = document.getElementById('div1').scrollTop;
document.cookie = "divPos=!*" + divY + "*!";
}
window.onload = function()
{
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0)
{
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.body.scrollTop = strPos;
}
if(strCook.indexOf("!*")!=0)
{
var intdS = strCook.indexOf("!*");
var intdE = strCook.indexOf("*!");
var strdPos = strCook.substring(intdS+2,intdE);
document.getElementById('div1').scrollTop = strdPos;
}
}
function SetScrollPosition()
{
var intY = document.body.scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
window.onscroll = SetScrollPosition;
</script>
Now we need to call setScrollPos() function on <div> tags onScroll event to do this modify HTML specification of <div> like this:
<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none; HEIGHT: 200px; BORDER-BOTTOM-STYLE: none" onscroll="setScrollPos();">
Data Grid can be placed here.
</div>
Above simple procedure provides smart navigation to scrolling <div> tags irrespective of what the <div> contains but a very common use of it is in scrollable Data Grids. Hope this article has given you a better idea to provide smart navigation on web pages.
Thanks in advance for your comments.
|
|
 |
 | functionality not working
k.goutam008 | 2:51 18 Jun '08 |
|
|
The functionality "Setting Smart Navigation of Page Through Java Script" is not working in my application.
|
|
|
|
|
| it's good and helpful
hari102 | 0:36 10 May '07 |
|
|
|
| dinamic script to all div that you have
AqsakMaboul | 0:34 4 May '07 |
|
|
<script type="text/javascript" language="javascript">
window.onload = function()
{
scrollTo();
}
function setScroll(val) {
var divN = val.id;
var divY = val.scrollTop;
document.cookie = divN+"="+ divY +";";
}
function scrollTo() {
var strc = document.cookie;
if (strc != '') {
var cs = strc.split(';');
//document.getElementById('TextBox1').value = cs[1];
for(var i=0;i < cs.length;i++) {
var c = cs[i].split('=');
var nome = c[0];
var pos = c[1];
if (nome.charAt(0)==' ') {
nome = nome.substring(1,nome.length);
}
document.getElementById(nome).scrollTop = pos;
}
}
}
</script>
|
|
|
|
|
| Very helpful....................
tprashanth | 2:15 10 Apr '07 |
|
|
Nice article...... I'm using VS.NET 2003. My page has 3 frames. on the top frame I load data into a datagrid inside DIV tags(nearly 5000 records at a time). On the click of a link in the grid I will populate the bottom frames. I load a pdf image in the bottom left frame and relavant details in the bottom right frame. As the record count was huge I enabled the SmartNavigation="true". But this suddenly slowed the performance of the application. I was searching for an alternative solution for this. Thank you. Atlast I found the solution that I was searching for. Nice work. My rating is 5 out of 5.
One question........... If cookies are disabled what will happen? Do you have a alternative solution for this.
Warm Regards,
Prashanth
|
|
|
|
|
| Nice!!!
Satya Kanithi | 12:10 10 Jan '07 |
|
|
Simple solution to solve the scrolling issue...
|
|
|
|
|
|
|
I'm looking for something to maintain scroll position on Ajax enabled pages where ajax postbacks may hide and reveal several asp panels before returning to the origination asp panel.
|
|
|
|
|
| ASP.NET 2.0 always complains onscroll of a div
kekelele | 9:13 14 Nov '06 |
|
|
Hello, there:
This is a very helpful article.
I have two issues with the solution provided by you.
(1) web page validator always complains that there is
on such function "onscroll" defined for tag.
(2) How do you make it work on IE7. It looks to me the
scroll bars don't show up in IE 7
regards,
|
|
|
|
|
| Use of Smart Navigation in Div interface
Dominic Turner | 0:18 31 Oct '06 |
|
|
Hi there - I am using an interface made out of divs in my master page. One of these divs is set as scrollable. This div has the content panel.
Your code works great for me. However I have one small bugbear. It now maintains scroll position even when I am navigating to a new page.
I would like to have this reset the cookie variable if the page name changes.
I will try and give it a go.
|
|
|
|
|
| Thanks this helps me to solve the problem!!
smileblue | 8:59 28 Jun '06 |
|
|
I tried many ways. Only this one works for me.
|
|
|
|
|
|
|
+1
thanks 4 this one 
|
|
|
|
|
| Thanks this was useful to me
froman118 | 15:08 28 Dec '05 |
|
|
I'm not sure why people are rating this so low but it did the trick perfectly for me. Project I'm working on was using an iframe to display a table of data so I'm modifying it to use a scrollable div and editable DataGrid but couldn't use the normal Smart Navigation to remember scroll position. It would be very user-unfriendly to have to scroll through a list of a hundred or so records, hit edit and then have to scroll back down to where you were. Thanks for your contribution, it was a big help to me.
|
|
|
|
|
| Read this before rating the article
Mukesh Kumar Gupta | 3:13 2 Dec '05 |
|
|
Please post a comment before rating the article about content. It will be helpful for me to improve this article.
|
|
|
|
|
|
|
Isn't it possible to make the code more dynamic? Why use !~ and !* ?
If you write out the strCook-variable you get "yPos=!~135~!; divPos=!*59*!" (without the quotes)
If you split this on ";", then you have name-value-couples you have to split on the first "=". So don't use !~ and !*.
If you also add the id's of the elements to the cookie, you can write code where you never have to change the onload-function (just get element-id and position from the cookie and adjust the value).
eg: id1=div1; div1pos=36; id2=newDiv; newDivpos=73; (that's just a thought, there could be better options than this)
And if you than change function setScrollPos() to one having the element-id as a parameter, this code also doesn't have to be changed at all.
In that case you can have hundreds of divs with scrollbars without having to write an other letter of javascript.
If I have the time I'll have a go at it, but time is very limmited for me and I am not used to writing javascript. Maybe there's somebody who knows more about writing javascript want's to post a more flexible version????
Greetings and thanks for the code.
Wouter - Belgium
|
|
|
|
|
|
|
Last Updated 2 Dec 2005 |
Advertise |
Privacy |
Terms of Use |
Copyright ©
CodeProject, 1999-2010
