DocsJS

Why DocsJS

DocsJS is an open-source documentation library lets you focus on just writing in HTML or Markdown: you won't ever have to touch javascript, command line, etc.
Use DocsJS when basic markdown parsers are too basic and full documentation generators are not worth the setup. Here's what DocsJS takes care of:

Compatibility: IE8+ (Windows XP), FF11+, Chrome15+, etc.
Accessibility: complies with & exceeds accessibility standards.
Navigation: menus, links (url changes on scroll), etc. Jump to next topic.
Responsiveness: built for mobile, better on desktop. Shrink screen!
Time: compact custom tags or markdown. Syntax-highlighting built-in.
Aesthetics: modern and easily customizable. Change theme!

1.2.7 // A mark up // 1 Oct 2017

Support for markdown
Sidebars improved
Redeisgned minimal theme now default
All known bugs fixed

1.1.0 // Sidebars // 26 Sep 2017

UI for sidebars redesigned
Massive overhaul to scrolling performance
Bug fixes

1.0.3 // Initial // 24 Sep 2017

DocsJS publicly released!

Github (Link)

Using markdown?

It's recommended that you use custom tags (described under "Quick start") as they provide more flexibility and control. However, DocsJS can also parse Markdown. Using Markdown, you'll still get easy syntax-highlighting, DocsJS navigation, accessibility, compatability, and everything else.

Add DocsJS

First, add this to the head of your doc,
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/docs.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/src/themes/Minimal.min.css" rel="stylesheet" id="DocsJS-theme"> and then this to the body. (You can edit the code and preview the changes)

<docs-js mode="markdown" sidebars="none menu"></docs-js> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/ace/ace.js"></script> <script>DocsJS.init();</script>

A few things

Since Markdown uses some characters incompaible with HTML (like > and &), you'll want to put everything in a comment. However, if you don't want to use a comment, just encode your markdown.

On the <docs-js> tag, you'll notice the attributes mode="markdown" and sidebars="none menu". If you have code, you can set sidebars to sidebars="menu e-g", which will display code on the right and a menu on the left. (If your window is wide enough)

If you ever decide to use DocsJS' recommended custom tags instead of markdown, remove mode="markdown" and read Quick start below.

Make sure you check out Customize below to personalize DocsJS (like choosing a theme). Also, if you use the markdown mode, you'll get the converted markdown -> DocsJS custom tags logged in your console.

Quick start

Let's get started. First of all, you'll have to add docs.js to your HTML page.

First, add this to the head of your doc,
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/docs.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/src/themes/Minimal.min.css" rel="stylesheet" id="DocsJS-theme"> and then this to the body.

<docs-js sidebars="choice choice">  <s-c> <h-d> <t-l>Example header</t-l> <t-x>Header content</t-x> </h-d> <t-p> <t-l>Example topic</t-l> <t-x>Topic content</t-x> <e-g>Example</e-g> <e-x>More</e-x> </t-p> </s-c> </docs-js> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/ace/ace.js"></script> <script>DocsJS.init();</script>

DocsJS should now be up and running on your site!

A lot of current documentation consist of many small pages connected by hyperlinks. However, DocsJS, by being a JS library, encourages few larger docs or even single page docs. Below, I've explained why this is the better approach.

Loading times: Text isn't that heavy so it makes more sense to make fewer, larger requests instead of many, smaller requests that primarily load scripts, styles, etc.
Accessibility: If you find loading times annoying, imagine how people with disabilities or people on a slow internet feel about having to click a million links. Users can also save a large page for offline reading.
Disorganized: Often, the amount of links on a doc can get so insane it gets hard to keep track or even find them.
Hard to write: Would you rather write docs in flexible, clean, structured HTML or learn how to use a server side generator.

Disagree with my opinion? I'd love to hear what you think at [email protected]

Basic structure

DocsJS uses the following tags: <s-c> <h-d> <t-p> <t-l> <t-x> <e-g> <e-x> <c-d> <v-r> and they mean: section, header, topic, title, text, example, extra/more, code, variable. Try adding a topic in the code!

<docs-js sidebars="choice choice">  <s-c> <h-d> <t-l>Example header</t-l> <t-x>Every section needs a header</t-x> </h-d> <t-p> <t-l>Example topic</t-l> <t-x>Wow! What a moving topic this is.</t-x> <e-g>Here's an example of how this topic will change your life.</e-g> <e-x>You won't believe what extra details this contains next.</e-x> </t-p> <t-p> <t-l>Ohmygosh another topic</t-l> <t-x>Too many topics!!</t-x> <e-g>Too many examples!!</e-g> </t-p> </s-c> </docs-js>

Nested structures

Every custom tag is basically a div so you can nest them within each other, add attributes like style="", etc. Nesting these tags can help create a well-organized doc. Experiment with different combos below!

<docs-js sidebars="choice choice">  <s-c> <h-d> <t-l>Regular header</t-l> <t-x>Nested tags make more sense in certain themes, so this example uses the "Hailaxian" theme.</t-x> </h-d> <t-p> <t-l>Regular topic</t-l> <t-x>However, the contents of this topic are special!</t-x> <s-c> <h-d> <t-l>Embedded section</t-l> <t-x>That's right, this is a section in a topic. You can add as many sections in a topic as you want! Try adding more topics and sections inside this topic.</t-x> </h-d> </s-c> <t-x>Check this out too.</t-x> <t-p> <t-l>Embedded topic</t-l> <t-x>A topic inside a topic!</t-x> </t-p> </t-p> <s-c> <h-d> <t-l>More embedded sections</t-l> <t-x>This is what a section inside a section looks like.</t-x> </h-d> </s-c> </s-c> </docs-js>

There are a few restrictions: every section must contain a header, no topic's immediate parent can be the &t;docs-js>, and you can't add topics or sections inside of e-g or e-x tags. (I'm aiming to remove all restrictions in future versions)

A few attributes

Now you know everything you need to know to use DocsJS. However, the next two topics can help you make your docs extra spicy. There are two important attributes to know: docsjs-state, docsjs-name, and sidebars.

1. docsjs-state can be set to either min or max and determines wether a topic, section, or e-g/e-x is minimized or maximized initially. It defaults to min on e-g/e-x and max on s-c/t-p.

2. docsjs-name sets name of e-g/e-x shown on the bar that open/closes the e-g/e-x. It defaults to "Example" for e-g and "More" for e-x.

3. sidebars determines what sidebars are opened by deafult. It accepts two values separated by a space. The possible values are: choice which is the default, none which hides the sidebar, menu which displays a menu, e-g which displays the e-g tags, and e-x which displays the e-x tags. Try setting this to menu e-g and see what difference it makes. (If the window isn't wide enough, the sidebars won't open.)

<docs-js sidebars="none menu">  <s-c> <h-d> <t-l>Regular header</t-l> <t-x>Oh, by the way, the circular button minimizes/maximizes the section and clicking on a title minimizes/maximizes the topic or header.</t-x> </h-d> <t-p docsjs-state="min"> <t-l>Minimized topic</t-l> <t-x>The reader will have to click the title to expand this topic.</t-x> </t-p> <t-p> <t-l>Regular topic here</t-l> <t-x>But some of the e-g and e-x tags are named!</t-x> <e-g docsjs-name="Wow!" docsjs-state="max">Named and maximized example.</e-g> <e-g docsjs-name="Hello world">Named example.</e-g> <e-x docsjs-state="max">Maximized extra details.</e-x> </t-p> </s-c> <s-c docsjs-state="min"> <h-d> <t-l>Minimized section</t-l> <t-x>Try the sidebars!</t-x> </h-d> </s-c> </docs-js>

Bonus tags!

There are two tags that haven't been covered yet: <c-d> for syntax-highlighted code and <v-r> for HTML variables.

<c-d> is pretty simple. First, just pretend it's a <pre> tag and add code in whatever language you want. Next, add the attribute docsjs-lang and set it to the language you used. If I wrote javascript in a c-d tag, I would make it: <c-d docsjs-lang="javascript">alert('Hello World!');</c-d>

abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, behaviour, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, graphqlschema, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, less, liquid, lisp, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, maze, mel, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, pig, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sparql, sql, sqlserver, stylus, svg, swift, tcl, tex, text, textile, toml, tsx, turtle, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml

DocsJS' <v-r> tags allow for HTML variables, which can help tidy your code and prevent excessive copy-pasting. <v-r> tags with anything inside will define a variable while an empty <v-r> will call a variable.  <v-r helloWorld> <p>Anything you want!</p> </v-r>  <v-r helloWorld></v-r>  <p>Anything you want!</p> Play with these tags below!

<docs-js sidebars="choice choice"> <v-r logo> <div style="padding-top: 0.1em; display: inline-block;"><div docsjs-tag="button-parent" style="display: inline-block;"><div style="position: absolute; margin-left: -10%; height: 100%; width: 100%;"><div docsjs-tag="button-child" style="height: 70%; width: 70%; background-color: transparent; -ms-filter:'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc); border-radius: 0; border-bottom: none; border-left: none;"></div></div></div></div> </v-r> <s-c> <h-d> <t-l>NextMouse</t-l> <t-x>NextMouse is an international corporation dedicated to creating the most next-level mouse ever. Our products are named by their model number followed by our logo: <v-r logo></v-r><br> Today, we're releasing product Razr<v-r logo></v-r>. It's made from 42 nexts to create the most advanced mouse<v-r logo></v-r> ever. Order your Razr<v-r logo></v-r> today!</t-x> </h-d> <t-p> <t-l>Beautiful syntax highlighting</t-l> <t-x> Here's an example of syntax highlighted css:<br><br> <c-d docsjs-lang="css">body, html{ margin: 0; padding: 0; font-size: 22px; }</c-d><br> Oh yeah, you can add the attribute <pre>docsjs-editable="true"</pre> to make the code block editable.<br> For example, <pre><c-d docsjs-lang="css" docsjs-editable="true"></pre>. Try making the above editable! </t-x> </t-p> </s-c> </docs-js>

Features

Congratulations, you've learned how to use DocsJS! If you want to go deeper, this section contains some details on the design behind the best features.

Navigation

DocsJS generates menus (button at the top right of every topic for mobile & left sidebar for desktop), navbar (top of page below the accessibility button), and links. What are the links?

If you scroll from topic to topic, you'll notice that the end of the site's url changes. It probably looks like #%5B0%2C6%2C0%5D right now. You can save or share this url; opening this url will automatically scroll the user the topic you were on.

However, hailiax.io/docsjs/#%5B0%2C6%2C0%5D is ugly, so you might want to use the title of the topic/header you're on. For example, hailiax.io/docsjs/#Navigation. Just make sure you encode the titles (space -> %20 etc). You can even make with DocsJS!

URL's hash is decoded, then passed to DocsJS.scroll(); For example, hailiax.io/docsjs/#%5B0%2C6%2C0%5D is decoded to [0,5,0] which calls DocsJS.scroll( [0,5,0] );. Below are the accepted types.

Function & parameter // What it does // URL hash DocsJS.scroll( "Callables" ); // Scrolls to the first topic/header named Callables. // %22Callables%22 (shorthand no quotes: Callables) DocsJS.scroll( ["Javascript","Callables"] ); // Scrolls to the first topic/header named Callables that's inside a topic/section named Javascript. // %5B%22Javascript%22%2C%22Callables%22%5D DocsJS.scroll( [0,5,2] ); // Scrolls to the 3rd topic inside the 6th section inside the 1st docs-js tag // %5B0%2C5%2C2%5D DocsJS.scroll( 3 ); // Scrolls 3 topics down // 3 DocsJS.scroll( -1 ); // Scrolls 1 topics up // -1 DocsJS.scroll( 0 ); // Aligns current topic to the top of the screen // 0 DocsJS.scroll( Infinity ); // Scrolls to the last topic // Infinity DocsJS.scroll( -Infinity ); // Scrolls to the first topic // -Infinity DocsJS.scroll( true ); // Scrolls to the top // true DocsJS.scroll( false ); // Scrolls to the bottom // false

You can encode URLs here or use encodeURIComponent()

Whatever is added to the end of the URL is first decoded and then passed to DocsJS.scroll();. What does this mean? Let's take hailiax.io/docsjs/#%5B0%2C6%2C0%5D. The %5B0%2C6%2C0%5D is first taken off the URL and then decoded to [0,5,0]. Then, DocsJS.scroll( [0,5,0] ); is called. [0,5,0] means: 1st docs-js tag, 6th section, 1st topic. In addition to taking arrays of numbers, DocsJS.scroll() also takes strings, array of strings, numbers, and booleans.

The array of numbers described above gives each topic and header a unique url. However, it's ugly you so might want to pass strings. hailiax.io/docsjs/#Browser%20support is shorthand for hailiax.io/docsjs/#%22Browser%20support%22 which then calls DocsJS.scroll( 'Browser support' );. Passing a string just makes the doc scroll to the first topic/header that matches the string.

If you have multiple topics/headers with the same title, you can pass an array of strings like hailiax.io/docsjs/#%5B%22Features%22%2C%22Navigation%22%5D which calls DocsJS.scroll( ["Features","Navigation"] );. This will scroll the user to the first topic/header named "Navigation" that's inside a section or topic "Features".

You can also pass numbers to scroll relative to the current topic. For example, DocsJS.scroll( 3 ); will scroll three topics down and DocsJS.scroll( -1 ); will scroll one topic up. DocsJS.scroll( 0 ); will align the current topic to the top of the screen. DocsJS.scroll( NaN ); doesn't do anything now, but might later. DocsJS.scroll( Infinity ); will scroll to the last topic/header and DocsJS.scroll( -Infinity ); will scroll to the first topic/header.

However, scrolling to the first topic isn't the same thing as scrolling to the top of the page (You can't see Accessibility mode and the navbar from the first topic). Calling DocsJS.scroll( true ); will scroll to the top of the page and DocsJS.scroll( false ); will scroll to the bottom of the page.

How do I make buttons? You can just use the onclick attribute on a div/p/button etc. For example, is <button onclick="DocsJS.scroll('Sidebars')">sidebars</button>

The menu is available in two spots for mobile compatibility: a sidebar menu is more efficient, but a mobile device doesn't have space for one. The menu contains 6 reading options. The first two increase or decrease the font size, the next two will minimize or maximize everything, the next will invert the doc's colors, and the last one will reset everything (kinda like reloading the page).

The names on the menu come from the <t-l> tags and clicking on them will first close the menu, then scroll to the chosen topic/header. You can also click on the small margin to the left of title names to minimize/maximize sections/topics in the menu.

Sidebars

Documentation often contains a menu on the left and examples/code-snippets on the right. This makes the documentation appear cleaner, shorter, and easier to read. However, this doesn't work on mobile devices and its formatting can be difficult. DocsJS' solution: the <e-g> () and <e-x> () tags.

By default, content in these tags are enclosed in an expandable container, preserving a short and clean look. If the reader's screen is large enough, they can move these tags to a sidebar. Clicking on a sidebar will move all <e-g>s to the sidebar while cliking will move <e-x>s. Sidebars can be closed or adjusted at the bar at the top of the sidebars.

Try moving this example to the right sidebar! Then, move it back.

Why two tags? Two reasons: there are two sidebars so the user can drag both e-x and e-g to the sides (the option to drag a tag to the left will appear after opening the right sidebar) and documentation generally contains examples and extra details. Why the shapes and ? They're both built off of the caret symbol which is naturally associated with open/closable drawers. The example symbol () looks like a backwards E while the more symbol () contains dots associated with more details.

Browser support

Wide browser support is important for documentation so DocsJS places huge emphasis on compatibility. DocsJS has been tested with

on browsers all the way back to IE8+ (Windows XP!), FF11+, Chrome15+, Yandex, and more. DocsJS is fully compatible with all the aforementioned browsers and you can see photo evidence below.

Click to load screenshots

As you may have seen in the photo evidence, DocsJS is also fully compatible with many old and all new mobile devices. In fact, DocsJS was designed around allowing equal, but optimized access to docs on all screen sizes. Try resizing this doc by holding the – sign below.

–100% +

Simulated window width displayed here.

Accessibility

Much of modern documentation can be extremely annoying to access for people with poor internet connection, people with disabilities, etc. This is quite unfortunate as there is a lot of valuable information in those docs. Therefore, one of DocsJS' main focuses is to provide amazing access to everyone. Below, I describe the methods DocsJS use to increase accessibility. If you have any ways to improve the accessibility of DocsJS, please open an issue on Github.

When the page is loaded, every custom tag is converted to a div. Pressing enter or space on any DocsJS-clickable-button will trigger a click on that element. <e-g> and <e-x> divs are then given a tab order of 0 to ensure the doc can be accessed with a keyboard only.

<t-l> tags content is then wrapped inside <h1> - <h6> tags to match the doc's structure. <s-c> divs are then given the aria-labeledby tag set equal to an id given to that section's header's title. <t-p> divs are labeledby their titles's given id. All <s-c> divs are wrapped inside a <main role="main"> tag and a menu on the left sidebar will be wrapped with a <nav role="nav"> tag. DocsJS buttons are given the tag role="button" and other DocsJS elements are given appropriate roles. Other aria- tags are used when appropriate. This is to allow screen-readers to interpret the doc's structure correctly. The menu also contains options to increase/decrease font-size, invert the doc's colors, and expand all <e-g> and <e-x> divs.

There are some cases where these standards may not be enough. In these cases, the reader should click the "Accessibility Mode" button located at the top of every doc. This button is placed where readers may find "skip nav" buttons on other accessibility-friendly sites. Upon clicking, the doc's font size will be increased by two points for increased readbility, the left sidebar will double in size and display the menu for easy navigation, all <e-g> and <e-x> tags will be expanded to remove the necessity of clicking, and the right sidebar along with the menu/minimize buttons will be removed as they may be distracting to people with severe focus disabilities (clicking topics, headers, e-x and e-g will also be disabled).

If this not enough, the reader can then click the next tabbable "Extended Accessibility Mode" button which replaces the previous "Accessibility Mode" button. Upon clicking, all DocsJS elements are removed and the entire doc is replaced by simple HTML document containing <h1> - <h6> tags to match the structure. This is close to plain text so the reader will have to rely on external software such as screen-readers to interpret the doc.

Customizable

Almost everything, from the buttons to the theme, is easily customizable. You can make some easy customizations and preview them right on this doc in the section below. If the options below aren't enough, you can check out the API Reference.

Customize

Any changes you make here will be reflected on this page itself realtime. Here, you can choose/create a theme, change some default settings, and choose what packages to include. At the end, you'll see a few lines you can copy paste to transfer these settings to your own doc!

CSS themes

Choose your DocsJS theme.

ApplyReset Choose your Ace (<c-d>) theme. Make sure you remove the styles under /* c-d (Cloud9 Ace) styles */ above to get an accurate preview.

We'd love to see any cool themes you've made. If you'd like to share, email your theme to [email protected]

HTML options

Using markdown?
Left sidebar:
Right sidebar:

Javascript options

Font size: px
Max width: px
Minimum width: px
Animation duration: ms

Menu top text:
Menu bottom text:

Default c-d editable:
Default e-g name:
Default e-x name:
Default e-g state (no live preview):
Default e-x state (no live preview):

Included packages

Ace @ <c-d> ··· </c-d> @ 97 KB
MathJax @ \[ ··· \] & \( ··· \) @ 80 KB

Result

Add this to the head
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/docs.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/src/themes/Hailaxian.min.css" rel="stylesheet" id="DocsJS-theme"> and this to the body. You can edit the value of sidebars to suit your needs.

<docs-js sidebars="choice choice">  </docs-js> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/src/ace/ace.js"></script> <script> DocsJS.init(); </script>

API Reference

You'll find DocsJS' Javascript & HTML API, CSS themeing guidelines, and a quick refresher on how DocsJS' HTML structure works here.

HTML

Here's an example of a basic doc structure: <docs-js sidebars="menu e-g"> <v-r varName> <p>Varible Content</p> </v-r> <s-c> <h-d> <t-l>Sample header</t-l> <t-x><v-r varName></v-r></t-x> </h-d> <t-p> <t-l>Sample topic</t-l> <t-x> <c-d docsjs-lang="javascript">alert('hello world');</c-d> </t-x> <e-g>Here's an example of how this topic will change your life.</e-g> <e-x>You won't believe what extra details this contains next.</e-x> </t-p> </s-c> </docs-js> Below are the recognized docsjs attributes like docjs-state. These attributes work like any data- tag and help control structure. All defaults can be changed through javascript.

sidebars

Allowed values (choose two, separate by a space): choice, none, menu, e-g, e-x
Allowed on tag: <docs-js>
Default: choice choice

choice lets the reader choose, none hides the sidebar, menu spawns a menu, and e-g/e-x will move their respective tags to the sidebar.

none menu will hide the left sidebar and spawn a menu on the right. menu e-g will spawn a menu on the left and move examples to the right sidebar.

mode

Allowed value: markdown
Allowed on tag: <docs-js>

If you add this attribute to the <docs-js> tag and set it equal to markdown, DocsJS will assume everything inside the <docs-js> tag is markdown and convert it to DocsJS custom tags. Then, the converted HTML will be logged in the console.

docsjs-state

Allowed values: min, max
Allowed on tags: <s-c>, <h-d>, <t-p>, <e-g>, <e-x>
Defaults: min on <e-g>, <e-x>; max on <s-c>, <h-d>, and <t-p>

The value min will make the section, topic, or example/extraneous minimized initially while max will maximize it initially. This value will change if the user (un)minimizes the tag. If you want to toggle this attribute after the doc has finished loading, do so through javascript with DocsJS.toggle().

<docs-js> <s-c docsjs-state="min"> <h-d> <t-l>Sample header</t-l> <t-x>This section (not header) will be minimized initially. This header will be maximized since that's the default. However, a docjs-state="min" can minimize this header.</t-x> </h-d> <t-p docsjs-state="min"> <t-l>Sample topic</t-l> <t-x>This topic will be minimized initially.</t-x> <e-g>This will be minimized since that's the default.</e-g> <e-x docsjs-state="max">This will be maximized initially.</e-x> </t-p> </s-c> </docs-js>

In this doc, the topic you're currently on will be bolded in the menu. The current topic title (docsjs-tag="menu-title") will be automatically given the attribute docsjs-state="youarehere" while others simply will not have that attribute.

docsjs-name

Allowed value type: HTML Content
Allowed on tags: <e-g>, <e-x>
Defaults: Example on <e-g>; More on <e-x>

This value will be the displayed as the title for your ex or eg. It can be plain text or HTML for a more fancy title. If you have changed this attribute after the doc has finished loading, please call DocsJS.refresh() to apply your changes.

<t-p> <t-l>Sample topic</t-l> <t-x>Sample text.</t-x> <e-g docsjs-name="Usage">This will be given the name "Usage".</e-g> <e-x docsjs-name="<p style='color:#FF0000'>Wow!</p>">This will be given the name "Wow!" in red.</e-x> </t-p>

