A referencing tool for online articles and books that makes literature citing easier
and improves reading experience.


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:

  1. livereference.js - javascript plugin
  2. livereference.css - customizable reference styles
  3. livereference.php - background (ajax) module. It make use of PubMed, Google Books API or user created files to retreive reference information.

Quick start

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() {
.. 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.

How to use the plugin

1. Make sure you have jQuery library

The latest jQuery library can be downloaded from

2. Include nessesary CSS and JS files in your webpage

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>

3. Create a link to your reference


<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}


<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.


<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.


<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.


<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.

 sCitationStyle: 'vancouver',
 sAjaxSource: '../livereference.php',
 sWidgetsSource: '../widgets.xml',
 sEndNoteSource: '../endnote.xml',
 sTSVSource: '../livereference.tsv',
 xOffset: 10,
 yOffset: 10,
 boxWidth: 'auto',
 waitMessage: 'please wait..'

OptionDefault valueDescription
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
xOffset10x offsets from the click for the reference box display
yOffset10y 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

Sites using livereference:

Digital Consciousness Project