Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
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
585 views

2 answers

0 votes
Zoriana Bogutska_Adaptavist_
Zoriana Bogutska_Adaptavist_
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
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
AUG Leaders

Atlassian Community Events

    See all events