Clients can purchase an additional tool, usually referred to as DQM here in the web dev circles, that allows them access to a dashboard with access to various ADA information about their site.
They have the option to either purchase this tool in its “basic” state which only includes access to the dashboard, or a “premium” version which also includes a sticky/fixed bar at the bottom of their site and an additional form.
When a client purchases DQM, it will be noted on the trello card for the site. The PC for the site should also note whether they purchased the “premium” version of DQM or not.
Initial Setup
This code provided should work with all sites, and should be included on all new BS4 sites by default. For these newer/fully up-to-date sites, you should be able to turn on DQM premium components simply by changing the “dqmPremium” variable within the package.json to true.
When your site reaches UAT, you will also need to send out an email to get the dashboard set up. That email should be as follows:
Send to: Hannah Toler
CC: The project coordinator on your site
Subject: DQM Dashboard Setup for [FI Name] (Note: Please make sure that your site name matches what is in the <title> tag for your site, otherwise DQM will throw an error. For example, if your site is called “Community Federal Credit Union” in the title tag, it must be exactly that in the subject of the email. Writing something like “Community Federal CU” or “Community FCU” will lead to the DQM dashboard being set up with that name, and an error will be thrown.)
Body of Email:
FI Name: [FI Name] (Note: Please make sure to follow the same rule as noted above in the Email Subject piece. Those same issues apply here.)
jSource #: [The jSource # for your site] (Note: This can be found on the subject line of your trello card. Your development repo and the design repo should both also begin with this number.)
UAT URL: [The homepage of your site which is now up to UAT]
After a few days, Hannah will email you and the PC back to say that the dashboard has been set up. See below for a breakdown of common issues/false-positives you might run into.
Auto Fix
If your site has Auto Fix, there are also a few more steps.
- Copy the HTML below
- Paste it into the global footer code in the CMS.
- If necessary, replace
accessibility-statementin the script with whatever the page url is for your site. - Hit Save (This is all you should need to do for most sites. If the client really pushes back on the look of the Auto Fix component, we are permitted to make some changes. By default, no updates are made to this component.)
- Go into your HTML and script and remove the pieces for the Accessibility Icon, both sticky and otherwise. The Auto Fix popup already includes a link to the accessibility statement form page.
NOTE:
Auto Fix isn’t activated until after the site launches so the client doesn’t have to pay a monthly fee for a Staging site. This means it will not work on Staging. To verify Auto Fix was placed correctly, you should see the following console error on all pages in your site. The error can be disregarded.
acsb: this website is not registered or its license is expired.
Auto Fix code:
<script>
(function() {
var s = document.createElement('script');
var h = document.querySelector('head') || document.body;
s.src = 'https://acsbapp.com/apps/app/dist/js/app.js';
s.async = true;
s.onload = function() {
acsbJS.init({
statementLink: document.location.origin + '/accessibility-statement',
footerHtml: 'Powered By Jack Henry™',
hideMobile: false,
hideTrigger: false,
disableBgProcess: false,
language: 'en',
position: 'left',
leadColor: '#146ff8',
triggerColor: '#146ff8',
triggerRadius: '50%',
triggerPositionX: 'left',
triggerPositionY: 'center',
triggerIcon: 'people',
triggerSize: 'medium',
triggerOffsetX: 20,
triggerOffsetY: 20,
mobile: {
triggerSize: 'small',
triggerPositionX: 'left',
triggerPositionY: 'center',
triggerOffsetX: 0,
triggerOffsetY: 0,
triggerRadius: '50%'
}
});
};
h.appendChild(s);
}());
</script>
How to check for issues, and common issue explanations
When you are ready to check the dashboard over for issues, go to the DQM login page and log in. From there, click “Website” in the top blue list of links. On the next page, click into the large dropdown on the right side, and type in your site’s name. Click it to select it. On the lighter blue menu, click “Issues” to open up the full dashboard for your site. Work through the list, writing down issues as you come across them. Fix the ones that you can, and note the ones that you couldn’t. Also note the issues that should be fixed with non-placeholder content, or can be fixed by the PC within the CMS. If you come across any false-positives, note those as such.
This is not an exhaustive list of issues, nor is it set in stone–sometimes there will be text that is hard-coded that causes this issue. It’s your responsibility to figure out which issues are content and which are hard-coded. If there are hard-coded items that are breaking DQM rules, bring them up with the PC and / or designer for your site to work out an alternative.
Things Dev Can Fix
If any of these errors come up in reference to text within content areas, it is the responsibility of the PC or designer on the project, or the client. This is a list of errors that may occur on hard-coded elements, and how devs can fix those hard-coded items.
1. Content Presentation
1.3 H1 Headings should be no longer than [10] words in length - May be referring to hard-coded elements. Fix if so.
1.4 H2 Headings should be no longer than [10] words in length - May be referring to hard-coded elements. Fix if so.
1.6 Do not have multiple headings with identical text
- May be referring to hard-coded elements. Fix if so.
- If you're seeing this come up on a calculator page, it could be that your calculator banner image is not set up correctly--you need to create a separate version of the calculator banner image/breadcrumbs that has a div with class of h1, instead of using a true h1. This is because the code for the dinkytown calcs already includes an h1, so with this setup we can let that one be the default while also keeping the setup the same.
1.7 Use correctly nested headings
- This may appear when you have headings in a hard-coded element that appear out of order–for example, an <h2> within the Online Banking, that appears above the <h1> page title. For this reason, you’ll need to change that heading to be a div, with a class for whatever heading you need instead.
1.15 Do not overuse uppercase formatting
- If more than 2-3 words are capitalized with shift/caps-lock in content or in hard-coded areas, this error will come up. Instead, to get around it, use the text-transform: uppercase; CSS style on normally-capitalized text. If it’s something in content or random enough in hard-coded areas, speak with the designer to see what can be done to make it more consistent so that they style can be used.
1.17 Do not use bold <b> tags to emphasize text
- Instead, “strong” tags should be used. Update your code to correct the error. This will often come up in reference to the style guide page, because for whatever reason, when the site is scaffolded with content in the page it changes the strong tags to b. For the purposes of clearing the error it’s not too hard for dev to just go into the code view of the page and correct it.
1.18 Do not use italic <i> tags to emphasize text
- Instead, em tags should be used. Same as 1.17.
2. Links
2.1 Broken external links - Make sure that no hard-coded links are broken.
2.2 Broken internal links - Make sure that no hard-coded links are broken.
2.3 Broken images - Make sure that any hard-coded images are in place correctly.
2.4 Do not use meaningless phrases such as “click here” or “more” as entire link text
- Make sure that no hard-coded links are using a phrase like “click here” or “more”. Instead, use that in addition with screenreader-only text. For example: Read More<span class="sr-only"> about FI's articles</span>
2.9 Link text longer than 80 characters in length - On some older site files, you may see this come up in reference to the Adobe PDF reader link. Just shorten that link’s text to say the same thing in less words. Same advice applies to any long hard-coded links that my flag this error.
3. Images
3.3 Image ALT attribute should not be empty, except for on known, decorative images - If you have a hard-coded image that is being used solely as decoration, you can either ignore it (because you know it’s okay), or you can add a simple ALT text to the image for the purpose of clearing the error.
3.7 Images between 50 - 200 KB - For any hard-coded images that give this error, speak to the designer to see if they have a more compressed version of the image that you can use.
3.8 Images between 200 - 500 KB - Same as 3.7.
5. Title & Metadata
5.4 The title tag should contain the company name - By default, our sites should contain the name of the FI in the title tag. Do not remove it. If you are getting this error even though you know the bank name is correct, the name may be set up incorrectly in DQM - this is why it’s important to list the FI name correctly in your email to Hannah. Before you do that, though, check to make sure that the client is not using the SEO title to overwrite the title tag - see the content section below.
8. URL Structure & Code
8.6 If using frames (or iframes) make sure they are titled - Make sure that any hard-coded iframes have a title tag.
11. Additional Checkpoints
11.24 Do not rely on colors in “alt” text descriptions - Update the alt text for the hard-coded image that this error is referring to.
Content / can be fixed in CMS
1. Content Presentation - Any errors referring to text within content areas are the responsibility of the client, or the PC or designer on the project.
1.11 All data tables should correctly define header rows and column headers. - Any tables created within content are the responsibility of the client. The PCs will train clients on how to properly set up and format ADA-compliant tables.
2. Links - Any errors referring to broken links or images within the menu builder or content areas are the responsibility of the client, or the PC on the project.
2.4 Do not use meaningless phrases such as “click here” or “more” as entire link text - Designers should be aware not to have nondescriptive call-to-action text like this, bring it up with them if you see it. Otherwise, in content, this is the responsibility of the client or PC to fix.
2.9 Link text longer than 80 characters in length - Same as 2.4 - designers should be aware of the restrictions, otherwise this can be fixed by the client/PC.
3. Images - Any errors referring to images (or alt tags of images) within content areas are the responsibility of either the designer or the PC on the project.
4. Rich Media - All issues that come up in relation to PDFs are content issues, and are the responsibility of the client.
5. Title & Metadata
5.4 The title tag should contain the company name - Sometimes the client will fill out a page title within the “SEO Title” field of the page properties, without including the FI’s name. This can be fixed by the client or PC within the CMS.
5.6 Limit <title> tags to 60 characters or less
- This should be fixed in the CMS by either the PC on the project or the client.
5.9 Pages should contain metadata description - This should be fixed in the CMS by either the PC on the project or the client.
8. URL Structure & Code
8.6 If using frames (or iframes) make sure they are titled - The PCs should train the client to put a title on any iframe that is placed within content. As such, any iframes within content are the responsibility of the PC on the project, or the client.
8.15 Do not use unencoded special characters within file or directory names (URLs) - This error appears when there is something like a space in the file name of an asset. The client or PC will need to fix this, re-upload, and re-link the file where necessary.
9. Cookies
9.1 All pages should contain a privacy link - Our sites should auto-create a privacy policy page when you scaffold. If the client deletes it, they will need to recreate. Often the “Privacy” or “Privacy Policy” link is included in the footer menu to satisfy this condition.
11. Additional Checkpoints
11.24 Do not rely on colors in “alt” text descriptions - This should be fixed in the CMS by either the PC on the project or the client.
False-positives and things that can’t be fixed for various reasons
1. Content Presentation
1.9 Paragraphs should be no longer than 100 words in length - You will likely see at least one instance of this coming from the CD Ladders Dinkytown calculator - we can’t do anything about that because it’s text that is hard-coded as part of the calc, which can’t be removed.
2. Links
2.8 Combine adjacent links together if they have the same destination - This may show up on sites that use our CAPTCHA plugin for forms. It’s referring to the two links next to the image, which both have “#” as their href. Since we can’t edit the plugin, and we know that those links are both running script, this can be ignored.
8. URL Structure & Code
8.5 Do not use inline styles - This will commonly appear in reference to things like left/right/center-aligned text within content areas, or things with the CAPTCHA or Banno Monitor setup. We can’t edit those, so this can be ignored.
Installing from Scratch
If you are installing the DQM Premium components on an older site, here is a list of what to add/include.
Note that if you try to copy the updates directly from the base files, you will need to either remove the “if DQM premium equals true” pieces, or add the DQM premium component to your package.json and gulpfile, and also reinstall NPM.
For ease of use, these instructions do not include the if/else, so you don’t need to worry about also updating your package.json, updating your gulpfile and reinstalling NPM.
How To
Styles
scss > custom > components > accessibility.scss
Create this file if it doesn’t already exist.
#accessibility{
min-height: 50px;
a {
color: #4d4d4d;
line-height: 1.4;
text-decoration: none;
transition: none;
span, &::before{
vertical-align: middle;
}
span{
max-width: 180px;
}
&::before{
@extend .d-inline-block;
background-image: url("/assets/img/ada-static.svg");
background-size: 47px auto;
content: '';
width: 47px;
height: 33px;
}
&:hover, &:focus{
color: $link-color;
&::before{
background-image: url("/assets/img/ada-hover.svg");
}
}
// fixed in bottom left of screen
&.position-fixed{
@extend .p-1;
border-top: 1px solid transparent;
bottom: 0;
left: 0;
z-index: 100;
&:hover, &:focus{
@extend .pr-2;
background: #f2f2f2;
border-top-right-radius: 5px;
box-shadow: 2px -2px 6px rgba(0,0,0,.15);
}
}
}
&.on-bottom, a:hover, a:focus {
.sr-only{
// overwrite .sr-only to make this visible
position: relative;
width: auto;
height: auto;
white-space: normal;
// display styling
font-size: 11px;
letter-spacing: 1px;
text-decoration: underline;
}
}
// full width below the footer
&.on-bottom {
@extend .d-flex;
@extend .justify-content-center;
@extend .align-items-center;
background: #f2f2f2 !important;
box-shadow: none;
.sr-only{
@include media-breakpoint-up(sm) {
max-width: none;
}
}
a:hover, a:focus{
.sr-only{
text-decoration: none;
}
}
}
}
footer.scss
Make sure that your footer doesn’t use any of the bootstrap p-* classes, or padding that uses !important. This interferes with the padding that is automatically added by the script to allow for space for the non-sticky bar.
cms.scss
Add the following, to ensure that the accessibility bar doesn’t show in the CMS and cause issues:
#accessibility {
@extend .d-none;
}
HTML
templates > partials > banno-components > accessibility-icon.mustache
Create a mustache file that includes the following.
<section id="accessibility" aria-label="Accessibility Information" class="bg-default">
<a href="/accessibility-feedback" class="position-fixed d-inline-block">
<span class="sr-only text-uppercase d-inline-block ml-1">Read More About Our Accessibility Statement</span>
</a>
</section>
footer.mustache
As noted above, make sure that your footer doesn’t use any of the bootstrap p-* classes, or padding that uses !important. This interferes with the padding that is automatically added by the script to allow for space for the non-sticky bar.
Images
ada-static.svg
Copy and paste the following into a new text document in your editor of choice, and save it as ada-static.svg. It should go within the src > images folder.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 30" style="enable-background:new 0 0 42 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E6E6E6;}
.st1{fill:#666666;}
.st2{fill:#FFFFFF;}
</style>
<title>Gray Accessibility Icon</title>
<image style="overflow:visible;opacity:0.2;enable-background:new ;" width="42" height="30" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAYAAABaKIzgAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAydJREFUeNrEmEtv00AUheNHEhqH
AAFaHgKEKJQsAhtAiBUI/jYsEGIBFQugEoVKCDWl0AKNIORpx5ypzki3IztxYsdYOholcezPZ+69
c8dWIZvDMkZ5hMaY6gZpwJSKUImjZUCOoCHHUGihoOp8G3KhMsGUTkDLUI2/WYTxod/QHtSG+tBg
HmhrRkAF5UF16BwB1ecV6BrHsvifgvoObUFfoX1+1tB9Qo+zANWAVeg0dBm6Dt0kmGc4WhT/HdFR
BfcD2oE+cdzjqOB7hA3nAdUuLhHiKnQDahL0EgGLCWJ0QPfahFZwX6A30FtoF/ozyV0rgYsXoFvQ
PagBXaGzngCblvWhAd2jo++gV9AG9Jnfqd8C8yJODHyJMA0CPoLu08mzAtIWoNaEmdGz4/DaapaO
M9ZXOKpz/grQI2HgxrhZJdRj6C6nfJk3sFOWNQ1dgS4yrmXFUEcL6sowcCMcrnC6m4Rs0t0Sb5DV
YfOap1gpNIvPurvDMTSnXj+lSpI70EPotig5WUJGlb0l3n/EWP3FeD4CquPyPF18Qljl7LEFQZrA
LuWzKnyDOjqxHDHlNSaPissHrJdeDpAS1hFJpUrWT+2qLZ6mzqRp0NlKjpAF0TOofFil6npJ1iBl
LolrjNFqzpAyTzwyrJGpXBClxmEwn6STTooSlMX0eyaLzawKGBdqPT5gXIz/A6hkabOWHhZ/0znd
stX5VHk7O2YTswm9YB+gylTgRDS4Ja4U9ZxKk4TsclV6Db3k+n+4QjmG5T5dVJBnjMYjT8jn0HuW
Jz+qKQkoi8lVY0C7C4TVkNuEfAats44OopZQ7eyQwTxiaagS2p3SJWUB+ZRjSzTThTjQgCd1+ERF
4aqToK1Lmt3mdGvI7aie1JlQIrrsunt01xdNhD0HcCgAh8zulpjuWMg4UNPZA3Yz+wyJoVhFZG8a
TpCG64o91KZInHUx3cE8m7u4jZ3cN5kbuqjD3OQpqA/Qx2lbkFl2oeZWOWonWp5yjaht8y6LeSfJ
lnmWhIjb29emlK+4FxF9fj9O8hJinsyNeltiJUikVK920pQYa8ZrpHpZ9k+AAQCrLguKX2NxoQAA
AABJRU5ErkJggg==">
</image>
<path class="st0" d="M20.1,25.8c7.6,0,14.5-4.5,17.5-11.5c-4.2-9.7-15.4-14.1-25-9.9C11.1,5,9.7,5.8,8.5,6.7c-2.6,2-4.6,4.6-5.9,7.6
C5.6,21.2,12.5,25.8,20.1,25.8z"/>
<path class="st1" d="M20.2,23.9c6.4,0,12.2-3.8,14.7-9.7C31.4,6.2,22,2.4,13.9,5.9c-3.7,1.6-6.7,4.6-8.3,8.3
C8.1,20.1,13.8,23.9,20.2,23.9z"/>
<circle class="st2" cx="20.3" cy="13.6" r="3.8"/>
<path class="st2" d="M20.2,23.9c2.5,0,4.9-0.6,7.2-1.7c-2.5-4.6-11.9-4.6-14.5-0.1C15.1,23.3,17.7,23.9,20.2,23.9z"/>
</svg>
ada-hover.svg
Copy and paste the following into a new text document in your editor of choice. Save it as ada-hover.svg within the src > images folder.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 30" style="enable-background:new 0 0 42 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E6E6E6;}
.st1{fill:#1C5EAC;}
.st2{fill:#FFFFFF;}
</style>
<title>Blue Accessibility Icon</title>
<image style="overflow:visible;opacity:0.2;enable-background:new ;" width="42" height="30" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAYAAABaKIzgAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAydJREFUeNrEmEtv00AUheNHEhqH
AAFaHgKEKJQsAhtAiBUI/jYsEGIBFQugEoVKCDWl0AKNIORpx5ypzki3IztxYsdYOholcezPZ+69
c8dWIZvDMkZ5hMaY6gZpwJSKUImjZUCOoCHHUGihoOp8G3KhMsGUTkDLUI2/WYTxod/QHtSG+tBg
HmhrRkAF5UF16BwB1ecV6BrHsvifgvoObUFfoX1+1tB9Qo+zANWAVeg0dBm6Dt0kmGc4WhT/HdFR
BfcD2oE+cdzjqOB7hA3nAdUuLhHiKnQDahL0EgGLCWJ0QPfahFZwX6A30FtoF/ozyV0rgYsXoFvQ
PagBXaGzngCblvWhAd2jo++gV9AG9Jnfqd8C8yJODHyJMA0CPoLu08mzAtIWoNaEmdGz4/DaapaO
M9ZXOKpz/grQI2HgxrhZJdRj6C6nfJk3sFOWNQ1dgS4yrmXFUEcL6sowcCMcrnC6m4Rs0t0Sb5DV
YfOap1gpNIvPurvDMTSnXj+lSpI70EPotig5WUJGlb0l3n/EWP3FeD4CquPyPF18Qljl7LEFQZrA
LuWzKnyDOjqxHDHlNSaPissHrJdeDpAS1hFJpUrWT+2qLZ6mzqRp0NlKjpAF0TOofFil6npJ1iBl
LolrjNFqzpAyTzwyrJGpXBClxmEwn6STTooSlMX0eyaLzawKGBdqPT5gXIz/A6hkabOWHhZ/0znd
stX5VHk7O2YTswm9YB+gylTgRDS4Ja4U9ZxKk4TsclV6Db3k+n+4QjmG5T5dVJBnjMYjT8jn0HuW
Jz+qKQkoi8lVY0C7C4TVkNuEfAats44OopZQ7eyQwTxiaagS2p3SJWUB+ZRjSzTThTjQgCd1+ERF
4aqToK1Lmt3mdGvI7aie1JlQIrrsunt01xdNhD0HcCgAh8zulpjuWMg4UNPZA3Yz+wyJoVhFZG8a
TpCG64o91KZInHUx3cE8m7u4jZ3cN5kbuqjD3OQpqA/Qx2lbkFl2oeZWOWonWp5yjaht8y6LeSfJ
lnmWhIjb29emlK+4FxF9fj9O8hJinsyNeltiJUikVK920pQYa8ZrpHpZ9k+AAQCrLguKX2NxoQAA
AABJRU5ErkJggg==">
</image>
<path class="st0" d="M20.1,25.8c7.6,0,14.5-4.5,17.5-11.5c-4.2-9.7-15.4-14.1-25-9.9C11.1,5,9.7,5.8,8.5,6.7c-2.6,2-4.6,4.6-5.9,7.6
C5.6,21.2,12.5,25.8,20.1,25.8z"/>
<path class="st1" d="M20.2,23.9c6.4,0,12.2-3.8,14.7-9.7C31.4,6.2,22,2.4,13.9,5.9c-3.7,1.6-6.7,4.6-8.3,8.3
C8.1,20.1,13.8,23.9,20.2,23.9z"/>
<circle class="st2" cx="20.3" cy="13.6" r="3.8"/>
<path class="st2" d="M20.2,23.9c2.5,0,4.9-0.6,7.2-1.7c-2.5-4.6-11.9-4.6-14.5-0.1C15.1,23.3,17.7,23.9,20.2,23.9z"/>
</svg>
Script
banno-functions.js
Include this function anywhere.
banno.site.accessibilityButtonPosition = function() {
var $dqmIcon = $('#accessibility'),
$link = $('a', $dqmIcon);
if ($(window).scrollTop() + $(window).outerHeight() < $dqmIcon.offset().top + 45) {
$dqmIcon.removeClass('on-bottom');
$link.addClass('position-fixed');
} else {
$dqmIcon.addClass('on-bottom');
$link.removeClass('position-fixed');
}
}
scripts.js
At the end of the if/else function to determine whether the user is within the CMS, append the following.
.on('load resize scroll', function(){
banno.site.accessibilityButtonPosition();
});
It will look something like this, when set up correctly. Note how the on load function is directly attached to the if/else:
// the rest of the if/else is above...
$(this).parent().parent().parent().addClass("focused");
});
}
banno.site.centerCropHero(".center-crop", "center", ".center-crop-parent");
}).on('load resize scroll', function(){
banno.site.accessibilityButtonPosition();
});
Troubleshooting
If you have a site with the DQM Premium components already installed, but are having issues, here is a list of known problems and their fixes.
Flickering
On some sites, when you get to the bottom, the bar will flicker/stutter between the fixed “eye” icon and the static bar at the bottom.
Scripts
banno-functions.js
- Update
banno.site.accessibilityButtonPositionfunction to remove the value being added/subtracted.
banno.site.accessibilityButtonPosition = function() {
var windowHeight = $(window).height();
var pageHeight = $(document).height();
var scrollPos = $(window).scrollTop();
if (scrollPos + windowHeight < pageHeight) {
$('.accessibility').addClass('side-stick').removeClass('footer');
} else {
$('.accessibility').removeClass('side-stick').addClass('footer');
}
}
- Add a new function to add padding below footer as needed. (For whatever reason, I needed to divide this by 2 twice–the first division by 2 was still twice as big as it needed to be.)
banno.site.accessibilityFooterSpace = function() {
var footerPaddingBottom = (($('footer').outerHeight() - $('footer').height()) / 2) / 2;
var accessibilityHeight = $('.accessibility').outerHeight();
var totalSpace = footerPaddingBottom + accessibilityHeight;
$('footer').css({"padding-bottom": totalSpace});
}
scripts.js
Call in the new accessibilityFooterSpace function wherever accessibilityButtonPosition is being called. (ELSE of the window load in/out of CMS function, the on window resize function, and on the scrollevents function.)
banno.site.accessibilityFooterSpace();
HTML - footer.mustache
Remove any bottom padding that is being set with bootstrap classes. Classes like p- will override the script since they have !important automatically. Set them with just plain CSS instead, so they can be overwritten.
Styling
footer.scss
Update to remove any bottom padding that is being set by @extend-ing a bootstrap padding class, or any padding set with !important. Both of these things will override the script, so they should be set with simple vanilla CSS instead.
accessibility.scss
Here are the specific edits:
- On the
.accessibilityclass, addopacity: 0. - On the
&.footersection, update toposition: fixed, and addopacity: 1. - On the
&.side-sticksection, update toz-index: 9999, and addopacity: 1.
If you would rather copy and paste the full file, here it is in SCSS/SASS format:
.accessibility {
opacity: 0;
.accessibility-link {
color: #4d4d4d;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
line-height: 12px;
&::before, &::after {
content: '';
position: absolute;
top: 50%;
background-size: 47px auto;
width: 47px;
height: 33px;
display: inline-block;
transform: translate(0, -50%);
}
&::before {
background-image: url("/assets/img/ada-static.svg");
}
&::after {
background-image: url("/assets/img/ada-hover.svg");
opacity: 0;
visibility: hidden;
}
&:hover {
&::before {
opacity: 0;
visibility: hidden;
}
&::after {
opacity: 1;
visibility: visible;
}
.accessibility-text {
text-decoration: underline;
}
}
}
&.footer {
position: fixed;
opacity: 1;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
background-color: #f2f2f2;
padding: 8px 0;
.accessibility-link {
position: relative;
color: #4d4d4d;
padding-left: 65px;
display: inline-block;
&::after, &::before {
left: 0;
}
.accessibility-text {
display: inline-block;
line-height: 34px;
}
&:hover {
padding-left: 70px;
transition: padding-left 0.3s ease-in-out;
}
}
}
&.side-stick {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
opacity: 1;
.accessibility-link {
position: relative;
display: block;
height: 50px;
padding: 7px 10px 7px 52px;
text-align: left;
border-radius: 0 5px 0 0;
transition: background-color 0.3s ease-in-out;
&::after, &::before {
left: 15px;
}
.accessibility-text {
opacity: 0;
visibility: hidden;
position: absolute;
width: 125px;
left: 72px;
}
&:hover {
background-color: #fff;
width: 222px;
padding-left: 72px;
padding-right: 25px;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.2);
.accessibility-text {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
}
}
}
}
Tags: BS2, BS3, BS4, html, styling, scss, sass, js, jquery, html, mustache