Littlefoot footnotes and iFrames

Using Ghost
1

Thanks to @Cathy_Sarisky 's suggestions/site I’m using Littlefoot for footnotes. On a mobile phone the footnotes appear underneath the portal button (bottom right) and underneath a ‘Buy me a coffee’ button I’ve added, bottom left.

Is there a way to make them appear on top of the buttons? I guess this is an iFrame issue, or something in the littlefoot code. I had a look through the usage and options for the latter and could see nothing obvious.

I know I could move the buttons! I’d really prefer not to.

While I’m here, this is how I add footnotes …

  • I write in Obsidian (Markdown) and add footnotes inline using curly brackets {{234 Like these, the number must be unique, and used during renumbering.}}.
  • Once the text is complete, I post-process using a script that renumbers all the footnotes sequentially, just leaving {{1}} in the text and adding the ordered footnotes at the bottom of the page.
    {{1}}: Like these, the number must be unique, and used during renumbering.
  • I upload the file to Ghost from Obsidian and have modified the code injected to the footer to recognise {{integer}}
  • This works well and means I can write the footnote as I write the text, without jumping about the page and/or remembering the last footnote number I used.

Here’s a screenshot of the footnote and buttons on a phone:

Screenshot (18 Mar 2024 20_54_56)
Screenshot (18 Mar 2024 20_54_56)864×1920 210 KB

2

Thanks for sharing your approach!

You’d need to adjust the z-index on the container the footnotes are in. Probably to a couple thousand. Should be doable with some code injection!

1 Like
3

This code injection should do the trick (tested in my browser dev tools on your site :slight_smile:):

<style>
.littlefoot__popover {
    z-index: 10000000;
}
</style>
2 Likes
4

Many thanks @jannis … it’s clear that Buy Me A Coffee want their widget on top with a z-index of 999,999.

Great support :grinning:

Have a good holiday!

Cheers
David

2 Likes