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)
Related
Because 2sxc Accordion App have in settings "Initially open/close" switch for each section, I wonder is it possible to tweak this in some way to get Accordion initially open for desktop page view and initially closed for mobile page view?
It would save space / scrolling time and look more appealing in mobile page view.
Or just take this as idea for some next version of this App.
This would be fairly easy to do. I suggest you do the following:
The toggle for open/close could be replaced with the boolean-tristate, so you have a true (open), false (closed) and null (automatic).
Then adjust the razor code a bit to make this happen.
If you got it to work, it would be awesome if you could contribute your code to the app in github: https://github.com/2sic/app-accordion
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 wrote an ExtJS application like this:
the sub menu is dynamic added by clicking the button on the left.
The question is :
as the sub panel is created dynamically, so if I refresh the whole page, the panel will go away.
What I expected is it could still display the same content before refresh pages.
So, my question is how to handle this in ExtJS?
Do I need to record the current panel information into Ext.App?
ExtJS is a framework to build Web Applications that run inside the browser.
With Web Applications, just like normal applications, you don't close the program and start it anew (like a browser refresh does) just because someone wants to switch to a different toolbar or look at different data. You work with multiple panels, switch between them, and/or open windows.
You could for instance generate multiple panels inside a container with card layout, and bring to front the panel that you want to show right now.
If you have a license that allows you to use Sencha Architect, there is a nice "navigation" sample available in Architect from where you can start and look at how it's done.
When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?
Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive
If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.
And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event
You should look into the Angular $anchorScroll service.
http://docs.angularjs.org/api/ng.$anchorScroll
It is for exactly your scenario!
The sample code pretty much speaks for itself.
I'm running a dotnetnuke project (v7.0) with 2 portals.
I need to remove the default DDR menu from one page only.
The menu works great now with multiple pages and sub-pages, however on 1 specific page , ie landing page, I don't want to show the menu.
Right now I can think of 2 methods for achieving this:
Create a new skin template, remove menu, apply template to that one page
Use jquery to detect URL, for that page hide menu.
I'd rather just code the logic inside the template file, but I'm not strong in .net/c# and I'm new to DNN.
It's just one page today.
However, if you are using it for a landing page design I would recommend you just create another skin and exclude it from that and tailor that skin for that need.
That way when your non-technical editors need to work on the site and make a page that might only be used when linking from Google Adwords or whatever they can pick a template without that navigation and you as the developer/designer don't need to edit the skin to put in another exception based on the URL.