docsjs-lang

Add this tag to any <c-d> tag you want syntax highlighted. Set it to the language you want it highlighted for. For example <c-d docsjs-lang="html"> will be syntax highlighted for HTML.

docsjs-editable

Add this tag and set it to true to any <c-d> tag you to be editable and vice versa. The default is controlled by DocsJS.cd.editable. For example, <c-d docsjs-lang="javascript" docsjs-editable="true"> will be editable and <c-d docsjs-lang="javascript" docsjs-editable="false"> will not

docsjs-tag

This is used for CSS styling. You must wrap all DocsJS tags inside <docs-js>. If you have changed this attribute after the doc has finished loading, please call DocsJS.refresh() to apply your changes.

This tag has other values used internally by DocsJS and can be styled by you. Unless you know what you're doing, adding a div with these docsjs-tag values will screw up your doc. You can find those values and their purpose under "More tags" in the CSS reference.

docsjs-internal

DocsJS uses many internal tags. Unless you know what you're doing, changing these tags will really screw up your doc. They are: docsjs-extras, docsjs-extra, docsjs-side, docsjs-location, docsjs-pref, docsjs-menu-location, docsjs-menu-destination, docjs-internal.

CSS

If you know CSS well, you'll already know how to style the doc. However, here a few things you should know before you start customizing your own theme.

Selectors

To style DocsJS, you'll need to use attribute selectors like [docsjs-tag="button-minimize"]. You can also style with [docsjs-state="min, max, or youarehere"]. Some other useful selectors to know are the psuedo-classes :first-child and :hover, > (selects immediate children only), + (selects the next sibling), and a regular space which selects all children. The example below shows how you can style sections nested in topics, but the best way to pick up styling is to edit the theme under Customize: t-p > s-c{ border-bottom: solid 1em #FFF; margin-top: 0; }

