Issue
I have a table of contents that is generated dynamically via javascript - fetching all the heading tags (H1 to H6) and then placing them into a nav.
When I update some of the sections, I want to be able to send people to the page with highlighting on the TOC for the updated / new sections.
I want to use query strings to be able to target the range of the TOC and where to add some custom styling. I also want to do this in javascript so I can add it as an extension to the codebase where the headings are extracted into the TOC.
What I'm hoping to achieve is:
1. http://localhost:3000/my-document/ <----- no highlight to the TOC
2. http://localhost:3000/my-document/?start=1&end=6 <----- highlight TOC from <li> #1 to <li> #6 in loop
3. http://localhost:3000/my-document/?start=2&end=4 <----- highlight TOC from <li> #2 to <li> #4 in loop
For the above urls, what I mean is option 1 wouldn't add any styling to the table of contents. Option 2 would add styling to the <li>..<ul><li>.. in the tree from iteration 1 to iteration 6. While option 3 would do the same as option 2 but start at the 2nd li iteration and end at the 4th.
For visual representation (I don't need the styling of the badge circle - more adding a class to the li element):
Option 1:
Option 2:
Option 3:
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-top: 1px;
}
li>ul {
margin-top: 1em;
margin-left: 2em;
}
a {
line-height: 2em;
background: #2C82C9;
display: inline-block;
color: #fff;
padding: 2px 8px;
border-radius: 8px;
}
.container {
max-width: 80%;
margin: 2em auto;
}<nav>
<div class="container">
<ul>
<!-- this is li iteration #1 -->
<li><a>Main menu</a>
<ul>
<!-- this is li iteration #2 -->
<li><a>Sub menu 1</a></li>
<li><a>Sub menu 2</a>
<ul>
<!-- this is li iteration #3 -->
<li><a>Sub menu 2 / 1</a></li>
<li><a>Sub menu 2 / 2</a>
<ul>
<!-- this is li iteration #4 -->
<li><a>Sub menu 2 / 2 / 1</a></li>
<li><a>Sub menu 2 / 2 / 2</a>
<ul>
<!-- this is li iteration #5 -->
<li><a>Sub menu 2 / 2 / 2 / 1</a></li>
<li><a>Sub menu 2 / 2 / 2 / 2</a>
<ul>
<!-- this is li iteration #6 -->
<li><a>Sub menu 2 / 2 / 2 / 2 / 1</a></li>
<li><a>Sub menu 2 / 2 / 2 / 2 / 2</a>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>Solution
Parse the query params into highlight range (or null).
Pass in the start and end highlight range to the JavaScript to create the table of contents.
When you are generating the table of contents, check if the section is within the highlight range, if so, include the CSS class.
If you don't have control over the table of contents code, it should still be possible to target the elements that you want with a CSS query.
nav .container li:nth-of-type(n+{start}):nth-of-type(-n+{end}) {
/* styles */
}
Add CSS to <head> with JavaScript?
Answered By - AJcodez
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.