Web design: "scroll-down navigation" - web

What is the technique called that is used in some web apps, like http://www.alfredapp.com where the navigation scrolls down the site to reveal another site?

To get such way of navigation, i would put all of my content on a single page and use a "smooth scroll effect", like the one on this site, to switch between sections.
You will find plenty of more JavaScript (and jQuery) based "smooth scroll effects" by simply googling "smoth scroll through page sections".
That's how they probably done it on alfredapp.com too.

Related

How to implement scroll to a section/fragment on click in Liferay?

I want to implement scrolling to a particular section on click in Liferay, but I have no idea how to add functionalities in Liferay.
I have created a page using multiple fragments and in the top of the page I have headers of the sections and on click of a header the page should be scrolled to that particular section.
Attached page screenshot link below for reference
The easiest way to scroll to some place on the page is to place an anchor there, e.g. with <a name="scrollTarget"/>. In your navigation, you'll just link to this by Scroll to Target and you're set.
Of course, this can be done a lot fancier, with an animated scroll etc, but the basic start is this. There's nothing Liferay-specific hidden here - pick any of the more fancy methods, create fragments with the proper markup, and make sure they're used on your page.

How to add menu items for a single-page web part?

Is it possible to have menu items added for a single-page web part in the menu bar? I want to add a menu to the area usually used for menu commands (please see the screenshot):
I am talking about this sort of single-page app web part: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages
My question is, it possible to put some items in the designed area, and if yes, how?
I have tried to do it with command set extension (and ECB). The commands are coming for a normal list, but for a single page web part, they are not.
Talking about options, could it be an acceptable to "attach" a component like fabric CommandBar to this area (i.e. find it in HTML and attach), or maybe there is a standard way to do that (like, designated placeholders)
Got the answer here:
https://github.com/SharePoint/sp-dev-docs/issues/6014
It is not possible right now.

How to create a user-impaired accessible website: surfing without a mouse?

I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement

What is the alternative to putting UIWebView inside UIScrollView

I have gotten UIWebView inside UIScrollView to work, so far anyways, and I have just seen mention on Apple's site that doing so is not advised.
So OK, what's the alternative? I need to display web pages, and I need them to be scrollable, such that if the user swipes leftward then an entirely different page appears coming in from the right. And a reverse situation with swiping rightward.
How is that done without putting UIWebView inside UIScrollView?
Thanks.
Well, you need the UIWebView, which has indeed many features of a UIScrollView, to be able to scroll not only up and down, but also to left and right.
Also, scrolling with two fingers is a no-go, for scrollable elements within a web page, such as textareas can only be scrolled with two fingers.
Three fingers is also not so good because that's not convenient for people with thick fingers...
So my suggestion is that you add a UIGestureRecognizer to your UIWebView and look out for a swipe gesture. Then handle the switching of pages accordingly with animations.

WebSite Navigation design

I'm designing a blog site and is confused about position of navigation pane on my site. Please suggest wheather I should go with design having navigation panel on top of page, on left sidebar or on right sidebar? Which one is preferred?
Can you give some examples supporting your answers?
If there are just some points: put it on the top. The disadvantage is, that most people have widescreen monitors, so they have to scroll more. If the navigation is on the right, people with smaller monitors can't see the navigation without scrolling. If you put it on the left, they maybe have to scroll to the content. Always think of the smaller monitors, then there should be no problems :)

Resources