Skip to content

Instantly share code, notes, and snippets.

@skerbis
Created January 17, 2023 09:31
Show Gist options
  • Save skerbis/687a79e3b3850899fa069aed13c5d6a0 to your computer and use it in GitHub Desktop.
Save skerbis/687a79e3b3850899fa069aed13c5d6a0 to your computer and use it in GitHub Desktop.
clickable div with uikit3
<script>
// select all div elements with the class "card"
const cards = document.querySelectorAll(".a-div-link");
// iterate over the NodeList of div elements
cards.forEach((card) => {
// add a tabindex attribute to the div to make it focusable
card.tabIndex = 0;
// add a role attribute with the value "link" to announce the div as a link to screen reader users
card.setAttribute("role", "link");
card.setAttribute("uk-tooltip", "");
// add a title attribute to provide additional context for screen reader users
card.title = "Klicken oder tippen für mehr Informationen";
// add a click and a touchstart event listener to the div
card.addEventListener("click", handleClick);
card.addEventListener("touchstart", handleClick);
function handleClick(event) {
// check if the target of the click or touch event is a link or if text has been selected
if (event.target.tagName === "A" || window.getSelection().toString()) {
// if either of these conditions is true, return from the event listener without taking any action
return;
}
// select the "more-link" anchor element inside the div
const moreLink = card.querySelector(".more-link");
// navigate to the URL specified in the "more-link" anchor element
window.location = moreLink.href;
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment