Keeping scroll position after a postback

Keeping scroll position after a postback

  
Have you ever had a page that is just a little too big and whenever you have to refresh the content with an action postback you need to scroll back to your position?
This can get annoying if you have a big form that has to refresh content based on previous entries.

Here is a solution to solve that problem.
This javascript will automatically place you back in your scroll position.

You have to have two inputs with names "xInput" and "yInput" placed on your screen (probably in a container with display set to false inside a webblock that you can use on all your pages).
This inputs must each be assigned to an integer local variable.

I'm using "prototype" JS lib here so if you don't have it you have to replace the :
"$('" + yInput.Id + "')" with something like "document.getElementById(" + yInput.Id + "')".

Also make sure that the "window" "onload" and "onscroll" events are not being used by anyone else.

"<script>

function myScroll() {
if(document.documentElement.scrollTop > 0)
$('" + yInput.Id + "').value = document.documentElement.scrollTop;
else if(document.body.scrollTop > 0)
$('" + yInput.Id + "').value = document.body.scrollTop;

if(document.documentElement.scrollLeft > 0)
$('" + xInput.Id + "').value = document.documentElement.scrollLeft;
else if(document.body.scrollLeft > 0)
$('" + xInput.Id + "').value = document.body.scrollLeft; }
window.onscroll = myScroll;

function myLoad() {
scrollTo($('" + xInput.Id + "').value, $('" + yInput.Id + "').value); }
window.onload = myLoad;

</script>"

Hope this helps!
Hi Vasco....

I had the problem some time ago and got an answer...

Check out topic on development forum Something like an Anchor...

Best Regards,

Diogo C S Cordeiro


Hi

I created a very simple web-block to do that operation. Simply drag to the page and scroll position is automatically kept.
An example page exists in the web block.

Please let me hear your feedback on this.
Hi, I did test your espace and it is working 100%.


I copied the LockScroll web block to my espace and dragged it to my ScreenFlow but it is not working ?


Please advice on this.


Kind Regards,

Floris 
Hi Floris

Don't copy the web-block - instead, include a reference to it in your eSpace, and use it from there.
Simply do the following:
  1. In Service Studio, go to File -> Add/Remove References;
  2. In the left pane, choose eSpace LockScroll;
  3. In the right pane, choose the web-block.
  4. Click OK.
You will now have a new flow in your eSpace, with the web-block. Simply drag&drop the web-block into your screen, and things should work as expected.

Cheers,
Hi,

Sorry you have to bear with me , im still new with Outsystems :(

I did click on File and then Add/Remove Reference but did not manage to find the eSpace LockScroll (see attachment)

Please will you guide me to "upload" whatever needs to be uploaded so that i can select it.

Kind Regards,
Floris
Hi Floris,

probably its because the webblock you are trying to reference isn't public or you don't have privileges in service center to see/reference/publish that espace.

Check if you can see that espace in service center. If so, open your LockScroll espace in service studio, go to the webblock you want to be public in the properties pane turn public to Yes and publish your espace.

After being publish just follow the steps that Acácio gave you previously.

RNA
Hi,

I manage to add the screenFlow as per Acácio comment and added it to the screen.
I published and reloaded the screen and it is still not working :(

Will it be possible for me to mail someone the OML File so that you can have a look?

Kind Regards,
Floris
Hi Floris,

you can attach here or if it is confidential send it to support@outsystems.com

RNA

wrote:
Hi

I created a very simple web-block to do that operation. Simply drag to the page and scroll position is automatically kept.
An example page exists in the web block.

Please let me hear your feedback on this.
 
 I've been using this block for a while now, but it doesn't seem to be working with the IE browser. FF does fine.

Any idea what it could be?

Kind regards,
Evert

Edit: in chrome it also doesn't seems to work