Add a data-number attribute to <a> tags in the html Table of Contents, just like the header tags in the <body> of the html. #10971
andrew-danieli-fj
started this conversation in
Ideas
Replies: 1 comment
-
|
Don't worry, I've worked out how to do it in javascript (example below for anyone else that needs it). function populate_data_attributes()
{
// This returns all of the TOC section number <span> elements
const elements = document.getElementsByClassName("toc-section-number");
// then loop through all the elements
for (const child of elements) {
const parent = child.parentElement; // this gets the <a href> parent tag.
parent.dataset.number = child.textContent; // this creates the data-number attribute containing the TOC number.
}
}I put this function in a file called <script src="./scripts/navbar.js" onload="populate_data_attributes()">
</script>The above html file then gets included in the main html when running pandoc with the parameter |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
How difficult would it be to update the "table of contents" code in the html writer such that it includes the
data-numberattribute on the<a href=""></a>tags (much like thedata-numberattribute put on the<header>tags). I'm looking at building a dynamic navigation bar for my HTML webpage (derived from a DOCX manual), and need to lookup all the table of contents elements, and retrieve a subset to build into the navbar, and then change it dynamically as the user scrolls through the document. All this would be done using javascript.Having the data-number attribute or similar would simplify the process no end. If its possible to do this with a lua filter, even better.
Beta Was this translation helpful? Give feedback.
All reactions