I'm using angular-chart (http://jtblin.github.io/angular-chart.js/) to make a single page application with differents chart.
The page could be scrolled to see all charts.
I had a problem with the behaviour of the browser after data refreshing (using asynchronous call to restfull services): the page is scrolled up or down automatically, depending on the "last" response obtained from the services.
My aim is:
- if I am in the middle on the page, I want to stay on the middle of the page
- if I am in the top on the page, I want to stay on the top of the page
- if I am in the bottom on the page, I want to stay on the bottom of the page.
Can someone suggest me any solution to avoid this scrolling (to disable/ignore this scrolling)?
Related
I have a React website here: www.assertivesolutions.ca.
If you visit the site in Chrome and scroll down to the "What We Do" section and click on the "Our Services" button, you get taken to the Our Services page. Notice is starts further down on the page and scrolls up to the top. This is because, as an SPA, it doesn't really go to a different page; it stays on the same page and just changes the content. So if you're scrolled half way down the page before you click the button, it will still be half way down the page after you click the button. So I implemented a fix to scroll to the top in the componentDidMount() hook:
componentDidMount() {
window.scrollTo(0, 0);
}
However, if you try the same thing in Firefox, it does not work. It stays scrolled half way down the page.
So I can take two approaches to solving this:
Figure out how to get scrolling to work in Firefox.
Figure out a different way of making sure the Services page loads at the top other than using window.scrollTo(0,0).
I'm leaning towards 2) because I have to imagine there must be a way in SPA websites to accomplish what I want.
Does anyone know how I can accomplish either 1) or 2) (preferably 2).
So I've started getting the hang on ReactJS and have built myself a basic Single Page Website (SPW?).
It currently is 1 "page" (really just an area which spans the whole screen) with the ability for the user to scroll down to the second "page" by clicking a button (or just scrolling).
Now what I need to do is give the user the ability to scroll up as well... to another "page".
Content Area 1
↑
LANDING AREA (user must be dumped here on initial load of the site)
↓
Content Area 2
I hope this makes sense?
EDIT: Apologies for the incorrect use of "SPA"... I've since learned the difference between that and a single page website.
A "single page app" doesn't mean you literally have all of the content on one page. You can have different "pages", however loading them won't cause a page refresh because they're not new html pages served up by the server. You should look into React Router if you want people to be able to navigate to different "pages" in your SPA, otherwise you can look into window scrolling so that you can move up and down.
According to my understanding you are trying to build one page website where each content section you linked with internal page linking & added button for the users to scroll top/bottom. It's not single page application. It's single page website. But, for learning curve it's good to start.
I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?
when I refresh a view on my website I would like it to take the user to the same position on the page, right now every time I refresh it takes the user back to the top.
It should always go to the top when you switch between different pages but for refresh/F5 on the same view it should not take you back to the top.
I tried a few other solutions to this problem on stackoverflow but nothing worked for me.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)