acdlite / jquery.sidenotes Goto Github PK

hi I had an issue with refMarkId being null. This causes the script to terminate.
In my case the root cause was actually a plugin in CKeditor generating the footnotes with the id on $('sup a')
eg.

<h1>
  <sup data-footnote-id="11lvp">
    <a href="#sootnote-2" id="footnote-marker-2-1" rel="footnote">2</a>
  </sup>
</h1>

In your script the method refMark() on line 275 is used to retrieve the refMarkId variable, this method will return the "sup" tag as soon as it is found ignoring the "a" tag, which is actually strange considering the fact that the "a" tag is usually inside the "sup" tag, anyways I didn't want to change this method as it seems to be used a lot, I fixed my little problem by changing line 226 from

    this.refMarkID = this.refMark().attr('id');

to

    this.refMarkID = this.refMark().attr('id');
    if (this.refMarkID == null)
        this.refMarkID = this.$refMarkAnchor.attr('id');

I hope this helps you solve this problem the proper way.

Otherwise great script. :)

Hi, I have very limited CSS background. So I am sorry the questions I'm asking is quite rudimentary.

I tried to use your jquery.sidenotes with different methods (including looking at your gh-pages construct. But it is quite sophisticated so I lost track on which ones are the essential elements). But the sidenotes always goes into an unexpected location (sometimes outside the frame, sometimes wrapped around. Do you mind giving a minimal CSS as an example to show how it should be used?

And in the documentation, could you give an example of how the jquery.sidenotes transform the HTML? e.g. before it was such an HTML, and after that it becomes this? I understand it transform the footnotes into an asside element, but what kind of footnotes code was it look for (I'm thinking if a different Markdown to HTML conversion might not work) and what it transforms into. A simple before and after codes would help.

Thanks.

Sidenote created without group element for html like this:

<article class="post">
  <p class="pivot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, odit, maxime, eos nobis molestias quod modi voluptas quibusdam doloremque repellendus quasi illo veritatis ullam eius magnam nemo iste ipsam autem.<sup id="fnref:only-one"><a href="#fn:only-one" class="footnote">1</a></sup> Aliquam, alias, quo id aperiam atque accusantium repellat enim explicabo sed illum cumque iure possimus vero cupiditate officia nesciunt autem reiciendis expedita tenetur ut est accusamus non provident ea voluptatem itaque molestiae ducimus distinctio soluta tempora sapiente similique perspiciatis dolor voluptatum sint quibusdam porro pariatur architecto vel consequatur!</p>

  <div class="footnotes footnote-container">
    <ol class="footnote-list">
      <li id="fn:only-one">
        <p>First and only note. <a href="#fnref:only-one" class="reversefootnote">&#8617;</a></p>
      </li>
    </ol>
  </div>
</article>

In jquery.sidenotes.coffee line 155 script check previous sidenote existent and if not exist (it's our case) group not created at all. I've tried fix this issue by myself, but my fix broke other tests, so I gave up.

Because the code walks up to the level of the post to find the pivot element, notes on a definition list don't line up with the correct term.

Markdown:

TERM_1
: definition
: definition

TERM_2
: definition
: definition [^note]

[^note]: This aside is placed above the entire list (i.e. before TERM_1),
 instead of next to this definition.

Within the list, the html is flat:

<!-- the aside element gets placed here -->
<dl>
  <dt>TERM_1</dt>
  <dd>definition</dd>
  <dd>definition</dd>
  <dt>TERM_2</dt>
  <dd>definition</dd>
  <!-- but I think it should be placed here -->
  <dd>definition</dd>
</dl>