When in your writing you use information from sources such as books or journals you need to tell the readers where the information comes from and where the readers can locate the source. In other words, you cite or refer to the source of information. Generally, a bibliographic citation is a reference to a book, article, web page, or any other published item.
Commonly, citations are not easy to follow. When a reference is cited, the author gives a number in parentheses that corresponds to the number of the source in the alphabetical listing marked as "References". Even online articles follow this practice. By clicking on the citation number the reader is taken to the References section, usually at the bottom of the page. Scientific papers and even Wikipedia articles exemplify this awkward 'back and forth' style of referencing.
Livereference revolutionizes the obscure field of scholarly paper presentation. It is a simple jQuery/PHP based referencing tool designed for web developers and on-line publishers that makes literature citing easy and improves reading experience. The following example shows a livereference module applied to an extract from the biomedical article: Cytoskeletal Signaling: Is Memory Encoded in Microtubule Lattices by CaMKII Phosphorylation? [click to open/close the reference to this article].
The brain's ability to learn and store memory is understood in terms of changes in synaptic connections between neurons: ‘synaptic plasticity’ [1]. This is supported by the paradigm of ‘long-term potentiation’ (LTP) in which repetitive pre-synaptic stimulation increases post-synaptic sensitivity and strengthens synapses (e.g. the adage “neurons that fire together, wire together”). LTP is supported experimentally in vitro [2], [3], and may occur over many brain regions [4] as a common feature of excitatory synapses [5].
Livereference library is a jQuery/PHP plugin which you can with only a few lines of code integrate into your web page. It cosnists of three files:
Simple example of referencing a citation (click here for a complete demo):
<link rel="stylesheet" media="screen" href="css/livereference.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/livereference.js"></script>
...
<script language="javascript">
$(document).ready(function() {
$('.liverefLinkClass').livereference();
});
</script>
...
.. the book <span class="liverefLinkClass" data-lrerf="ISBN:1441404228">[1]</span> descibes...
TEST: .. the book [1] descibes...
A click on the link will open/close reference box. In addition, reference box can be closed by clicking anywhere inside it.
The latest jQuery library can be downloaded from jquery.com.
Inlcude into your web page the jQuery library, livereference stylesheet and script:
<link rel="stylesheet" media="screen" href="css/livereference.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/livereference.js"></script>
| Reference | Description |
|---|---|
| ISBN | <span class="liverefLinkClass" data-lrerf="ISBN:1441404228">[1]</span> ISBN referencing. Every publication is assigned an ISBN or International Standard Book number. Clicking on the reference [1] will retrieve data from Google Books database about "The Adventures of Tom Sawyer". You don't have to use [1] as a link. For example, in the APA style of citations this would be (Twain, 2010) for the 2010 edition of this book. In fact, you can use any text as a clickable reference, for example: {this is my favorite book} |
| PMID | <span class="liverefLinkClass" data-lrerf="PMID:22412364">[2]</span> PubMed ID, or PMID referencing. PubMed is a free database of references and abstracts on life sciences and biomedical topics. It uses PMID number to reference scientific papers. |
| WIDGET | <span class="liverefLinkClass" data-lrerf="WIDGET:1">[3]</span> Widget referencing. Widget is a piece of code that can be inserted into a web page. For example, Amazon widgets consits of one line of code that is linked to a specific product, a book in our case. Click on [3] will open such a widget. If you want to use widgets, you must have a small XML file that will contain widget code your plan to use like in this example. |
| TSV | <span class="liverefLinkClass" data-lrerf="TSV:0262621126">[4]</span> Tab Separated Values. You can create a tab separated value file (tsv extension) that will hold your references. The file must have TAB separated fields: id title subtitle author journal pubdate url If any of the data is missing just leave empty. Clicking on [4] will retreive data from this file. |
| ENDNOTE | <span class="liverefLinkClass" data-lrerf="ENDNOTE:15450156">[5]</span> EndNote referencing. EndNote is popular software tool for publishing and managing bibliographies. Among many features, it allows user to select any number of references and export them to a single XML file. All you need to do is to point livereference to this file. For example, a reference to [5] is retrieved from the EndNote exported file. The number after the "ENDNOTE:" must correspond to the "Record Number" in your EndNote database.
|
You can pass number of options to livereference plugin. The listing below shows default options that can be changed.
$('.liverefLinkClass').livereference({
sCitationStyle: 'vancouver',
sAjaxSource: '../livereference.php',
sWidgetsSource: '../widgets.xml',
sEndNoteSource: '../endnote.xml',
sTSVSource: '../livereference.tsv',
xOffset: 10,
yOffset: 10,
boxWidth: 'auto',
waitMessage: 'please wait..'
});
| Option | Default value | Description |
|---|---|---|
| sCitationStyle | 'vancouver' | reference style (vancouver or apa) |
| sAjaxSource | '../livereference.php' | ajax data provider (part of the package) |
| sWidgetsSource | '../widgets.xml' | name of widget XML file |
| sEndNoteSource | '../endnote.xml' | name of EndNote XML file |
| sTSVSource | '../livereference.tsv' | name of tab separated values file which serves a as local data source |
| xOffset | 10 | x offsets from the click for the reference box display |
| yOffset | 10 | y offsets from the click for the reference box display |
| boxWidth | 'auto' | width of the reference display box; if you prefer fixed with specifiy width in pixels, e.g. '400px' |
| waitMessage | 'please wait..' | message displayed while user waits for data |