Skip to content

Instantly share code, notes, and snippets.

@riversloane
Last active December 4, 2023 14:50
Show Gist options
  • Save riversloane/d4d644d88ce160cb8f5c40b23918f767 to your computer and use it in GitHub Desktop.
Save riversloane/d4d644d88ce160cb8f5c40b23918f767 to your computer and use it in GitHub Desktop.
Unwrapped '23: Create an annoucement banner for the holidays
.annoucement-banner {
padding: 20px;
background-color: palegoldenrod;
}
.annoucement-banner a {
float: right;
}
<script>
// HelpDocs Unwrapped '23 Present - Add annoucement banner
// Function to add annoucement banner when page is ready
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
// Start by adding the text you'd like to use inside the banner
const newContent = document.createTextNode("We're offering limited support during the holidays.");
// and for the link here
const linkText = document.createTextNode("Learn more →");
// then add the link title (for accessibility)
const linkTitle = "Link to article about limited support during the holidays";
// and finally add the link to your article/webpage
const link = "https://your-slug.helpdocs.io/article/x";
// We create a new div element
const banner = document.createElement("div");
banner.classList.add("annoucement-banner");
// Then get the #main element to prepend to
const mainDiv = document.getElementById("main");
// and give it some content
const a = document.createElement('a');
a.appendChild(linkText);
a.title = linkTitle;
a.href = link;
// then add the text to the newly created div
banner.appendChild(newContent);
banner.appendChild(a);
// finally it's added before the #main element
mainDiv.prepend(banner);
// et voila! You have an announcement banner ✨
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment