Jekyll One

QuickSearch

This page is under construction. An updated version will be available soon.

Tocbot for J1 Theme is a jQuery plugin for …​

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Library Features

This library uses vanilla JavaScript. It is less than 400 bytes of CSS and about 4Kb of JavaScript (minified and gzipped). The only dependency this script has is Smooth Scroll (which has no dependencies).

This script works in all modern browsers and IE 7+.

Initialization

CSS load

CSS is used for expanding & collapsing groupings and some basic styling.

<link rel="stylesheet" href="/assets/css/tocbot.css">

JS load

Include the script at the bottom of the page before the closing body tag.

<script src="/assets/js/tocbot.js"></script>

JS initialization

Initialize the script

tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
});

If content in the div has changed then trigger a refresh (optionally with new options).

tocbot.refresh();

Options

tocSelector

headingSelector

ignoreSelector

contentSelector

activeLinkColor

collapseDepth

headingsOffset

throttleTimeout

includeHtml

scrollOptions

easing

offset

speed

updateURL

Callbacks

No callbacks or events.

Methods

.init

Initialize tocbot with an options object.

tocbot.init(options)

.destroy

Destroy tocbot and remove event listeners.

tocbot.destroy()

.refresh

Refresh tocbot if the document changes and it needs to be rebuilt.

tocbot.refresh()

J1 Integration

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Module sources

The sources for J1 OWL Carousel are stored within the asset path of J1Template. You’ll find all necessary data files under /assets/theme/j1/owl_carousel_v1:

Structure of the J1 OWL Carousel application tree (base components)
  ├───css
  │   │   owl.carousel.css
  │   │   owl.carousel.min.css
  │   │   owl.transitions.css
  │   │   owl.transitions.min.css
  │   │
  │   └───themes
  │           j1_template.css
  │           j1_samples.css
  ├───images
  │       ajax-loader.gif
  │       grabbing.jpg
  │       owl.video.play.jpg
  └───js
          owl.carousel.js
          owl.carousel.min.js

Configuration

Initialization

Customization

Available Navbar Variants

Fixed Embedded

  <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">

Fixed Overlay

  <nav class="navbar navbar-default navbar-fixed white navbar-transparent bootsnav">