Manual.php

1. Introduction

This is the manual page for the website. Most of this page is just explanation for how to use lit and isn't that interesting from a code perspective. However, we have to do a few interesting things to get the navbar to work right.

We're going to use Bootstrap's Affix to pin the navbar to the side when the user scrolls down, and we're going to use Bootstrap's scroll-spy to make the navbar update as the user scrolls down.

In addition, we are not going to hard code the navbar into the page, instead we are going to use javascript to generate it. That way, it's a bit easier for me to write because I don't have to update the navbar every time I add or remove a section.

{manual.php 1}

<!DOCTYPE html>
<html>
    <head>
        <title>Literate Manual</title>

        <!-- Include the standard jquery, bootstrap, and custom css -->
        <?php include 'includes/head.php';?>

        {CSS styling for the navbar, 2}

        {Script to construct the navbar, 3}
        <?php include 'includes/google_analytics.php';?>
    </head>

    <body data-spy="scroll" data-target="#nav-container">
        <div class="container">
            <!-- Include the top navigation bar -->
            <?php include 'includes/navigation.php';?>

            <div class="row">
                <div class="col-sm-10">
                    {The manual itself, 4}
                </div>
            
                <div id="nav-container" class="col-sm-2 hidden-xs">
                    <!-- Empty for now, but javascript will generate the navbar -->
                </div>
            </div>
        </div>
    </body>
</html>

2.

We style the navbar so that it is blue, has circular borders, changes color on hover etc...

{CSS styling for the navbar 2}

<style>
    ul.nav-tabs {
        font-size: 9pt;
        width: 130px;
        margin-top: 15px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li {
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child {
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 2px 12px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */
    }
</style>

Used in section 1

3.

Next we write the script to construct the navbar. The way this works is we go through every <h2> element, get its id and text value and add it to a list of links which is the navbar.

{Script to construct the navbar 3}

<script>
    function constructNavbar() {
        // Create the initial ul element
        html = '<ul class=\"nav navbar sidebar nav-tabs nav-stacked\" id=\"navbar\">\n'
        // Go through each h2
        $('h2').each(function(i, obj) {
            // Add a new list item link to the id of the h2 element
            html += "<li><a href=\"#" + $(obj).attr('id') + "\">" + $(obj).text() + "</a></li>\n"
        });
        // Close the list
        html += "</ul>"
        // Add the HTML
        $('#nav-container').html(html);
    }

    $(document).ready(function() {
        constructNavbar();

        // Call affix on the navbar so it will be pinned when the user scrolls 80 pixels down
        $("#navbar").affix({
            offset: { 
                top: 80 
            }
        });
    });
</script>

Used in section 1

4.

Now we have the actual manual. I'll just include the whole thing here because it's not too interesting when you look at the source code.

{The manual itself 4}

<?php include 'manual_explanation.php'?>

Used in section 1