Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Highlighting current toc item (header) while scrolling

Hi,

as of recently there is a nice toc menu ("On this page") on the confluence developer page (f. e. https://developer.atlassian.com/server/confluence/writing-a-confluence-theme/), which I always tried to implement for our confluence pages (Con 5.10.8). It highlights the current item (header) while you scroll down the document.

With CSS I have already build a macro for a fixed menu with submenus for the page, because we have very long pages (not discussable now). 

But I have no javascript skills (and wasn't able to find the solution by inspecting the page with <F12>). So could someone give me a hint, how can I implement this. The are two main problems:

  1. The most solutions with html/CSS/javascript assume that you can define the html structure, for example using <section>, but you can't do that having hundreds of different authors.
  2. We have to develop the whole layout only for desktop devices with browser IE 11 or newer IE, so for example I can't use :focus-within or other cool css-tricks.

Thanks in advance,

Volker

2 answers

1 accepted

0 votes
Answer accepted

The code from @Wade Tracy _Boise_ ID_ for a floating TOC, which is posted in the Boise group, helps me very much, and is exactly what I am searching for: https://community.atlassian.com/t5/Boise/Widget-Wednesday-Floating-TOC-in-Confluence/gpm-p/1095431

Thank you very much, @Wade Tracy _Boise_ ID_!

I could get it to run for Con 5.10.8, but it works in 6.13. There is only one point for an improvement: If you have short sections with headers at the end of the page, these links are not highlighted in the toc.

Now unlike he suggested I would run it as user macro or put it to Custom html and stylesheets.

0 votes

Hello Volker,

Your idea of having a floating table of contents, similar to what is available within the developer site, is a shared idea and others are interested in this as well. With that said, I tested some solutions I found within Community and found a post which had something close to what you’re looking for. You may see the post at Floating TOC in the right column.

I sampled the solution provided and tested on Confluence 6.14 and found the following worked:
(Place this under Space Tools > Look and Feel > Stylesheet)

.toc-macro {
float: right;
position: fixed;
width: 250px;
right: 0px;
top: 170px;
background: rgba(229, 232, 232, 0.80);
border: 1px solid #0096d6;
padding: 5px;
}

Along with a screenshot of how it looks:

image.png

Could you please test this within your environment and let us know the results?

Regards,
Stephen Sifers

Hello Stephen,

thank you for your answer.

We have already build a fixed toc within the right column of our pages. (It even displays subsections only by hovering over main sections.) My problem is not the floating or fixing of an element with css. I want the header in the toc to be highlighted when I scroll to its respective section. So when I scroll for example to a section 2.3.1, the header of the section 2.3.1 in the toc gets highlighted (with a different color or whatever). To my knowledge this can only be down with javascript, because there is no pseudo class which tells the scroll position.

And every solution with javascript, which I know, is depended on defined sections in html (f. e. http://codetheory.in/change-active-state-links-sticky-navigation-scroll/)

If you want to have another example for a toc, which I am searching for and which is even better, then please take a look here: http://develop.spacemacs.org/layers/+web-services/confluence/README.html. Here even the subsections are implied.

Greetings,

Volker

Hello Volker,

Thank you for reviewing my answer and providing further details as to where you're at in the process and what references you're using.

If you could please, can exactly what you've already completed having a floating TOC? This will allow us to see what's done to see if a javascript solution is available.

Regards,
Stephen Sifers

Hello Stephen,

okay, this is our user macro:

## @noparams

<div class="lis-navigation noprint">
<ac:structured-macro ac:name="panel">
<ac:parameter ac:name="titleBGColor">#009CE1</ac:parameter>
<ac:parameter ac:name="borderStyle">solid</ac:parameter>
<ac:parameter ac:name="borderColor">#009CE1</ac:parameter>
<ac:parameter ac:name="borderWidth">1</ac:parameter>
<ac:parameter ac:name="titleColor">#FFFFFF</ac:parameter>
<ac:parameter ac:name="title">$svThemeHelper.getScrollPage($content).scrollPageTitle
</ac:parameter>
<ac:rich-text-body>
<ac:structured-macro ac:name="toc" ac:schema-version="1">
<ac:parameter ac:name="maxLevel">4</ac:parameter>
<ac:parameter ac:name="style">none</ac:parameter>
<ac:parameter ac:name="class">tocpanel</ac:parameter>
<ac:parameter ac:name="printable">false</ac:parameter>
</ac:structured-macro>
<p style="display: flex; align-items: center; justify-content: center;"><a href="#main"></a></p>
</ac:rich-text-body>
</ac:structured-macro>
</div>


And the following is the relevant part in the CSS:

/* Inhaltsverzeichnis für Programmseiten */
/* Navigationselement als Panel rechts */

.lis-navigation {
position: fixed;
width: 270px;
top: 9em;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.8);
z-index: 10;

}

/* Inhaltsverzeichnis im Panel */

.lis-navigation .tocpanel {
z-index: 10;
font-size: 14px;
font-weight: normal;
line-height: 22px;
margin-left: -2.7em;
list-style-type: none;
}

/* oberste Ebene der Liste im Panel immer ohne Punkt */

.lis-navigation .tocpanel ul li {
list-style-type: none;
}

/* Schriftgröße der zweite Ebene verkleinern und Text kürzen */

.lis-navigation .tocpanel ul ul li {
font-size: 12px;
line-heigth: 1em;
list-style-type: none;
margin-left: -2.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}

/* Navigation: dritte Ebene verbergen */

.lis-navigation .tocpanel ul ul ul {
display: none;
}

/* Navigation: dritte Ebene bei hover einblenden */

.lis-navigation .tocpanel ul ul li:hover > ul {
display: block;
font-size: 12px;
line-heigth: 1em;
list-style-type: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}




/* Symbol Pfeil nach oben in Navigation */

.lis-navigation p a::before {
content: url(/images/icons/nav_up_lis.gif);
}

/* Mouseover Links Farbanpassung */

a:hover {
color: #ffcc00;
text-decoration: none;
}

.wiki-content a:hover {
color: #ffcc00;
text-decoration: none;
}

 Further it could be relevant to know, that we are using the Scroll Versions plugin and the Scroll Translations plugin.

Screenshot:

lis_navigation_example.png

Thanks,

Volker

Hello Stephen,

Did you find out something? Can you help me with the problem?

Greetings,

Volker

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

494 views 24 9
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you