Jquery Mobile $(document).on('pagecontainershow') & $.mobile.changePage() - javascript

The issue I am having is when I am navigating between pages from the main menu page. If I navigate to 2-3 pages too quickly, the new page appears for about half a second before the page shifts back to the previous page then about half a second later it finally goes back to the page referenced in $.mobile.changePage(); For instance, from the menu page, click on the link to go to page 1, then really fast click on the button to go back to the menu page. After a few times of clicking quickly, page 1 will turn into the menu for half a second, turn back into page 1 for half a second then finally reload the menu page. I realize that in the real world most users won't navigate like this but I can't have a bug like this present as it can cause problems with loading form data. Would that be causing the issue?

Related

Load previous pages on top of the page when "history.back" (click browser back button)

The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy loading over shop/category pages through AJAX. Also, once the next page is loaded, the application updates the browser's URL with the pushState() method.
Case study:
Imagine you visit example.com/shop, and you scroll down. When you reach the footer, the next page is lazy loaded through AJAX and the browser's URL updates to example.com/shop/page/2. Once on page number two, you click on a product (example.com/product/lorem-ipsum), read the details, and see the pictures. Then you decide to go back by clicking the browser's back button. In that scenario, now you are back to the page example.com/shop/page/2, but the problem is that page one does not load on top of page two, so only the products of page two are showing. Once on page number two, can I automatically load the previous page/pages above the current page?
Real example:
If you visit the Nike website, you will see what I would like to achieve on my website. Please, load multiple pages scrolling down. Once done, click on a product and go back by clicking the browser's back button. Once the page is loaded again, you will appear in the exact place where you were before visiting the detail page, and you will see how the previous pages have been loaded on top of the product that has the focus (just the one you clicked).
What I have tried:
I have searched over the internet, and I haven't found anything. Maybe I do not know what to search. I have read that the window popstate event is fired when you click the back/forward button. I have tried to use this event to run some tests, but I have failed. I'm lost :(
Can you help me, please? Thanks in advance.

VUE When I used $router.push.() to jump other page,back button will jump to the last page

There is a HTML page in my vue project
when I press "+" button,it will jump to this page
This page is for user to timing,and the last page is time list.
Now,I`m doing timing in TimingPage and press "保存"(save),it will going to TimeList page,and print time witch I have set.
and than,I press the "Native" back button(!!!this native button is not the back button in my page,it`s button in the browser or your smartphone!!!),it will going to Timing page instead of home page!
Just like when you click the back button while browsing, it will jump to the page you just visited instead of the previous page.
there is my code:
<van-nav-bar
:title="$t('socketPage.addTiming')"
:left-text="$t('socketPage.cancel')"
:right-text="$t('socketPage.save')"
#click-left="$router.push('/timeList')"
#click-right="saveTime();$router.push('/timeList')"
></van-nav-bar>
I used $router.push.() to jump.
excuse my poor english .
If I unnderstand you clearly, then the issue is with how you are routing. Using $router.push() will always add a route to the routing stack so going back will take you to the previous page on the stack.
To solve this, use the $router.replace() or $router.pop() method instead in the TimingPage
To further understand the difference, check this out.
HTH

Angular infinite scrolling: reloading page

I'll show you a use case with Angular & ng-infinite.
I've scrolled for 2 pages, so I've pages 1, 2 and 3 loaded in my SPA.
The url reflects the page navigation, so page=3.
Now I want to refresh the page: i'd like to have in my page only items of page=3.
The problem is that the browser remembers the previous scroll position of the page reloaded.
So this is what happens: items of page=3 are correctly loaded (OK), browser remember scroll position, it goes to that position (bottom page) and this triggers nginfinite -> ajax call for the page=4 (NOT OK).
If I were on the top of the page before refreshing the page, refreshing the page wouldn't trigger nginfinite.
So it depends from the scroll position of the page before it has been relaoded.
I tried with window.scroll(0,-500000) with no success.
Any suggestions?
I think it seems like you need some browser persistence to help you out on this one.
When you refresh the page you lose everything you know about the app before the reload and so you cannot make any difference out of normal first time behaviour and undesirable reload behaviour.
Put your current Page number into localStorage and check localStorage when your app start up after reloading.

Next view loads before old view clears

I've been having this strange problem from the beginning of the project until now. When clicking through pages, it seems as though the new (or 'next') page loads the view before the DOM is cleared. So it sometimes stacks elements from the next page under the old page, then after a slight delay the old page gets cleared.
For example, the first screenshot is the login page:
And the second screenshot is if you click to 'sign up'.
To clarify, this happens when loading pages too. For example I have links in a nav bar:
ONE
TWO
And clicking through those pages I see stacked dom elements. Is it cause of this "#" situation?

How does Facebook scroll to middle of timeline banner without delay?

Facebook has two ways to display somebody's timeline: starting from the very top, showing the full banner, and semi-scrolled, so the banner is cut in half and the profile picture is very close to he floating navigation.
However, the semi-scrolled state seems very natural, there is no delay. The page does not suddenly jump when the content is loaded.
How is this feature implemented in general? Simple window.scroll seems not to be cutting it as it's too slow (has to wait for the content to load to actually have something to scroll) and rather hinders user experience.
You assume in your question the initial loading of the page. That assumption is wrong, because the "page", so to speak, is already loaded.
When you are visiting one facebook page, and then navigate to someone's timeline, it's not a full page refresh in the browser, switching from one page to another. Rather, it's all done via ajax. The "previous" page is not really unloaded by the browser, and the "next" page is loaded via ajax.
As for the url changing, that's a different topic (history pushState).

Categories