bigfoot icon indicating copy to clipboard operation
bigfoot copied to clipboard

How to use bigfoot with different html markup

Open ghost opened this issue 9 years ago • 0 comments

Hi,

i find bigfoot.js and i think is very well made! We are developing a website, a sort of report on line with different chapters. Each chapter have some notes and we'd liket embed the bigfoot number.js into it.

So this chapters are automated and html code is standard so we need to yield the plugin to our markup.

So we have this:

Each footnote have this markup:

<a class="footnote" href="#footnote1">(1)</a> and not this <sup id="fnref:1"><a href="#fn:1" rel="footnote">(1)</a></sup>

In the bottom of the page: <h2>Footnotes</h2>' '<p class="footnoteContent" id="footnote1">(1) - bla bla bla</p>

And not this <div class="footnotes"> <ol> <li class="footnote" id="fn:1"> <p>Cake topping jelly-o caramels.<a href="#fnref:1" title="return to article"> ↩</a><p> </li>

In the bigfoot.min.js i change this params like this: footnoteParentClass:"footnoteContent", footnoteTagname:"p" anchorPattern:/footnote[:\-_\d]/gi, anchorParentTagname:""

With firebug i can see the embed note inside the button but: if click the number i go to thew bottom of the page not popover. before the word with the footnote number i have 3 huge ovals (creted by the svg values inside the button generation)

Have you some ideas, suggestions? I can change my markup, so it's not simple.

Thanks Bye

ghost avatar Oct 31 '16 10:10 ghost