Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery plugin that automatically generates birdseye navigation for a content container
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
scss
README.md
birdseye.css
birdseye.js
dataset.js
index.html

README.md

jQuery.birdseye

About

jQuery.birdseye will read a content container and create a minified, birdseye version which shows the container's children elements in a navigable list, and the location of the user's viewport.

It's ideal to use on a content area with lots of subsections, like a long quiz or a long form.

To Use

  • copy dataset.js, birdseye.js, and birdseye.css somewhere into your project
  • link to jquery, jquery UI, dataset.js, and birdseye.js in that order in your <head>
  • link to birdseye.css somewhere in your <head>
  • place a div, section, or aside into your document with the class of .birdseye
  • on page load, call the birdseye function on the element for which you want birdseye navigation
$(function() {
  $('.container').birdseye();
});

Options

You can currently set the child element from which birdseye will create its sections, and the element which it will read for the section's title.

These values currently default, respectively, to "div", "h2".

Here's an example of overriding the default values:

$(function() {
  $('.container').birdseye({
    'child_element' : 'section.class',
    'title_element' : 'h1.title'
  });
});

Note: birdseye.css applies default styles to the .birdseye container - it sets a width, and position:fixed;

Check back or "watch" for updates!

Something went wrong with that request. Please try again.