Just a heads up: On March 24, 2025, starting at 4:30pm CDT / 19:30 UTC, the site will be undergoing scheduled maintenance for a few hours. During this time, the site might be unavailable for a short while. Thanks for your patience.

×
Create
cancel
Turn on suggestions
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

HTML code for a Glossary

Nicolas Budzko
Nicolas Budzko November 16, 2023

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.

Answer
Watch
Like Be the first to like this
717 views

2 answers

0 votes
Zoriana Bogutska_Adaptavist_
Zoriana Bogutska_Adaptavist_
Atlassian Partner
January 22, 2024

Hi @Nicolas Budzko 

 

Probably, it's workable with two div macros and a CSS Stylesheet macro of Content Formatting Macros for Confluence (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.


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>
Reply
0 votes
chris.grom
chris.grom
Contributor
November 17, 2023

Hi @Nicolas Budzko 

Are you using Confluence Server or Cloud?

View More Comments
Nicolas Budzko
Nicolas Budzko November 17, 2023

Hi, I'm using Confluence Server.

Like
chris.grom
chris.grom
Contributor
November 17, 2023

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. 

Like
Nicolas Budzko
Nicolas Budzko November 19, 2023

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!

Like
Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
atlassian, atlassian government cloud, fedramp, webinar, register for webinar, atlassian cloud webinar, fedramp moderate offering, work faster with cloud

Unlocking the future with Atlassian Government Cloud ☁️

Atlassian Government Cloud has achieved FedRAMP Authorization at the Moderate level! Join our webinar to learn how you can accelerate mission success and move work forward faster in cloud, all while ensuring your critical data is secure.

Register Now
AUG Leaders

Upcoming Confluence Events