Skip to content

Instantly share code, notes, and snippets.

@Hypercubed Hypercubed/cite.js
Last active Aug 29, 2015

Embed
What would you like to do?
Simple mechanism to link citation references with citation notes.
/* Author: J. Harshbarger
Simple mechanism to link citation references with citation notes. This code will do two things:
1) Highlight a citation note (actually just add the `highlight` class to the parent) when a citation reference or note is clicked.
2) Citation note text (the anchors parent) is added to each citation reference as a popover.
Citation notes and references are linked using standard HTML has linking using the anchor tag. For both the citation note and citation reference the parent of the link is important. For example:
```js
<span>This text will be highlighted when the user clicks <a href="#cite_note_A" name="cite_ref_A">[A]</a></span>
<p><a href="#cite_ref_A" name="cite_note_A">^</a> This is the citation text that will appear in a popover when a user hovers over reference [A] </p>
```
All this needs to be inside a `#content` element (or customize it yourself below).
*/
$(document).ready(function() {
var $links = $('#content a[name*=cite_]');
var $citations = $links.parent();
$links.click(function(){
var refName = $(this).attr('href').split('#')[1];
$citations.removeClass( "highlight" );
$citations.has('a[name='+refName+']').addClass( "highlight" );
});
$citations.find('a[href*=#cite_note]')
.each(function(a,elm) {
$elm = $(this);
var refName = $elm.attr('href').split('#')[1];
var content = $citations
.has('a[name='+refName+']')
.text()
.replace(/^\^/,'');
var original = $elm.attr('data-content');
$elm
.attr('data-original-content', original)
.attr('data-content', content);
})
.popover({trigger: "hover", container: 'body'});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.