Here are a few snippets from the default theme: t-l{ position: relative; background-color: #E0E0E0; background-color: rgba(255,255,255,0.8); padding: 0.83333333em; padding-right: 3em; font-size: 1.2em; cursor: pointer; } t-l + div, div[docsjs-tag="menu"] + div{ border-top: none !important; } t-x{ border-top: #E0E0E0 solid 1px; } t-x,e-g,e-x{ position: relative; background-color: #FFF; padding: 1em; overflow: hidden; } div[docsjs-tag="button-minimize"],div[docsjs-tag="button-menu"]{ position: absolute; font-size: 1.6em; height: 1em; width: 1em; border: solid 0.4em transparent; left: 0; right: 0; margin-left: auto; margin-right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; cursor: pointer; } div[docsjs-tag="button-menu"]{ opacity: 0; -o-transition: opacity 300ms; -ms-transition: opacity 300ms; -moz-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; }

More tags

You may have noticed that the short two letter tags are not the only values for docsjs-tag. Below, you'll find other values for that attribute that you can style with. Select them like [docsjs-tag="ebefore"]. If you're ever confused on what has each tag, just enter inspect element.

ebefore

: div added before each eg and ex which the user can click on to expand or minimize the eg/ex.

column-left, column-right

: parent div for the left and right sidebars;

column-content

: parent div for eg/ex content in sidebars;

column-filler

: div to fill in gaps between column-content, initial column background, and menu sidebar background;

column-header

: top of header where user can resize or close the sidebar.

: parent div for menus;

menu-preferences

: parent div for menu preferences;

menu-preferences-item

: clickable preference buttons;

menu-title

: name of section or topic;

menu-item

: parent div a group of menu-titles.

button-menu

: clickable parent div for (un)minimizing menus;

button-minimize

: clickable parent div for (un)minimizing sections;

button-ebefore

: parent div shown on ebefore;

button-parent

: parent div of all buttons;

button-child

: child elements of buttons that determine how the button looks like.

Important

While DocsJS tries to give you as much freedom as possible for stylying your doc, there are some requirements for your theme:

DocsJS only supports em units. If you want to adjust the font-size after your doc has loaded, you must do so through javascript with DocsJS.fontsize.set(). Occassionally using other units is fine, but DocsJS can't guarntee that they will scale properly.

Padding works well with DocsJS, especially padding-top in tx, eg, and ex. Not only does proper padding make docs easier to read, many DocsJS animations will take padding into account and will be able to create slightly parralax-like effects. Finally, I suggest using a line-height greater than 1em to improve readability. The default theme uses a line-height of 1.4em.

You must provide styles for the sidebars and menu. The position of sidebars with change automatically between fixed and absolute. I strongly recommend having an indicator of what menu topic the user is currently on with docsjs-state="youarehere" and indiciating where the user is hovering on the menu.

You can play around with how buttons like the minimize and menu buttons are styled. These are controlled by [docsjs="button-parent, button-child"]. If you want a very different type of button look, you may do so through javascript with DocsJS.buttons. However, please try to make the button look similar for consistency and accessibility reasons.

Finally, be creative with your theme! Use easy to read colors and enough contrast so anyone can read your doc. Have fun and I'm sure your theme will look amazing.

Javascript

DocsJS exposes a javascript object called DocsJS. You can customize everything else through this object or even expand on DocsJS to provide a more unique experince. Below are the varibles and functions that you can call through the DocsJS object.

Callables

These are functions that can be called.

DocsJS.init()

Parameters

DocsJS.init( Callback );

Where

Callback is a function that is executed when DocsJS has finished initializing.

After your <docs-js> DOM is ready and the DocsJS script has loaded, call DocsJS.init() to initialize DocsJS. This can be as simple as placing the following below your superparent div. <script src="docs.js"></script> <script>DocsJS.init();</script> DocsJS.init() adds menus and sidebars, creates binds for events like sidebar drags and hashchange, and calls DocsJS.refresh().

DocsJS.refresh()

Parameters

DocsJS.refresh( Callback );

Where

Callback is a function that is executed when DocsJS has been refreshed.

As its name implies, DocsJS.refresh() refreshes the doc. It will handle varibles, convert custom tags to divs and format them, and generate/update the menu.

DocsJS.toggle()

Parameters

DocsJS.toggle( Element, Target? );

Where

Element is the HTML Node of a topic, section, or eg/ex.
Target is a string that is either 'min' or 'max'.

If no target is given, DocsJS.toggle() will toggle the state of the given element. E.g. if the element is minimized, DocsJS.toggle() will maximize it and vice versa.

If a target is given, DocsJS.toggle() will only set the state of the element to the target. E.g. if the target is 'min' and the element is maximized, DocsJS.toggle() will minimize the element. However, if the target is 'min' and the element is already minimized, DocsJS.toggle() won't do anything.

DocsJS.fontsize.set()

Parameters

DocsJS.fontsize.set( Value );

Where

Value is a number.

Sets the fontsize of the doc to the given value in pixels. You must change font-size through this, not through CSS.

DocsJS.cd.getEditor()

Parameters

DocsJS.cd.getEditor( Element );

Where

Element is the HTML Node of a c-d.

This function will return the Ace editor object of the c-d passed as Element. What can you do with the editor object? Find basic usage here and advanced usage here.

The following will console.log the text content of a c-d with id "editor2". var el = document.getElementById('editor2'); var editor = DocsJS.cd.getEditor(el); var text = editor.getValue(); console.log(text);

DocsJS.cd.refresh()

Parameters

Callback

Refreshes all c-d elements. Calls Callback, then DocsJS.events.cdRefreshed() when done.

DocsJS.cd.resize()

Parameters

Callback

Resizes all c-d elements. This is called automatically by DocsJS.cd.refresh(). Calls Callback, then DocsJS.events.cdResized() when done.

DocsJS.apply()

Parameters

DocsJS.apply( AppliedFunction );

Where

AppliedFunction is a function that accepts two parameters.

Runs the following code: var docs = document.getElementsByTagName('docs-js'); for (var i = 0; i < docs.length; i++){ AppliedFunction(docs[i], i); } It essentially runs the given function for every DocsJS div to make handling multiple docs easier.

DocsJS.scrolled()

Parameters

None

Executed automatically when the user scrolls and on certain events like minimizing a topic. Should be called if DocsJS elements are moved. This moves the visible menu button and updates the current location in the menu.

DocsJS.resized()

Parameters

None

Executed automatically when the user resizes the window. This adjusts the size of the sidebars. Calls DocsJS.scrolled().

DocsJS.animate()

Parameters

DocsJS.animate( Arguments );

Where

Arguments is an object that contains required properties: to, from, duration, step and optional properties: easing, pass, callback.

Where

Arguments.to and Arguments.from are numbers.
Arguments.duration is a number to describe time in miliseconds.
Arguments.step is a function that accepts one numerical argument.
Arguments.easing is a function to manipulate numbers between 0 and 1. Easing functions given in DocsJS.easings are typically used.
Arguments.pass is anything. Pass can be used to clean up code or preserve 'this'. Make pass an array to pass multiple varibles.
Arguments.callback is a function called when the animation is complete.

Super lightweight animator. Animations will run at the highest frame rate possible with a max frame rate of 1000FPS. It will transition the number given as .from to .to and pass the number to .step (one .step execution is one frame). The animation can be eased with the given .easing function and will pass the .pass varible to .step as the second parameter and .callback as the only parameter.

The following will animate the width of this's adjacent sibling from 100% to 0% in 350 miliseconds, then setting the element's display style to "none". The animation will run on easeOutQuart easing. DocsJS.animate({ from: 100, to: 0, duration: 350, easing: DocsJS.easings.easeOutQuart, pass: this.nextElementSibling, step: function(now, pass){ pass.style.width = now + '%'; }, callback: function(pass){ pass.style.display = 'none'; }, });

DocsJS.scroll()

Parameters

DocsJS.scroll( Target );

Where

Target is an String, Array, Number, or Boolean.

DocsJS.scroll( 'Callables' ); // Scrolls to the first topic/header named Callables. DocsJS.scroll( ['Javascript','Callables'] ); // Scrolls to the first topic/header named Callables that's inside a topic/section named Javascript. DocsJS.scroll( [0,5,2] ); // Scrolls to the 3rd topic inside the 6th section inside the 1st docs-js tag DocsJS.scroll( 3 ); // Scrolls 3 topics down DocsJS.scroll( -1 ); // Scrolls 1 topics up DocsJS.scroll( 0 ); // Aligns current topic to the top of the screen DocsJS.scroll( Infinity ); // Scrolls to the last topic DocsJS.scroll( -Infinity ); // Scrolls to the first topic DocsJS.scroll( true ); // Scrolls to the top DocsJS.scroll( false ); // Scrolls to the bottom

DocsJS.rotate()

Parameters

DocsJS.rotate( Element, Angle );

Where

Element is a HTML Node.
Angle is a Number describing an angle in degrees.

Cross-browser CSS rotates the given element to the given angle by using the styles: WebkitTransform, msTransform, transform, filter, msFilter.

DocsJS.addEvent()

Parameters

DocsJS.addEvent( Element, Event, Function, Options? );

Where

Element is a HTML Node.
Event is a string describing an HTML event (without the prefix, on).
Function is a function.
Options is an object.

Cross-browser implementation of addEventListener. It binds the given event to the given element to execute the given function. The options object will be added to supported browsers and can contain options like passive: true.

The following will alert the user "Hello World" when an element with the id "button" is pressed. DocsJS.addEvent(document.getElementById('button'),'mousedown',function(){ alert('Hello World'); },{ passive:true });

DocsJS.removeEvent()

Parameters

DocsJS.removeEvent( Element, Event, Function, Options? );

Where

Element is a HTML Node.
Event is a string describing an HTML event (without the prefix, on).
Function is a function.
Options is an object.

Removes an event added with DocsJS.addEvent() with the given parameters.

DocsJS.getStyle()

Parameters

DocsJS.getStyle( Element, Property );

Where

Element is a HTML Node.
Property is a string describing a CSS property.

Cross-browser method for getting the current property of an element.

Settables

These are javascript properties that can be set

DocsJS.events

This object contains functions that are fired on certain DocsJS actions. By default they do nothing, but you can redefine these functions as you like, for example: DocsJS.events.menuToggle = function(el){ var rand = function(){return Math.round(Math.random()*255)}; el.style.backgroundColor = 'rgba('+rand()+','+rand()+','+rand()+',1)'; } will change the background color of the menu that was just opened to a random color.

.ready()

Parameters

None

This function is called when DocsJS has finished intializing. This is fired after the callback of DocsJS.init().

.sectionToggle()

Parameters

DocsJS.events.sectionToggle( Section )

Where

Section is a HTML Node.

This function is called when a section has been minimized or maximized. The function is passed the HTML node of that section.

.topicToggle()

Parameters

DocsJS.events.topicToggle( Topic )

Where

Topic is a HTML Node.

This function is called when a topic has been minimized or maximized. The function is passed the HTML node of that topic.

.menuToggle()

Parameters

DocsJS.events.menuToggle( Menu )

Where

Menu is a HTML Node.

This function is called when a menu has been opened or closed. The function is passed the HTML node of that menu.

.eToggle()

Parameters

DocsJS.events.eToggle( ExEg )

Where

ExEg is a HTML Node.

This function is called when an ex or eg has been minimized or maximized. The function is passed the HTML node of that eg or ex.

.cdRefreshed()

Parameters

None

Called when c-d elements have been refreshed. This is called every time a sidebar has been activated or put away.

.cdResized()

Parameters

None

Called when c-d elements have been resized. Also called before cdRefresh();

.preferenceChanged()

Parameters

DocsJS.events.preferenceChanged( Preference )

Where

Preference is a string that is one of the following: 'Fontsize up', 'Fontisze down', 'Minimize all', 'Minimize half', 'Minimize none', 'Invert colors', 'Lightning', 'Reset'.

This function is called when a preference been changed by the user. The function is passed the name of the changed preference.

.scroll()

Parameters

DocsJS.events.scroll( Location )

Where

Location is a string.

This function is called when DocsJS.scroll() is called. It is passed the exact parameter that was passed to DocsJS.scroll().

DocsJS.buttons

All buttons used in DocsJS are made of just HTML and CSS stored in this property. You can customize buttons and their animations by changing the values of the properties here. If you want to use an image as a button, simply use a <img> tag. I would recommend images size 256x256 to ensure clarity on high-def screens.

Animatable buttons

The buttons below contain .html() and .animation() properties. .html() simply returns the HTML string for the button. .animation() is a function called when the button has been pressed. It's passed two parameters, button and now. button is the HTML node of the button pressed and now is a number describing the progress of the animation, between 1 and 0. .animation() will be called as much as possible for DocsJS.animation.duration miliseconds. now will progress from 0 to 1 in the foward animation and 1 to 0 in the reverse animation.

DocsJS.buttons.minimize.html = function(){ 'use strict'; return '<div docsjs-tag="button-parent"><div style="position: absolute; height: 100%; width: 100%; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997, M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997, SizingMethod='auto expand')'"+';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997,M12=0.8660254037844388,M21=-0.8660254037844388,M22=0.4999999999999997,SizingMethod='+"'auto expand'"+');-o-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);transform: rotate(-60deg);"><div style="position: absolute; width: 100%; height: 50%; overflow: hidden;"><div docsjs-tag="button-child" style="background-color: transparent; width: 100%; height: 200%; border-radius: 10000000px; top: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc);"></div></div></div><div style="position: absolute; width: 100%; height: 50%; top: 50%; overflow: hidden;"><div docsjs-tag="button-child" style="background-color: transparent; width: 100%; height: 200%; border-radius: 10000000px; top: -100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*behavior: url(https://raw.github.com/Schepp/box-sizing-polyfill/master/boxsizing.htc);"></div></div></div>'; }

DocsJS.buttons.minimize.animation = function(button, now){ 'use strict'; DocsJS.rotate(button.firstChild, (1-now)*60 - 60); DocsJS.rotate(button, (1-now)*60); }

.minimize.

This button is by default the circular buttons shown on the right of h-d titles. Clicking on this button will cause the header's section and the header itself to minimize. The default animation opens/closes the circle.

.menu.

This button is by default the equals-sign shaped button at the right of t-p titles. Clicking on this will open/close the menu at the top of that topic. The default animations rotates the two bars into a cross shape.

.ex.

This button is shown to the left of e-x names. Clicking on this will reveal/close the e-x. The default animation rotates this 90 degrees.

.eg.

This button is shown to the left of e-g names. Clicking on this will reveal/close the e-g. The default animation rotates this 90 degrees.

Simple buttons

The below do not animate. They are simply functions that return HTML strings.

DocsJS.buttons.close = function(){ 'use strict'; return '<div docsjs-tag="button-parent"><div docsjs-tag="button-child" style="height: 100%; border: none; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand'"+');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);"></div><div docsjs-tag="button-child" style="width: 100%; border: none; -ms-filter: '+"'progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477, M22=0.7071067811865474,SizingMethod='auto expand')';filter: progid:DXImageTransform.Micrxosoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand'"+');-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);"></div></div>'; }

.close()

This button is shown as the button that closes the sidebars.

.ewdrag()

This button is shown as the button that resizes the sidebars.

.fontplus()

This button is shown in the group of preferences at the top of the menu. Clicking on this will increase the doc's fontsize.

.fontminus()

This button is shown in the group of preferences at the top of the menu. Clicking on this will decrease the doc's fontsize.

.menuminimize()

This button is shown in the group of preferences at the top of the menu. Clicking on this will expand all topics, sections, menus, e-x, and e-g.

.partialminimize()

This button is shown in the group of preferences at the top of the menu. Clicking on this will expand all topics and sections, then minimize all menus, e-x, and e-g.

.menuminimized()

This button is shown in the group of preferences at the top of the menu. Clicking on this will minimize all topics, sections, menus, e-x, and e-g.

.invert()

This button is shown in the group of preferences at the top of the menu. Clicking on this will apply/remove the CSS property "filter: invert(100%)" to the superparent and docsjs-tag="bg" div. This essentially inverts everthing except the background.

.gpu()

This button is shown in the group of preferences at the top of the menu. Clicking on this will set DocsJS.animation.duration to 0 (clicking again will restore the original value) and remove/restore all filters from the superparent (no hardware acceleration).

.reset()

This button is shown in the group of preferences at the top of the menu. Clicking on this will reset the doc.

DocsJS.cd

Contains settings on how c-d is displayed. c-d uses Cloud9's Ace code editor, so all options will be taken from their API.

.theme

Type

String

Default

monokai

This determines the theme for c-d. You can preview them at CSS themes.

ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, gob, gruvbox, idle_fingers, iplastic, katzenmilch, kr_theme, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, sqlserver, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, vibrant_ink, xcode

.tabSize

Type

Number

Default

Determines how wide a tab is in spaces.

.editable

Type

Boolean

Default

false

Default editablilty of c-d. If set to true, c-d will be editable by default and vice versa.

.scriptLoaded

Type

Boolean

Default

false

Set to true if and when DocsJS has finished loading ace.js.

.options()

Parameters

DocsJS.cd.options( Editor, Editable )

Where

Editor is a Ace object.
Editable is a boolean.

This function is called for each c-d element. The function will be passed true for Editable if that c-d is editable and vice versa. It will be passed the ace editor object. You can see some basic usage for the editor object here under "Common Operations". Full Ace API is here.

DocsJS.width

Contains the maximum and minimum widths of the doc in px.

.max

Type

Number

Default

1280

If the screen is wider than this width, the extra space will be filled in by sidebars.

.min

Type

Number

Default

340

If the screen is smaller than this width, DocsJS will decrease the fontsize by a logarithmic scale. As the screen width approaches this number, the sidebars will shrink and eventually dissapear.

DocsJS.menu

Contains settings on how the menu is displayed.

.top

Type

String

Default

Jump to top

This text is shown at the top of the menu. If the user clicks on this, the user will be sent to the top of the page.

.bottom

Type

String

Default

Jump to bottom

This text is shown at the bottom of the menu. If the user clicks on this, the user will be sent to the bottom of the page.

DocsJS.eg

Contains settings on how eg is displayed.

.name

Type

String that describes HTML content.

Default

Example

This is the default name shown on all eg ebefores. (The box that the user can click on to expand and hide the eg). This sets the default for docsjs-name on eg elements.

.default

Type

String which is either 'min' or 'max'.

Default

min

This is the default state of eg elements. If this is set to 'min', eg elements will be minimized by default and vice versa for 'max'.

DocsJS.ex

Contains settings on how ex is displayed.

.name

Type

String that describes HTML content.

Default

Example

This is the default name shown on all ex ebefores. (The box that the user can click on to expand and hide the ex). This sets the default for docsjs-name on ex elements.

.default

Type

String which is either 'min' or 'max'.

Default

min

This is the default state of ex elements. If this is set to 'min', ex elements will be minimized by default and vice versa for 'max'.

DocsJS.animation

Controls settings for DocsJS animations.

.duration

Type

Number that described time in miliseconds

Default

300

This determines the duration for DocsJS animations. Beware of setting the duration too long (over 500) as this can make reading your doc annoying.

DocsJS.easings

Contains easing functions for DocsJS.animate().

Values

DocsJS.easings.linear
DocsJS.easings.easeInQuad
DocsJS.easings.easeOutQuad
DocsJS.easings.easeInOutQuad
DocsJS.easings.easeInCubic
DocsJS.easings.easeOutCubic
DocsJS.easings.easeInOutCubic
DocsJS.easings.easeInQuart
DocsJS.easings.easeOutQuart
DocsJS.easings.easeInOutQuart
DocsJS.easings.easeInQuint
DocsJS.easings.easeOutQuint
DocsJS.easings.easeInOutQuint

easings:{ linear: function (t) { return t }, easeInQuad: function (t) { return t*t }, easeOutQuad: function (t) { return t*(2-t) }, easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, easeInCubic: function (t) { return t*t*t }, easeOutCubic: function (t) { return (--t)*t*t+1 }, easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }, easeInQuart: function (t) { return t*t*t*t }, easeOutQuart: function (t) { return 1-(--t)*t*t*t }, easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t }, easeInQuint: function (t) { return t*t*t*t*t }, easeOutQuint: function (t) { return 1+(--t)*t*t*t*t }, easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t } }

DocsJS.window

DocsJS uses the functions here to retreive the client's browser height and width. This ensures consistent browser sizes on old browsers. You can also set them to return a number to change the doc's width and height as shown in the complete access example

.width()

Type

Function

Default

return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

Returns the width of the browser.

.height()

Type

Function

Default

return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

Returns the height of the browser.

.scrollTop()

Type

Function

Default

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

Returns the scrollTop of the document.

DocsJS.columnOffsets

These values determine the sizes of the sidebars. They are changed when the user resizes the sidebar. Each sidebar is 100px plus the corresponding (.left or .right) columnOffset. The minimum value is -50 so the minimum column width is 50px.

.left

Type

Number

Default

.right

Type

Number

Default