I'm trying to create a website that meets certain accessibility standards with tab clicks. I have a navigation menu on the left side of the screen and my users are requesting a "Skip to content" link so they don't have to constantly cycle through multiple links to get to where the content is.
However, I'm using AngularJS in my web app, and if I use the standard skip to content functionality (example: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html), it won't work. I'm already using anchors (with #s) for the Angular code.
Is there any other way to implement this? I have a particular div tag that I would like the tab selection to go to. It should go to one of the elements inside the div.
I've used angular-scroll to good effect before. It's lightweight (8.5kB), easy to use, and even takes care of scrolling animations for you. It also meets accessibility standards, as the Tab key can be used to navigate just like a normal anchor tag.
Implement like this:
JS
angular
.module('app', ['duScroll'])
.controller('MainCtrl', function ($scope, $document) {
//Controller logic here
}
HTML
Navigation Link
<!-- further down the page -->
<div id="nav-one">
Content goes here.
</div>
Working CodePen for reference: http://codepen.io/Pangolin-/pen/dPQRZa
I recently worked with $anchor$croll and have some tips for you.
In your template:
Go
...
<div id="hello-scroll">Hello Scroll!</div>
In your controller:
angular
.module('someModule', [])
.controller('scrollCtrl', function($scope, $timeout, $timeout, $anchorScroll) {
/**
* #name scrollTo
* #desc Anchor scrolling within page using $anchorScroll
* #param {String} hash - Element ID.
* #return void
*/
$scope.scrollTo = function(hash) {
$location.hash(hash);
$timeout(function() {
$anchorScroll();
}, 100);
}
});
The reason I added the $timeout call is because when I tested it without it, the $scrollTo didn't seem to work. It seems that the call to $location.hash(hash) takes some small time to process, hence the 100 ms wait.
Related
I'm working on a gatsby-react project that has multiple pages. On the header & footer there are links to other pages within my project. When I click on the link, the URL changes, the browser loads the new page and renders it normally.
The only problem is that the new page isn't loaded from the top. For example, if I'm currently viewing the bottom of the page and I click a link, then I expect to be taken to the top of the new page. What happens is I am taken to the new page, but I stay at the bottom. This image should explain what I mean.
I'm NOT using GatsbyLinks as they cause problems in the project, I use normal <a> tags for links instead.
Can I add anything to the <a> tag that can force going to the top of the page? If not then is there some other linking component I can use?
Thanks in advance!
The process of scroll restoration is handled automatically by Gatsby, however, using anchor links (<a>) for internal navigation (outside the scope of React) may lead to this kind of issue, since the data of the page it's cached but you are not using internal navigation to manage or restore it.
That said, I would suggest using the useScrollRestoration hook when needed:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
For a more global approach, you can also play with gatsby-browser.js APIs such as onRouteUpdate and shouldUpdateScroll, both triggered in each change of page (navigation):
exports.onRouteUpdate = () => {
if (typeof window !== `undefined`) { window.scrollTo(0, 0)}
}
exports.shouldUpdateScroll = args => {
return false;
};
By default, shouldUpdateScroll gets the last scrolled position, ideally, just changing and returning false it should work for your described scenario.
I have a page with a few anchors. When a user clicks an anchor, the anchors work, and user is taken to the correct location.
If a user tries to refresh the page, it retains the anchor ID in the URL window and so naturally, when refreshing, it does not go back to the top of the page.
I think it would be more user friendly to go back to the top of the page on a refresh.
How would I achieve this?
My page currently is primarily using bootstrap, css, jquery, javascript, and php.
I think I need to set up some code so that after clicking the anchor, it removes the anchor from the url window, so that if someone refreshes, they'd be refreshing just the initial page state without an anchor, but I don't know how to begin. Or maybe I'm over thinking this and there's some way to always go to top of page on a refresh regardless of anchors or not. I'm not too code savvy.
Right now my code is like this...
An example of one of my anchors:
<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>
One of the elements for example that the anchor will jump to:
<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;"> </p></div>
CSS style on my anchors:
.anchor:target { height:200px; display: block; margin-top:-2em; visibility: hidden;}
Actual Results With My Code: Page Refresh Stays At Anchor Location
Desired Results: Page Refresh Goes To Top Of Page
After some searching, I found a solution that almost works for me:
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
But it creates a flickering effect that doesn't look the best such as my example site at
https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html
Anyone know how to remove the "flicker"?
You can try this (with the .some-anchor is the class for all a tag that points to some destinations within the page).
$('.some-anchor').click(function() {
var target = $(this).attr("href");
$('html, body').animate({
scrollTop: $("" + target).offset().top
}, 1000);
return false;
});
The "return false;" or preventDefault() event method will prevent the page from flickering. As I observed this does not make the # to the URL so refreshing is not a problem.
Other helpful answer: jQuery flicker when using animate-scrollTo
Navigating to page content using URL Fragments (#someLink) in anchor tags is a core part of the HTML specification. The standard implementation in most (if not all) web browsers is to add the fragment to the address bar. The fragment is part of the URL and therefore, when the page is refreshed the browser scrolls to the element with that ID. Most users will be familiar with this behaviour, even if they don't understand how or why it works like that. For this reason, I'd recommend not working around this behaviour.
However, if it is absolutely necessary, the only way to achieve the result you're looking for is to not use URL fragments for navigation and use JavaScript instead, therefore not putting the fragment in the URL in the first place. It looks like the Element.scrollIntoView() method might do what you're looking for. Rather than having
Click me
you'd use
<a onclick="document.getElementById('element1').scrollIntoView();">Click me</a>
or even better, implement this in an external JS file. If you experience issues due to the element not having the href attribute, you could always add an empty fragment href="#".
You can remove the id from the url right after the user click on the anchor tag
history.scrollRestoration = "manual" will set the scroll to the top of the page on refresh
<a onclick="removeAnchorFormURL()" href="#sec-2">here</a>
<script>
history.scrollRestoration = "manual";
const removeAnchorFormURL = () => {
setTimeout(() => {
window.history.replaceState({}, "", window.location.href.split("#")[0]);
}, 100);
};
</script>
window.location docs
location.href docs
location.replace docs
scrollRestoration docs (check it for info on scrollRestoration compatibility)
For a singlepage website, how do some of those websites strip that #section id from the url?
For example: http://www.formationstone.com/
There's no /#about-us; it's just showing the root domain on every subsesuent click from their menu.
I think it may have to do with htaccess, but I can't find the relevant code where I only want my root domain showing on all links.
They are not stripping it, they just use a javascript onclick event to prevent the actual default event of the link and scroll to the headline. If you go to http://www.formationstone.com/#about the hash stays.
Let's have a look at the source code.
This is the link in the menu:
WHO WE ARE
And this is the DOM object it scrolls to
<section id="about"> <h2>Who We Are</h2> ... </section>
And the click listener is on line 128 of http://www.formationstone.com/wp-content/themes/Ignyte/includes/main-scripts.js?ver=4.9.5 line
jQuery('#menu a[href]').on('click', function(event) {
if ($(this).parent().hasClass('telephone')) {}else{
var target = jQuery(this).attr('href');
if( target.length ) {
event.preventDefault();
jQuery('html, body').animate({
scrollTop: jQuery(target).offset().top+75
}, 1000);
}}
});
It takes the href attribute of the clicked link (which is #about) and uses it as a jQuery selector, e.g. $('#about') which is the <section>. And then it scrolls 75px below these section header with a 1 second animation. The thing you are looking for is in line 145: event.preventDefault();. This stops the browser from executing the default event, which would be calling the URL #about.
A side note: There are two ways to make a direct call to http://www.formationstone.com/#about work. With a named anchor:
<section id="about">
<a name="about"></a>
<h2>Who We Are</h2>
</section>
Or with a hash listener (that's what they are using, I just couldn't find it easily). It would be something like:
$(document).ready(function() {
if (window.location.hash) {
var target = jQuery(window.location.hash);
if( target.length ) {
// scroll immediately without animation
jQuery('html, body').animate({
scrollTop: jQuery(target).offset().top+75
});
}
}
});
Everything past the # in a URL is mainly for the browser's benefit, not the server. .htaccess doesn't have much to do with this issue.
I'm not sure what SPA technology you're using, but using Angular as I do, the way I'd avoid having an anchor tag show in the URL is by not using Angular's router -- simply show and hide sections of your SPA by changing the visibility of the various sections directly.
One disadvantage of doing this is that a user can't bookmark a particular section of your app and return there reliably based on the URL they've bookmarked.
I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using link functions that inject the current element allow for great behavior functionality, but this doesn't explain a problem I always encounter.
Example:
I have a sidebar I want to open by clicking a button. There is no way to do this in button's directive link function without using a hard-coded javascript/jquery selector to grab the sidebar, something I've seen very frowned upon in angularJS (hard-coding dom selectors) since it breaks separation of concerns. I guess one way of getting around this is making each element I wish to manipulate an attribute directive and on it's link function, saving a reference it's element property into a dom-factory so that whenever a directive needs to access an element other than itself, it can call the dom-factory which returns the element, even if it knows nothing where it came from. But is this the "Angular way"?
I say this because in my current project I'm using hard-coded selectors which are already a pain to mantain because I'm constantly changing my css. There must be a better way to access multiple DOM elements. Any ideas?
There are a number of ways to approach this.
One approach, is to create a create a sidebar directive that responds to "well-defined" broadcasted messages to open/close the sidebar.
.directive("sidebar", function(){
return {
templateUrl: "sidebar.template.html",
link: function(scope, element){
scope.$root.$on("openSidebar", function(){
// whatever you do to actually show the sidebar DOM content
// e.x. element.show();
});
}
}
});
Then, a button could invoke a function in some controller to open a sidebar:
$scope.openSidebar = function(){
$scope.$root.$emit("openSidebar");
}
Another approach is to use a $sidebar service - this is somewhat similar to how $modal works in angularui-bootstrap, but could be more simplified.
Well, if you have a directive on a button and the element you need is outside the directive, you could pass the class of the element you need to toggle as an attribute
<button my-directive data-toggle-class="sidebar">open</button>
Then in your directive
App.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
angular.element('.' + attrs.toggleClass).toggleClass('active');
}
};
}
You won't always have the link element argument match up with what you need to manipulate unfortunately. There are many "angular ways" to solve this though.
You could even do something like:
<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
...
</div>
The best way for directive to communicate with each other is through events. It also keeps with the separation of concerns. Your button could $broadcast on the $rootScope so that all scopes hear it. You would emit and event such as sidebar.open. Then the sidebar directive would listen for that event and act upon it.
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs