0

I'm using JavaScript to automatically create footnotes from a HTML text page. The JS code is based on this example: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Auto-Footnoter (description in German). The script basically collects all elements in the text which are marked by <span class="fn">, creates a div element for the footnote explanations at the bottom of the page and adds a backlink to the anchor of the footnote in the text. The result of this is comparable to Wikipedia's footnote system. The JS script basically works fine, after I adjusted it to my needs.

On top of my page, I'm using a fixed header. To make the anchor link visible, I added the class fnheader to the a tag created by the JS script with the following CSS:

a.fnheader {    
    position:relative;
    margin-top:-150px;
    padding-top:150px;
    visibility:none;
    }

I normally would prefer the solution presented hear https://stackoverflow.com/a/13184714/10321738, but display: block; won't work for the footnotes (they are all lined up at the left side of the page, but not in the text anymore), the above CSS does.

So the header is no longer hiding the anchor links. But the problem now is the padding of 150 px which is added by the CSS. When I get to a situation like this in the text

bla blah blah bla bla blah bla blah blah
bla bla bla blah [1] bla blah bla blah
bla bla bla bla [2] blah bla blah bla

where 1 and [2] represent the footnotes, clicking on 1 gets me to the description for footnote [2], because the top padding of the [2] link is extended to the line of footnote 1. The link for footnote 1 is only clickable when pointing to the respective position in the line above the 1 footnote. I think the problem is clear ...

Is there any way of reducing the clickable area for the footnote link (preferably by CSS)? Or does somebody have a better idea to get the problem with the fixed header solved?

Thanks for any advice on this in advance!

Edit: Some additional info to get the problem clearer: The style fnheader is applied to the footnotes in the text by the JS script. It adds a 150 px padding top to the link in order to move it down the fixed header on top of the page. This leads to the effect that you get to the footnote description of [2] when clicking on 1, because the padding also extends the clickable link area of the footnote to the preceding line.

Unfortunately, I cannot provide any code here.

Edit 2: I just applied a 1 px solid border to the footnotes in the text to get a visual sense of what is going wrong. This is what it looks like:

enter image description here

As you can see, the top padding is extended to the top (as expected) to get past the fixed header at the top of the page. This results in the extension of the clickable area to preceding lines and also other footnotes in the text (as shown in the screenshot).

bear87
  • 83
  • 1
  • 11
  • the 150px pushes the content down past the fixed header, but what does that have to do with the links in the footer? Are they clones that include the fnheader tags? Can you add a style to the footer to remove the padding and margin on those? Share some code or a link? – JasonB Mar 14 '19 at 16:57
  • The fnheader is applied to the footnote links in the text (which is [1], [2] ...) in the above example. The padding of 150 px extends the clickable area of the footnotes, so that clicking the [1] gets me to the footnote description of [2]. – bear87 Mar 14 '19 at 17:07

0 Answers0