jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

AutoAnchors jQuery Plugin

A jQuery plugin that automatically creates an anchors navigation for certain elements (for example H2) inside a container element (div, body whatever ...). It automatically generates the anchors and can even make them numbered. And the whole thing is of course fully styleable through CSS.

Demo Usage Styling Download Compatibility Changelog

Demo

In this demo, a div with three headers (h3), each one of them followed by some lorem ipsum filltext, gets an automatic anchor navigation on those headers (check the source to see how the original content looks like):

Test Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

Another Test Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

A last one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

Usage

This is how the above demo is created:

$(document).ready(function(){
  $("div.demo").autoAnchors( 
    {
      anchor: 'h3',
      title: '<h3>Content</h3>',
      numbering: true
    }
  );
});

You can use the plugin with default options like this:

$(document).ready(function(){
  $("div.demo").autoAnchors();
});

Default options are: anchor: 'h2', title: '', numbering: false

You can put more than one anchor navigation on the same page, just make sure that if you invoke them a second time with different options, that the link titles should be different or it can result in two anchors named the same.

Styling

Here's how the demo was styled:

div.autoanchors {
	float: right;
	background: #f2f2f2;
	border: 1px #ccc solid;
	padding: 8px;
	margin-left: 8px;
	margin-bottom: 8px;
}

div.autoanchors h3 {
	padding: 0px;
	margin: 2px;
	background: #39f;
	color: #fff;
	padding: 2px;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 6px;
	text-align: center;
}

div.autoanchors ul {
	margin: 0px;
	padding: 0px;
}

div.autoanchors li {
	list-style: none;
	padding: 0px;
	margin: 2px;
}

div.autoanchors li a {
	text-decoration: none;
	background: #e6e6e6;
	padding: 2px;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 10px;
	display: block;
	color: #333;
}

div.autoanchors li a:hover {
	background: #39f;
	color: #fff;
}

span.numbering {
	background: #aaa;
	color: #fff;
	padding: 2px;
	padding-bottom: 1px;
	padding-right: 5px;
	padding-left: 5px;
	margin-right: 8px;
}

As you can see, the navigation is an ul list inside a div with class "autoanchors" and the numbering is a span with the class "numbering".

Download

Current version: jquery.autoanchors-0.5.js (1.6k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog