HTML code for a Glossary
Asked by Nicolas Budzko:

Hi, I'm trying to use a HTML code to make a Glossary, the idea is a bar with the alphabet that always remains visible in the top of the page (or anywhere) no matter where in the glossary am I. I tested the code outside the Confluence and works fine, but when I put inside HTML-bobswift Macro and deploy to Confluence, the code doesn't works as expected, the bar always hide one line above the letter a selected. Is there a way to keep an element or section visible on screen no matter I do scroll? I can do the glossary with tabs macros, because tabs labels always remains visible, but is not what I'm looking for.

My HTML code is:

\<!DOCTYPE html\>  
\<html\>  
\<head\>  
\<title\>Glosario de T?rminos\</title\>  
\<style\>  
body {  
font-family: Arial, sans-serif;  
margin: 0;  
padding: 0;  
display: flex;  
flex-direction: column;  
}  
#header {  
background-color: #f0f0f0;  
padding: 10px;  
}  
#menu-bar {  
background-color: #f0f0f0;  
white-space: nowrap;  
overflow-x: auto;  
display: flex;  
}  
.index-button {  
width: 30px;  
height: 30px;  
cursor: pointer;  
margin: 5px;  
}  
.index-button:hover {  
text-decoration: underline;  
}  
#content {  
padding: 20px;  
flex-grow: 1;  
overflow-y: auto;  
max-height: calc(100vh - 80px); /\* Resta el tama?o del encabezado y la barra de men? \*/

}  
\</style\>  
\</head\>  
\<body\>  
\<div id="header"\>  
\<h1\>Glosario de T?rminos\</h1\>  
\</div\>  
\<div id="menu-bar"\>  
\<button class="index-button" onclick="scrollToLetter('#')"\>#\</button\>  
\<button class="index-button" onclick="scrollToLetter('A')"\>A\</button\>  
\<button class="index-button" onclick="scrollToLetter('B')"\>B\</button\>  
\<button class="index-button" onclick="scrollToLetter('C')"\>C\</button\>  
\<button class="index-button" onclick="scrollToLetter('D')"\>D\</button\>  
\<button class="index-button" onclick="scrollToLetter('E')"\>E\</button\>  
\<button class="index-button" onclick="scrollToLetter('F')"\>F\</button\>  
\<button class="index-button" onclick="scrollToLetter('G')"\>G\</button\>  
\<button class="index-button" onclick="scrollToLetter('H')"\>H\</button\>  
\<button class="index-button" onclick="scrollToLetter('I')"\>I\</button\>  
\<button class="index-button" onclick="scrollToLetter('J')"\>J\</button\>  
\<button class="index-button" onclick="scrollToLetter('K')"\>K\</button\>  
\<button class="index-button" onclick="scrollToLetter('L')"\>L\</button\>  
\<button class="index-button" onclick="scrollToLetter('M')"\>M\</button\>  
\<button class="index-button" onclick="scrollToLetter('N')"\>N\</button\>  
\<button class="index-button" onclick="scrollToLetter('O')"\>O\</button\>  
\<button class="index-button" onclick="scrollToLetter('P')"\>P\</button\>  
\<button class="index-button" onclick="scrollToLetter('Q')"\>Q\</button\>  
\<button class="index-button" onclick="scrollToLetter('R')"\>R\</button\>  
\<button class="index-button" onclick="scrollToLetter('S')"\>S\</button\>  
\<button class="index-button" onclick="scrollToLetter('T')"\>T\</button\>  
\<button class="index-button" onclick="scrollToLetter('U')"\>U\</button\>  
\<button class="index-button" onclick="scrollToLetter('V')"\>V\</button\>  
\<button class="index-button" onclick="scrollToLetter('W')"\>W\</button\>  
\<button class="index-button" onclick="scrollToLetter('X')"\>X\</button\>  
\<button class="index-button" onclick="scrollToLetter('Y')"\>Y\</button\>  
\<button class="index-button" onclick="scrollToLetter('Z')"\>Z\</button\>  
\</div\>  
\<div id="content"\>  
\<h2 id="#"\>#\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con #.\</p\>

\<h2 id="A"\>A\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con A.\</p\>  

\<h2 id="B"\>B\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con B.\</p\>  

\<h2 id="C"\>C\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con C.\</p\>

