Saturday, March 24, 2012

Way to stop screen jumping when a page loads with an always visible control

I have an always visible control that is set to anchor at the bottom left. The page that it is on is longer than the height of the window so there is a scroll bar.

If I put the image that is always visible in the HTML so that it isn't initally visible on the page (i.e. at the bottom of the page) then the image isn't rendered correctly at the bottom left - it is barely visible and mostly off the screen.

So I have to place the image somewhere in the HTML where it is initially visible on the screen so that it pops down to the bottom left correctly. However, this makes the page jump around when it is first loaded because the image shows where it falls within the HTML and then it jumps down to the bottom left causing the rest of the page to jump up to fill in the void. I have made the image initally have an opacity of 0 so that it isn't visible and then use the animation extender to set the opacity to 100 on the page load. This at least makes it so the user doesn't see where the image initially was but the page still jumps up because the image is still loaded at the top and then moved to the bottom by the always visible control after loading. Unfortunately, if I set the display to none and then use the animation extender to set the display to block it has the same issue as if the image was initially loaded at the bottom of the page, i.e. only part of the image is rendered in the bottom left and the rest falls off the page.

Is there a trick to use to make the page not jump around when using an always visible control?

I'm wondering if setting maintainscrollposition in the page attribute might help?

That was one of the things I had tried but it didn't help. On this particular page I had to turn off MaintainScrollPositionOnPostback because of another bug in the control toolkit. If you have two always visible controls on a page with one set for the bottom left and the other set for the bottom right but do a postback while scrolled part way down the page then when the page reloads the always visible control on the left positions correctly but the one on the right does not position correctly and just remains where it falls inline with the HTML. Once I turned off MaintainScrollPositionOnPostback this issue went away but of course now we lose the functionality of maintaining the scroll position. We'll see what the user's say. If they want the scroll position back we'll have to remove ajax and wait for a later version or perhaps use another vendor's toolkit if they can't fix this one up soon.


Please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

No comments:

Post a Comment