search

vaetas / hugo-footnotes-popup

Pure JavaScript plugin to make your footnotes displayed in a panel. Works with footnotes generated from Markdown in Hugo.
https://www.vaetas.cz/posts/hugo-footnotes-popup/
MIT License
26 stars 3 forks source link

Setting it up correctly #2

Closed mr-islam closed 5 years ago

mr-islam commented 5 years ago

Wonderful project, thank you very much!

I'm trying to get it working on my Hugo site, https://navedislam.com. I've included the footnotes.js file and also added the necessary script HTML to my partial. I've confirmed both are present on my live website using the dev tools (see this page).

But, when I click the footnotes, nothing happens and nothing is logged in the console either. Could you kindly help me sort this out? My website is open source.

vaetas commented 5 years ago

Hello Naved,

I checked your site and found out that the problem is caused by missing CSS styles for this plugin. Javascript is therefore not able to correctly show/hide the popup.

This is my problem because I forgot to state you are required to use the CSS in this project's README.

In order to make it work, copy my example CSS main.css (html and p tags are not important) to your style.css file. You will probably need to customize it because it might collide with some of your existing styles (e.g. max width in p tag).

I tried to inject example CSS to your style file and it worked. Let me know if it works for you too.

I will update the README as soon as possible.

mr-islam commented 5 years ago

Thank you Vojtech for your super fast reply!

I have fixed the CSS now and it is working great 👍🏼.

I'll leave this issue open as a small reminder until the README is updated 😊