I have built a single page application using VueJS. There are multiple sections with IDs. In the header I have an <a> tag that links to the corresponding IDs in order to simulate a (sticky) header (-> the header is visible throughout the whole page)
I would like to highlight the current section that the user is looking at. Is there any convenient way (preferably using Vue) to get the nearest/visible/currently active section?
Related
Take a look at this pictures and description that I'm going to describe in the most understandable way possible.... These are my router-links
and on the side is the router-view / ProfileView.vue component that will display the details of that person, just don't mind the reds, it's just that those are very private keys to be displayed online
How do you disable /fix this specific default behavior wherein after you refresh the whole webpage the specific router-link is still selected and the router-view is invisible. Refreshing the page returns like this
Best way is to update the url with the unique identifier (UUID) once the item get selected. Now when you refresh the page just identify the item using the (UUID) in url and apply the specific item using active state. As per the router-view case you can easily handle it with the url defined case - make /profile:id expect a parameter, which will only provided when you click any of the router-link else redirect back to items page with the last selected UUID to highlight the last selected item
How does the aria-current works as we need to tell the screen reader where the page it is even after user does not made any movement on the laptop. Which Aria can be used ?
Aria-current works by informing the screen reader which element is current. For example, you can use aria-current="page" on a list of navigation links where it shows by visual decoration (color or underline, etc) which page link is currently chosen. Aria-current="step" could be used if there is a visual indication of checkout steps (for example) to show which step (2 of 3) the user is currently on. Aria-current="true" could be used if there are a set of size links to show which size is currently selected.
aria-current is one of the attributes defined in the WAI-ARIA specification, meant to help people with disabilities to perceive common UI widgets that are not part of the HTML specification.
It should be used to identify the current item in a set of items and it can take several values:
aria-current="page": indicates the current page within a set of pagination. It can be used, for example, within a main pagination widget (likely in the header).
aria-current="location": indicates the current page within an hierarchy of navigation. In can be used, for example, within a breadcrumb widget.
aria-current="date": indicates the current date. It can be used, for exemple, within a date picker.
aria-current="step": indicates the current step within a set of steps. It can be used, for exemple, within multi-step wizard form.
In TYPO3, how do I get a login form to be the first rendered content element on a page and all its sub pages? I tried to check the "recursive" option but that doesn't seem to do the trick?
There are quite a few ways to set up something like this. Here's one approach:
Add a separate content section in your backend layout right above the current section.
Use slide to have pages inherit content for this section from their parent pages
Put the login form in that section on your the root page of your subtree.
This rather simple approach leaves control to the editor.
The recursive option you mentioned is very likely related to the record storage page and tells TYPO3 to look for records (here: users) in subpages of the selected page.
I have used Dojo-Tabcontainer to create tabs. I want to have a separate template for every tab. So, when a tab is clicked I want a new page to be loaded and the url to be changed.
Can you please suggest a way to do this using Markup instead of programmatic way?
I'm thinking of using Template Inheritance while creating html page for each tab to avoid redundancy.
I can get some clue from this:
How to change Dojo TabContainer behaviour to simply open an external link instead of showing a ContentPane?
But I'm not sure how to do it via Markup instead of programming.
Does anyone know how to programmatically move/order the pages and subsites that appear in the Current Navigation when you have the Include subsites and include pages options ticked/enabled?
Background
I have written a class (in c#) which imports content into a new SharePoint site. The newly created subsites and pages all show on the Current Navigation menu as expected, but in the order they were created (I assume). I need to manually sort the pages on the menu so that they appear in the same order as the existing non-SharePoint site.
Issue
The PublishingWeb.Navigation.CurrentNavigationNodes collection does not contain any SPNavigationNode items for the pages and subsites that are automatically displayed on the Current Navigation menu, so I can't use this collection.
I know that to hide a particular page from the menu, you have to update a web property as follows:
web.AllProperties["__CurrentNavigationExcludes"] += page.UniqueId.ToString() + ";";
web.Update();
Is there something similar I can use to order the pages?
Set the Ordering to manual
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.publishing.orderingmethod.aspx
Check out the follow up article on this: http://www.thekickboard.com/archive/2010/09/01/programmatically-setting-navigation-order-in-a-moss-publishing-site.aspx
Is this sort of what you are looking for:
http://www.thekickboard.com/archive/2010/09/01/programmatically-setting-navigation-order-in-a-moss-publishing-site.aspx