Ajax fragment links

The frag-linx widget (Ajax fragment links) embeds linked document fragments in the current page for presentation as tooltips or expandable content.


Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.jaria.js"></script>
<script type="text/javascript" src="jquery.frag-linx.js"></script>

The plugin can act on any link in the <body> of your document, for example:

<p><a href="glossary.html#future-beans">future beans</a></p>

The plugin needs to be initialised after the link markup has been parsed (once the DOM is ready is soon enough).


There are various options that can be passed on initialisation.

Now the linked content fragments need to be set up. For the example above, you would need create a glossary.html file, containing page fragments marked-up like the following:

<div class="section" id="future-beans">
	<h2>Future beans</h2>
	<p>Canned beans stored in anticipation of a nuclear war or
		<a href="#zombie-apocalypse">zombie apocalypse</a>.</p>
<div class="section" id="zombie-apocalypse">
	<h2>Zombie apocalypse</h2>
	<p><a href="http://l4d.com/">Bring friends....</a></p>

This will result in links to page fragments that are progressively enhanced to request the page using Ajax, and display the contents of the linked fragment as a toolip or expandable section (depending on configuration and CSS used).

Working example

A complete demonstration of the frag-linx plugin is available.


frag-linx is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.


Download the complete frag-linx 0.3 example package (.zip)

Individual files

Plugin options

The following options can be can be passed on initialisation of the plugin:

options = {
	behaviour       : 'expandable', // 'expandable', 'tooltip' (currently only 'expandable' is supported)
	animationSpeed  : 'normal', // 'slow', 'normal' or 'fast' or a number of milliseconds
	linkSelector    : 'a', // can be specified to select some links and not others
	onlyEverOneOpen : true, // if set to true, only one link content can be expanded at a time.
	callback        : null // a callback function to perform after content is expanded or collapsed

Posted in

Leave a reply