Auto Scroll a Table 2

[OldWilly]

Scenario: I have a table with 300+ records in it. I scroll half way down and do an edit on one record then post it. When post is complete it sends me back to the TOP of the table. Is there any way I can go back to the table from where I left it? Hopefully someone can give me a nudge in the right direction, Thanks in advance.

 

[feherke]

Hi

Is there any way I can go back to the table from where I left it?

With 300 listed items I think the whole reload may be close to boring. So first I would think to involve AJAX, to spare the reloading. That would also mean no scrolling issue.

Regarding the scrolling, there are some ways :
[ul]
[li]When generating the list, add a specific [tt]id[/tt] to the last edited item, let us say "lastedited" and add it to the [tt]form[/tt] too as [tt]action="listitemedit.php#lastedited"[/tt].[/li]
[li]Find a way to get a reference to the last edited item and call its [tt]scrollIntoView()[/tt] method.[/li]
[li][tt]onsubmit[/tt] save the [tt]window.scrollY[/tt] value then [tt]onload[/tt] restore it with [tt]window.scrollTo()[/tt]. ( Tested in Gecko, you may prefer to use a JavaScript framework to be sure your code is portable. )[/li]
[/ul]


Feherke.

http://feherke.github.com/

 

[merlinx]

I had simular problem and to make harder, I needed to scroll the content in a nested div. This code worked for me.

1. it uses the jquery frame work.
2. my server uses php to generate the page, if a post or get variable is set ( I'm using get in this case ) then in the document ready function code is added to scroll the content.
3. when a page is being generated ( see the html code ) the marker is added and the get variale is set.
4. this is a simple example, and as feherke shows this could be expande to add the extra values so that page is readjusted as desired. jquery could help here.

<script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript">

$(document).ready(function() {
$('#ContDiv').scrollTop($('#ContDiv').scrollTop() + $('#m13').position().top);
});
</script >

<div id ="ContDiv">

( divs 1 - 12 )

<div id="m13" class="textB">
<div class="textC">
<a href="[URL unfurl="true"]http://domain/MyPage.php?ref=m13">[/URL]
<strong>Doughnuts</strong>
</a></div></div>

( divs 14 - n )

</div>