Accessbility Statement to Custom Footer
Whatever their speciail district url is + #/website-accessibility-policy-modal
will create the link you need to add to their footer, example below:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to insert the 'Getting Started' section
function insertGettingStartedSection(howDoISection) {
var newPocInstance = document.createElement('article');
newPocInstance.classList.add('poc-instance', 'clearfix', 'poc-type-page', 'has-no-date', 'has-no-image');
// Set styles to control spacing
newPocInstance.style.flexBasis = '100%';
newPocInstance.style.margin = '0'; // Remove all margins
newPocInstance.style.padding = '0'; // Remove all padding
newPocInstance.style.border = 'none'; // Remove borders
newPocInstance.style.borderWidth = '0'; // Ensure no border width
newPocInstance.style.display = 'block'; // Ensure block-level display
newPocInstance.style.boxShadow = 'none'; // Remove any shadow
newPocInstance.style.backgroundColor = 'transparent'; // Set background to transparent
newPocInstance.style.boxSizing = 'border-box'; // Ensure padding/border is included in the element’s width/height
// Control the vertical space without removing content
newPocInstance.style.lineHeight = '.5'; // Tighten the line-height to minimum (1x the font size)
newPocInstance.style.paddingTop = '25px'; // Slight top padding for spacing
newPocInstance.style.paddingBottom = '0px'; // Slight bottom padding for spacing
newPocInstance.innerHTML = `
<div class="inner" style="margin: 0; padding: 0; border: none; box-shadow: none; background-color: transparent;">
<header style="margin: 0; padding: 0; border: none; box-shadow: none;">
<h2 style="text-align: center; margin: 0; padding: 0 0 0 0px; border: none; box-shadow: none; line-height: 5px !important;">What You Need to Know</h2>
</header>
</div>
`;
howDoISection.parentNode.insertBefore(newPocInstance, howDoISection);
console.log("Inserted 'Getting Started' section.");
}
// Use IntersectionObserver to observe 'How Do I' section
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var howDoISection = entry.target;
insertGettingStartedSection(howDoISection);
observer.unobserve(howDoISection);
}
});
});
// Select 'How Do I' section
var howDoISection = document.querySelector("a[href='/how-do-i']")?.closest('.poc-instance');
if (howDoISection) {
console.log("How Do I section found.");
observer.observe(howDoISection);
} else {
console.log("How Do I section not found, retrying...");
setTimeout(function() {
var howDoISectionRetry = document.querySelector("a[href='/how-do-i']")?.closest('.poc-instance');
if (howDoISectionRetry) {
console.log("How Do I section found on retry.");
observer.observe(howDoISectionRetry);
} else {
console.log("Still unable to find the How Do I section.");
}
}, 1000);
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the existing footer
const oldFooter = document.getElementById("page-footer");
// Select specific parts of the old footer to move
const footerNav = oldFooter.querySelector('.footer-links');
const addressInfo = oldFooter.querySelector('.col-md-6:first-child .footer-address');
const telephoneNumber = oldFooter.querySelector('.col-md-6:first-child .footer-phone');
const copyrightSection = oldFooter.querySelector('.col-md-6:first-child .footer-copyright');
const transparencySection = oldFooter.querySelector('.col-md-6:last-child .footer-static-transparency');
const streamlineSignInSection = oldFooter.querySelector('.col-md-6:last-child .footer-streamline:not(.footer-static-transparency)');
// Create the new footer structure
const newFooter = document.createElement('footer');
newFooter.className = 'footer-clean clearfix';
newFooter.innerHTML = `
<div class="container">
<div class="row">
<!-- Footer Column 1 -->
<div class="footer-col footer-col-1 col-sm-4">
<div class="footer-logo-container">
<img src="https://www.getstreamline.com/hubfs/IM%20Background%20Images/FPPAlogo.png" width=100 alt="FPPA logo">
</div>
<div class="footer-col-1-address"></div>
<div class="footer-col-1-content"></div>
<div class="footer-col-1-transparency"></div>
<div class="footer-col-1-accessibility"></div>
<div class="footer-col-1-login"></div>
<!-- New Link added to Footer Column 1 -->
<div class="footer-col-1-extra-link">
<a href="https://fppaco.specialdistrict.org/#/website-accessibility-policy-modal" target="_blank">Accessbility</a>
</div>
</div>
<!-- Footer Column 2 -->
<div class="footer-col footer-col-2 col-sm-4">
<h3>Contact Us</h3>
<div class="footer-col-2-phone"></div>
<p><a href="mailto:questions@fppaco.org">questions@fppaco.org</a></p>
<h3>988 Suicide & Crisis Lifeline</h3>
<p><a href="https://988lifeline.org/">988lifeline.org</a></p>
</div>
<!-- Footer Column 3 -->
<div class="footer-col footer-col-3 col-sm-4">
<!-- Empty Column 3 will be overwritten by Footer Menu items -->
</div>
</div>
</div>
`;
// Append the new footer after the old footer
oldFooter.parentNode.insertBefore(newFooter, oldFooter.nextSibling);
// Move the selected parts of the old footer content to the new footer
const column1Address = newFooter.querySelector('.footer-col-1-address');
const column1Content = newFooter.querySelector('.footer-col-1-content');
const column1Transparency = newFooter.querySelector('.footer-col-1-transparency');
const column1Login = newFooter.querySelector('.footer-col-1-login');
const column2Phone = newFooter.querySelector('.footer-col-2-phone');
// Check if footerNav links are found and append the h3 header conditionally
const column3 = newFooter.querySelector('.footer-col-3');
if (footerNav && footerNav.querySelector('a')) {
const resourcesHeader = document.createElement('h3');
resourcesHeader.textContent = 'Resources';
column3.prepend(resourcesHeader);
column3.appendChild(footerNav);
}
if (addressInfo) {
// Insert line breaks after 'District' and after each comma
let addressHTML = addressInfo.innerHTML;
addressHTML = addressHTML.replace('District', 'District<br>');
addressHTML = addressHTML.replace(/,/g, '<br>');
addressInfo.innerHTML = addressHTML;
column1Address.appendChild(addressInfo);
}
if (telephoneNumber) {
column2Phone.appendChild(telephoneNumber);
}
if (copyrightSection) {
column1Content.appendChild(copyrightSection);
}
if (transparencySection) {
column1Transparency.appendChild(transparencySection);
}
if (streamlineSignInSection) {
column1Login.appendChild(streamlineSignInSection);
}
if (footerNav) {
column3.appendChild(footerNav);
}
// Remove the old footer
oldFooter.parentNode.removeChild(oldFooter);
});
</script>