How to set a fixed floating image that scrolls with page?

Gina Lafferty June 2, 2014

Thanks to everyone in advance for their time and help.

I am currently trying to insert an image that serves as a Legend for a page in Confluence. I would like this image to be fixed so that it can be seen from any part of the page. My hopes is that it would remain static on the right as you scrolled through to asist with any confusion on the end users part.

I've been having some trouble finding options as to what macros would allow me to fix the image in such a way.

Any help or suggestions would be greatly appreciated.

Thank you!

4 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

7 votes
Answer accepted
Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 18, 2014

OK, we've made this work! :) Here's how we did it using the CSS Stylesheet, Panel and TOC macros:

  1. We created a page with a two section layout.
  2. In the left-hand one we added a load of text and headings. This is so we had something to scroll through.
  3. Above this we added the CSS Stylesheet Macro. Inside this we added:
    #tocContainer {
    margin-right: 30px;
    position: fixed;
    right: 0;
    top: 100px;
    width: 300px;
    }
  4. The name "#tocContainer" is referring to the 'div' macro we added. See the following steps.
  5. In the right-hand section we added the 'div' macro; and in the ID field called it "tocContainer".
  6. No other parameters were changed or added.
  7. Inside that we added the Panel macro (this was to make the element that was not scrolling more obvious once the page was saved.)
  8. We then added the TOC macro into the Panel macro.
  9. That's it.

In our example, the TOC and its panel stay in the top right of the page whikle everything else moves up and down. I also found that if you add content under the TOC and its panel, this also scrolls up and down. However the TOC itself stays still and therefore obscures the content below a little.

One problem I found with this is that when I added a very long set of headings and text, the floating TOC expanded off the page and wouldn't scroll, so you can't see what's at the end or use that link to jump to the heading. That said, you have to added a few dozen for this to happen, so it shouldn't be an issue.

Cheers.

Ian Mason June 24, 2014

Hey Mick, which CSS Style sheet macros did you use in this case?

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 24, 2014

I thought they were the ones that come with Confluence (download 5.4.3).

Ian Mason June 24, 2014

I think I figured it out. The only thing is that I could I apply it to my test space, but when I went to apply it to the desired space, I don't see a Save button under CSS Stylesheet. Any guess as to why that might be?

Sarah Grefalda December 7, 2015

No need to add a CSS Stylesheet macro. The `div` macro has a Style option to apply inline styles, which is perfect for a case like there where there are only a few to apply.

Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 7, 2015

When it comes to CSS it is typically best to not put the style directly on the element. By doing that you trump any other CSS.

Sarah Grefalda December 7, 2015

Generally I'd agree (keep styles to CSS, not inline) but it's option and it made sense in my case. I have no use for a CSS Stylesheet macro on my page--only the floating div element.

Admin July 13, 2016

How did you add CSS Style sheet macros , i dont see any macros with name CSS?

Like Deleted user likes this
Sarah Presotto Post June 14, 2018

How do you prevent the object from scrolling over the footer? Looking for a solution to indicate a stopping point on the page - stop at a certain distance from the bottom so that the object does not scroll over tags/footer/other content. Thoughts?

Thanks!

 

Screen Shot 2018-06-14 at 3.04.47 PM.jpg

SB December 3, 2018

@Mick Davidson hoping you're still around, because the floating TOC you've provided a solution is just about what I've been looking to implement in Confluence for weeks now.

 

While it seems to work as intended, there happens to be a minor issue; when the browser window is resized, particularly when made narrower, the TOC tends to overlap on the first column's content.

What sort of CSS voodoo would fix this? Thanks.

Like Mick Davidson likes this
Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2018

I've moved on job-wise, and away from Confluence as an admin/evangelist. Still use it, but I now leave the problems to other people. :)

Thanks though. :)

0 votes
Matthew Wezowicz May 13, 2019

{

background-attachment: scroll;

}

0 votes
Mehmet Kazgan
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 2, 2014

Gina,

You can add a custom css to the page by:

1. Adding a css stylesheet macro like this below:

.aui-tabs.vertical-tabs>.tabs-pane {
background-color: #303030;
}

#splitter-content {
background-color: #000000;
}

2. using the floating image css

http://www.iamchristinabot.com/blog/20120119/how-do-i-get-an-image-to-float-on-my-website-even-when-scrolling/

0 votes
Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 2, 2014

I would get the content formatting macros if you don't already have it. This will gave you a stylesheet macro that you can put into any page. Once you have that addon just create your legend somewhere on the page and wrap it in a div macro (also included with the content formatting macros) and give the div a unique id so that you can target it wil css easily. Then add a style macro and put in some css to target that div. Specifically you want to set the position property on the div to fixed. Here is an example of some css. Play around with the top and right values to get it right for you.

#lengendWrapper {
    position: fixed;
    top: 200px;
    right: 100%;
}

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 5, 2018

Thank you, from 2018! :) 

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events