Search jQuery

jQuery Forum

lehner.br..

Multi-Page transition jumps to top before navigation

in jQuery Mobile • 11 years ago

Looking at the demo, the jquery mobile page for multi-page transitions always jumps to the top of the page before transitioning. Is this as expected? It seems really confusing to me as most mobile devices not only do not jump to the top of the screen before navigating, but also remember the location of the screen if the user navigates back. This issue is for sure reproducible on chrome (if you make the browser windows small enough that you need to scroll vertically) and safari on iPhone at this page:

http://jquerymobile.com/demos/1.0rc2/docs/pages/multipage-template.html

Has anyone found any work around for this issue? This would unfortunately make jquery mobile not viable for my application if this is expected behavior.

Replies(6)

webdpro

Re: Multi-Page transition jumps to top before navigation

11 years ago

I think that is a default behavior, I could be wrong but I think it had to do with the blinking issue or something like that so it defaults to the top of the page. Take a look at $.mobile.silentScroll(0);, that will allow you to set the Y position of the next page so you may be able to just grab the current y position of the page and set that on transition.

lehner.br..

Re: Multi-Page transition jumps to top before navigation

11 years ago

Thanks for the tip. I went hunting for $.mobile.silentScroll, and saw that it was always being used in the "transitionPages" method to set the variable "toScroll" to 0. When this happens, then the page is always scrolled to the top of the page before navigation. I played around trying to hard code toScroll and a few other variable to different values and was able to get the page to not navigate to the top, but anything that was below the original display line (the distance that I hard coded to scroll to) was not rendered properly :(

I also tried calling $.mobile.silentScroll during different transition events to see if that had any affect, and it did not appear to. This makes sense because it is used later by the transitionPages method to set the page size.

Does anyone have any thoughts about how I could get around this issue?

Thanks in advance for any advice!

lehner.br..

Re: Multi-Page transition jumps to top before navigation

11 years ago

I have determined that this really should not be necessary, as the entire page in the link I posted is still in the dom before, during, and after the transition. I will see if there is any override I can do to fix this, and report back, but if anyone has any suggestions in the mean time, I would appreciate it.

lehner.br..

Re: Multi-Page transition jumps to top before navigation

11 years ago

Funny, the jQuerymobile had a tweet about this issue today:

http://jquerymobile.com/test/docs/pages/touchoverflow.html

While it does not seem to work for me on their page, I have been able to get it partially working on my own on iOS 5. I will continue looking and report back!

frequent

Re: Multi-Page transition jumps to top before navigation

11 years ago

Hi there,

I managed to turn off scrollTop if transitioning between existing pages (all in the DOM). However if I'm loading a new page into the DOM.... I cannot find the section in JQM, which I need to override.

Any clues are very much appreciated!

Thx

PS: to turn off scrollTop for existing pages, look for this line in JQM //function for transitioning between two existing pages. There are 4 scrollTos in the following function, which I disabled via an if-clause (I only need to prevent scrollTop in certain cases).

PSS: I think the whole scrollTop procedure is done to enable transitions. To see this, shrink your page to width: 50% so you can see what is happening to the right side of the page. Then transition to a new page. You can see the new page being pulled up on the side and then sliding over. I guess therefore you need the ScrollTop.