Having a contact list build with Polymer's neon-animated-pages (Plnkr), the navigation through them is clear. But using a mobile device for example, when hitting the back button, the complete page dissapears i.e. it 1) exits the application or 2) goes back to the previous page instead of the previous neon-animated-page.
Any change to achieve this behaviour to be navigating like a normal page?
Thanks in advance!
Related
I'm using ui-router.
A similar question has been asked on this a Number of times... But the solutions seem to be all over the place and either the question doesn't address a simple idea or the answer doesn't, either.
Here's my simple ui-view setup:
A master view has the navbar and footer
Children of the master view/route that can be activated include the Homepage, About Us page and Learn More page
Pretty simple...
By default, if the homepage is activated, and scrolled down 500px, and I click on a route to the "About Us" page, that page will be scrolled down 500px. Obviously this is not desired.
So... Everyone's solution is some variation of setting document.scrollTop(0) on every state change success. This is atrocious.
While it fixes the issue at hand, it clobbers the browser back button behavior. Here are some problems:
When a refresh is called, the standard browser behavior of refreshing to the current location is ruined
When the back button is clicked, the homepage would then scroll all the way to the top
If the back and forward button were clicked, I wouldn't retain the correct spot on the next page, either
This whole document.scrollTop(0) or any variation of it, really doesn't seem to be viable and I've yet to see a clear solution to this.
There is a page with thumbnails. At the bottom there is have a "Show more" button that loads more thumbnails. A user can click on a thumbnail and re-direct the application into details. When the user clicks browser's "back" I would like him to land in the same position as before. How to achieve this without complex routing?
You can achieve something like this using angular-bootstrap-lightbox and the ui-bootstrap pagination. Both are Angular and use common resources
EDIT:
What you're looking for is something along the lines of scroll-sneak, you want to save the scroll position when you redirect to another page and load the last position when you redirect back.
since I could not find any angular directive to do so, you can either
get one and wrap it around a directive, most of them use jQuery
you can make your own.
for example, you can use js to define a queue array and store it in localStorage/sessionStorage, when you redirect "push" the current page location to the queue, when you redirect back, "pop" that last stored position.
Maintain Scroll Position of large HTML page when client returns
We're developing a simple app with the sencha framework
The app consist of a few tabs( a tabPanle with bottom tabBar) and the switching between tabs works perfectly when we use it as it is on the sencha docs, alas when no live data is present.
When we add stores within the single tabs, functionalities breaks, tabs stop switching and every time one clicks a tab to change the view, a flickering appears, the default tab is loaded again(from the chrome console we can see that all the remote data request of the loginView get reissued) and the only tab that remain visible to the user is tab[0].
app.js --> http://pastebin.com/S9qaNfij
mainView.js ---> http://pastebin.com/uiG2E0AW
controller.js ---> http://pastebin.com/8MTfxC85
This was created with senchaArchitect, that btw is awful and quite useless if not to work visually with the components.
here is a little movie of the thing happaning.
http://youtu.be/OVOSOWhMZeE
What are we doing wrong?
I think it's your button listener, it seems that it might be being triggered on even the tab panel button taps. I would try giving your button a unique ID and then create a ref and an action to login based on that ID.
I have a really strange issue relating to how I handle navigation in an application, and that application now being rejected from AppHub (after being successfully approved a number of times on the same code base... grr)
currently I am capturing the first navigation of the application and routing it an "add item" page in the App.cs using the example found here
the user then adds an "item"
the user is taken to the "main" page again, but stay there are there is now 1 "item" to show in a list
the user then can view a "detail" page of this item where they can select to delete the current item. when they do that I redirect them to the "main" page again.
this navigation then fires the same thing that happened in step 1
and they are routed to an "add" page
the problem with the above process, is that if the user hits "back" on the routed page in step 5 they don't go anywhere as they are routed back to the current page (because there are no items on the page previous and this fires the app.cs routing event to take them to the add page). if I did allow for them to go back, the actual first page they would be able to go back to is 3 nav steps back, when they first added the item - as they are on the "add item" page already, this would be pointless.
The apphub store testers say that in this instance, the application should close. I really don't know how the f&*k I am meant to make this happen, as there is no "go back until close" action I can call...
thoughts?
When the user decides to "delete" the current item, you shouldn't navigate forward to the main page, leaving the deleted item in the navigation stack. You should navigate back to the main page. That way the navigation stack will be empty, and if they navigate back again, the app will close.
(The same is true at step 3, of course - when the item is added, navigate back to the main page. You don't want the "add" page as part of the navigation stack; that action has been completed.)
The single best advice I read on WP7 navigation was "if you don't have to, don't use it." I've almost stopped using it all together and just use "MainPage.xaml" for loading/unloading user controls that do this kind of stuff. I completely control the Back button as needed. It has saved me so much headache. The important thing to realize is that the Navigation pages are really just mimicking a website and it's pages - many apps do not fit that paradigm (as they are apps, not websites). So, if you don't have to use Navigation, don't use it.
So in your case, if you just managed everything on MainPage.xaml, you would use a number of If/Then statements in OnBackKeyPress and if one meets your criteria, do an e.Cancel = true; and show/load/etc. your thing. If not, let the app navigate out of itself - i.e. exit.
For tombstoning, just let the OnNavigatedTo in MainPage.xaml handle loading the right user control received from tombstoned information retrieved from Application_Activated.
I'm working on a WP7 appliation with Silverlight. When a user clicks the back button, I want to determine where they will go to. Is there a way to determine where a user will go without managing my own nav stack?
thanks!
To respond to the question that has actually been asked "Is there a way to determine where a user will go without managing my own nav stack?"
You could use the OnNavigatingFrom override the eventargs of which carries the Uri of the page being navigated to. I suspect this is only useful when the navigation is back to page within your app.
You cannot override what the back button does - the rule Derek mentioned is enforced by the system and the previous page/app will always be called.
You can, however, add an action to be executed on back key press:
this.BackKeyPress += new EventHandler<System.ComponentModel.CancelEventArgs>(MainPage_BackKeyPress);
Then just use the handler:
void MainPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
{
// Your activity goes here
}
The application will go back to the previous page when the user presses the Back button. If the user is at the last page in the application, then the application will exit and the user will be navigated to the previous application. To perform anything else would be inconsistent, confusing to the user, and almost certainly would fail certification.
In general you'll want to build your app composed of pages (similar to a website). For example a HyperlinkButton might be used like this:
<HyperlinkButton NavigateUri="/Page2.xaml" Content="Click here to enter page 2"/>
After clicking that then pressing the back button will automatically return to the previous page. There's no extra programming involved to make this happen... it just works.
But there are some circumstances where you'll want to override the back button. The one I ran into was the dialog box. If your app creates a dialog box, then the back button should close it instead of returning to the previous page. I wrote a brief article about how to accomplish this.
And here's a complete list of rules from Microsoft's certification requirements concerning the back button:
To maintain a consistent user
experience, the Back button must only
be used for backwards navigation in
the application.
a. Pressing the Back button from the
first screen of an application must
exit the application.
b. Pressing the Back button must
return the application to the previous
page.
c. If the current page displays a
context menu or a dialog, the pressing
of the Back button must close the menu
or dialog and cancel the backward
navigation to the previous page.
d. For games, when the Back button is
pressed during gameplay, the game can
choose to present a pause context menu
or dialog or navigate the user to the
prior menu screen. Pressing the Back
button again while in a paused context
menu or dialog closes the menu or
dialog.
As I found out, if you don't follow those rules they won't approve your app.