\<h2 id="D"\>D\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con D.\</p\>  

\<h2 id="E"\>E\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con E.\</p\>

\<h2 id="F"\>F\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con F.\</p\>  

\<h2 id="G"\>G\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con G.\</p\>

\<h2 id="H"\>H\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con H.\</p\>  

\<h2 id="I"\>I\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con I.\</p\>

\<h2 id="J"\>J\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con J.\</p\>  

\<h2 id="K"\>K\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con K.\</p\>

\<h2 id="L"\>L\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con L.\</p\>  

\<h2 id="M"\>M\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con M.\</p\>

\<h2 id="N"\>N\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con N.\</p\>  

\<h2 id="O"\>O\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con O.\</p\>

\<h2 id="P"\>P\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con P.\</p\>  

\<h2 id="Q"\>Q\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con Q.\</p\>  

\<h2 id="R"\>R\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con R.\</p\>

\<h2 id="S"\>S\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con S.\</p\>  

\<h2 id="T"\>T\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con T.\</p\>

\<h2 id="U"\>U\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con U.\</p\>  

\<h2 id="V"\>V\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con V.\</p\>

\<h2 id="W"\>W\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con W.\</p\>  

\<h2 id="X"\>X\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con X.\</p\>

\<h2 id="Y"\>Y\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con Y.\</p\>

\<h2 id="Z"\>Z\</h2\>  
\<p\>Texto relacionado con t?rminos que comienzan con Z.\</p\>  
\</div\>  
\<script\>  
function scrollToLetter(letter) {  
const element = document.querySelector(\`h2\[id='${letter}'\]\`);  
if (element) {  
element.scrollIntoView({ behavior: "smooth", block: "start" });  
}  
}  
\</script\>  
\</body\>  
\</html\>

Thanks,

Nico.


Answers:
author: Zoriana Bogutska_Adaptavist_
body: Hi [@Nicolas Budzko](/t5/user/viewprofilepage/user-id/5353291)

Probably, it's workable with two div macros and a CSS Stylesheet macro of [Content Formatting Macros for Confluence](https://marketplace.atlassian.com/apps/247/?utm_source=Atlassian-Community&utm_medium=referral&utm_campaign=Comment_HTML-code-for-a-Glossary_20240122) (developed by my team).

You can use

```
position:sticky 
```

to anchor the top menu and make sure that the navigation menu always stays at the top. It'll also be a lot easier to maintain than bob swifts macro as there doesn't need to be a ton of HTML and CSS.

<br />

Our dev team lead has created a page to demonstrate the concept for you:

```
<ac:structured-macro ac:name="div" ac:schema-version="1" ac:macro-id="17051fa7-b6ac-48d2-bf2d-0babfdd0bd2d"><ac:parameter ac:name="class">wrapper</ac:parameter><ac:rich-text-body><ac:structured-macro ac:name="div" ac:schema-version="1" ac:macro-id="59cc221f-9a6d-4f92-b827-df1a3751213f"><ac:parameter ac:name="id">menu</ac:parameter><ac:rich-text-body><h1>Glossary</h1><p>A | B | C</p></ac:rich-text-body></ac:structured-macro><h1>A</h1><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><h1>B</h1><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><h1>C</h1><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></ac:rich-text-body></ac:structured-macro><p><br /></p><ac:structured-macro ac:name="style" ac:schema-version="1" ac:macro-id="ed6ce86e-000d-444e-865a-2ee56eb23cd9"><ac:plain-text-body><![CDATA[#menu {    position:-webkit-sticky; position:sticky; top: 0; background-color: goldenrod}#glossaryContent { background-color: goldenrod;    overflow:scroll;}]]></ac:plain-text-body></ac:structured-macro><p><br /></p>
```


author: chris.grom
body: Hi [@Nicolas Budzko](/t5/user/viewprofilepage/user-id/5353291)

Are you using Confluence Server or Cloud?

comments: author: Nicolas Budzko
body: Hi, I'm using Confluence Server.


author: chris.grom
body: You are lucky, then! :)

On the Cloud platform we cannot modify our Confluence site with out own code. I wish I could test your code on our site and give you feedback.


author: Nicolas Budzko
body: I hope I'm lucky enough that someone can help me integrate the code or show me some other way to do it.

Thanks for your reply!


Tags: confluence-server

html

server