joelnewcomer/index.html

## index.html
<html lang="en">
<head>

    <meta charset="utf-8">
    <title>Automatic ToC with Sticky Menu & FlexMenu</title>
    <meta name="description" content="Automatic ToC with Stick Menu & Flex Menu">
    <meta name="author" content="Ian Yates">

    <!--Mobile specific meta goodness :)-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!--css-->
    <link rel="stylesheet" href="auto-toc.css">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="js/modernizr.custom.js"></script>

    <!-- Favicons-->
    <link rel="shortcut icon" href="img/favicon.ico">

</head>
<body id="home">

<div class="wrapper" id="content">

<div class="post-box">

<h3>A Section Title</h3>
<p>You don't know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain't no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly&mdash;Tom's Aunt Polly, she is&mdash;and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before.</p>


<p>Now the way that the book winds up is this:  Tom and me found the money that the robbers hid in the cave, and it made us rich.  We got six thousand dollars apiece—all gold.  It was an awful sight of money when it was piled up.  Well, Judge Thatcher he took it and put it out at interest, and it fetched us a dollar a day apiece all the year round—more than a body could tell what to do with.  The Widow Douglas she took me for her son, and allowed she would sivilize me; but it was rough living in the house all the time, considering how dismal regular and decent the widow was in all her ways; and so when I couldn't stand it no longer I lit out.</p>


<h3>Another Heading</h3>
<p>I got into my old rags and my sugar-hogshead again, and was free and satisfied.  But Tom Sawyer he hunted me up and said he was going to start a band of robbers, and I might join if I would go back to the widow and be respectable.  So I went back.</p>

<p>The widow she cried over me, and called me a poor lost lamb, and she called me a lot of other names, too, but she never meant no harm by it. She put me in them new clothes again, and I couldn't do nothing but sweat and sweat, and feel all cramped up.  Well, then, the old thing commenced again.  The widow rung a bell for supper, and you had to come to time. </p>


<h3>A really, really, really long heading</h3>
<p>When you got to the table you couldn't go right to eating, but you had to wait for the widow to tuck down her head and grumble a little over the victuals, though there warn't really anything the matter with them,—that is, nothing only everything was cooked by itself. In a barrel of odds and ends it is different; things get mixed up, and the juice kind of swaps around, and the things go better.</p>

<p>After supper she got out her book and learned me about Moses and the Bulrushers, and I was in a sweat to find out all about him; but by and by she let it out that Moses had been dead a considerable long time; so then I didn't care no more about him, because I don't take no stock in dead people.</p>


<h3>Chapter IV</h3>
<p>Pretty soon I wanted to smoke, and asked the widow to let me.  But she wouldn't.  She said it was a mean practice and wasn't clean, and I must try to not do it any more.  That is just the way with some people.  They get down on a thing when they don't know nothing about it.  Here she was a-bothering about Moses, which was no kin to her, and no use to anybody, being gone, you see, yet finding a power of fault with me for doing a thing that had some good in it.  And she took snuff, too; of course that was all right, because she done it herself.</p>


<h3>Chapter V</h3>
<p>Her sister, Miss Watson, a tolerable slim old maid, with goggles on, had just come to live with her, and took a set at me now with a spelling-book. She worked me middling hard for about an hour, and then the widow made her ease up.  I couldn't stood it much longer.  Then for an hour it was deadly dull, and I was fidgety.  Miss Watson would say, "Don't put your feet up there, Huckleberry;" and "Don't scrunch up like that, Huckleberry—set up straight;" and pretty soon she would say, "Don't gap and stretch like that, Huckleberry—why don't you try to behave?"</p>


<h3>1914 translation by H. Rackham</h3>
<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm.  All I wanted was to go somewheres; all I wanted was a change, I warn't particular.  She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place.  Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it.  But I never said so, because it would only make trouble, and wouldn't do no good.</p>


<h3>Section 1.10.32</h3>
<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm.  All I wanted was to go somewheres; all I wanted was a change, I warn't particular.  She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place.  Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it.  But I never said so, because it would only make trouble, and wouldn't do no good.</p>


<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>

<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm.  All I wanted was to go somewheres; all I wanted was a change, I warn't particular.  She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place.  Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it.  But I never said so, because it would only make trouble, and wouldn't do no good.</p>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

  p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm.  All I wanted was to go somewheres; all I wanted was a change, I warn't particular.  She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place.  Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it.  But I never said so, because it would only make trouble, and wouldn't do no good.</p>

  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>

  <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

  </div>

 </div>

<script src="http://www.mainstreetwebworx.com/auto-toc/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://www.mainstreetwebworx.com/auto-toc/js/waypoints.min.js" type="text/javascript"></script>
<script src="http://www.mainstreetwebworx.com/auto-toc/js/flexmenu.min.js" type="text/javascript"></script>

</body>
</html>

## script.js
//Find sections (defined by <h3> tags) and wrap with <section> tags and unique IDs.
  var counter = 1;
    $('#content h3').each(function(){
        var $set = $(this);
        var nxt = this.nextSibling;
        while(nxt) {
            if(!$(nxt).is('#content h3')) {
                $set.push(nxt);
                nxt = nxt.nextSibling;
            } else break;
        }
       $set.wrapAll('<section id="chapter-' + counter + '" />');
         counter++;
    });

// Build Table of Contents based on all <h3> tag titles.
var ToC =
  "<div class='nav-container'><nav role='navigation' class='table-of-contents'>" +
    "<h2>On this page:</h2>" +
    "<ul>";

var newLine, el, title, link;
// Reset counter
counter = 1;

$("#content h3").each(function() {
  el = $(this);
  title = el.text();
  link = "#chapter-" + counter;

  newLine =
    "<li>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;
  counter++;

});

ToC +=
   "</ul>" +
  "</nav></div>";

// Add table of contents to top of .post-box div
$(".post-box").prepend(ToC);


// jQuery Waypoints sticky Table of Contents
$(function() {

// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");

var top_spacing = 0;
var waypoint_offset = 50;

nav_container.waypoint({
  handler: function(event, direction) {

  if (direction == 'down') {
    nav_container.css({ 'height':nav.outerHeight() });
 nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({"top":top_spacing});
} else {
nav_container.css({ 'height':'auto' });
nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});
}
},
      offset: function() {
      return -nav.outerHeight()-waypoint_offset;
    }
  });

var sections = $("section");
var navigation_links = $("nav a");

sections.waypoint({
  handler: function(event, direction) {

  var active_section;
  active_section = $(this);
  if (direction === "up") active_section = active_section.prev();

    var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
    navigation_links.removeClass("selected");
    active_link.addClass("selected");

},
offset: '25%'
})

navigation_links.click( function(event) {
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top -0.08*$(window).height()
}, 500);
  return false;
  });
});

//Activate flexMenu
$('.table-of-contents ul').flexMenu({
  cutoff: 1,
  linkTextAll: 'On this page:',
  linkTitleAll: 'On this page:'
});

## style.css
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}


/*base*/

body {
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666;
  padding: 2em 0;
}

p {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 1.5em 0;
}

a {
  color: #40bfe8;
}

a:hover {
  text-decoration: none;
}

h1 {
  font-size: 6em;
  font-weight: bold;
  margin: 0 0 .3em 0;
  color: #40bfe8;
  letter-spacing: -0.07em;
}

h3 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.3em;
  margin: 0 0 .5em 0;
  color: #40bfe8;
  letter-spacing: -0.07em;
}


.table-of-contents {
  background: #eee;
  width: 100%;
}

.table-of-contents h2 {
  font-size: 18px;
  font-weight: bold;
  padding: 4px 10px 10px 10px;
  max-width: 900px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .table-of-contents h2 {
    display: none;
  }
}

.wrapper {
  position: relative;
  width: 900px;
  margin: 0 auto;
  padding: 0;

  background: #ffffff;

  -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* FF3.5 - 3.6 */
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

  -webkit-border-radius: 0 0 1px 1px;
  -moz-border-radius: 0 0 1px 1px;
  border-radius: 0 0 1px 1px;

}

header {
  padding: 2em 2em 0;
}

section {
  padding: 0 2em 1em;
}

footer {
  padding: 1em;
  font-size: 0.9em;
}

.nav-container { margin-bottom: 2em; width:100%; display: block; }

.sticky {
  position: fixed;
  top: 0;
  left: 0;

  animation:thedrop 1s 1;
  -moz-animation:thedrop 1s 1;
  -webkit-animation:thedrop 1s 1;

  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.5);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}

.sticky .nav-above {
  position: absolute;
  left:1em;
  right:1em;
  height:15px;
  background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 80%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

/*media queries*/

/* #Tablet (Portrait) width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   .wrapper {
     width: 700px;
   }

nav {
  width: 728px;
}

}

/* #Mobile (Portrait) width of 320px */

    @media only screen and (max-width: 767px) {
        .wrapper {
          width: 300px;
        }

        h1 {
          font-size: 2.5em;
          text-align: center;
        }

        h3 {
          font-size: 1.3em;
          text-align: center;
        }
   }

 /* Mobile (Landscape) width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .wrapper {
          width: 400px;
        }

        h1 {
          font-size: 3.5em;
        }

        h3 {
          font-size: 1.7em;
  }
}


/* Steps 1 and 2 don't involve CSS. */

/* Step 3: Style the navigation bar... */

.table-of-contents > ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  line-height: 1;
  overflow: hidden;
  max-width: 900px;
}

.table-of-contents > ul li, .table-of-contents > ul a {
  display: block;
  white-space:nowrap;
}

.table-of-contents > ul li {
  list-style-type: none;
}

.table-of-contents > ul > li {
  float: left;
  display: block;
  margin-left: .25em;
}

.table-of-contents > ul > li:first-child {
  margin-left: 0;
}

.table-of-contents > ul a {
  padding: 5px 12px;
  text-decoration: none;
  height: 1em;
  color: #666;
  text-transform: uppercase;
}

.table-of-contents > ul a.selected {
  background: #ccc;
  color: #fff;
  cursor: default;
}

.table-of-contents > ul a:hover {
  background: #ccc;
}


/* Step 4: add a breakpoint */

@media only screen and (max-width: 550px) {
  aside, article {
    width: 95%;
    float: none;
  }

  article {
    margin-right: 0;
    margin-bottom: 1em;
  }
}

/* Step 5: set a fixed height */

.js .table-of-contents > ul {
  height: 23px;
}

/* Step 6 is JavaScript */

/* Step 7 - style flexMenu */

.flexMenu-popup {
  padding: 0;
  background-color: #666;
  margin: 0;
}

li.flexMenu-viewMore > a, li.flexMenu-viewMore > a:hover {
  background-color: #666;
  color: #fff;
  text-decoration: none !important;
}

ul.flexMenu-popup a {
  color: #fff;
}

.flexMenu-viewMore > a:after {
  display: inline-block;
  content:"";
  border-left:0.3em solid transparent;
  border-right:0.3em solid transparent;
  border-top:0.4em solid white;
  margin-left:0.4em;
  position: relative;
  top: -.1em;
}

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
  background-color: #ccc;
}

.flexMenu-popup > li > a, .flexMenu-popup > li {
  display: block;
}

.flexMenu-popup > li > a:hover {
  background-color: #ccc;
}

/* Step 8 - Adjust for touchscreens */

.touch .navbar {
  font-size: 1.5em;
}

/* Step 9 - Fix cross-browser funkiness */

.lt-ie8 .flexMenu-popup {
  margin-top: -1px
}

.lt-ie8 article {
  width: 600px;
}

.lt-ie8 aside {
  width: 200px;
}

.lt-ie8 body {
  width: 901px;
}
	<html lang="en">
	<head>

	<meta charset="utf-8">
	<title>Automatic ToC with Sticky Menu & FlexMenu</title>
	<meta name="description" content="Automatic ToC with Stick Menu & Flex Menu">
	<meta name="author" content="Ian Yates">

	<!--Mobile specific meta goodness :)-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--css-->
	<link rel="stylesheet" href="auto-toc.css">

	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src="js/modernizr.custom.js"></script>

	<!-- Favicons-->
	<link rel="shortcut icon" href="img/favicon.ico">

	</head>
	<body id="home">

	<div class="wrapper" id="content">

	<div class="post-box">

	<h3>A Section Title</h3>
	<p>You don't know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain't no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly—Tom's Aunt Polly, she is—and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before.</p>



	<p>Now the way that the book winds up is this: Tom and me found the money that the robbers hid in the cave, and it made us rich. We got six thousand dollars apiece—all gold. It was an awful sight of money when it was piled up. Well, Judge Thatcher he took it and put it out at interest, and it fetched us a dollar a day apiece all the year round—more than a body could tell what to do with. The Widow Douglas she took me for her son, and allowed she would sivilize me; but it was rough living in the house all the time, considering how dismal regular and decent the widow was in all her ways; and so when I couldn't stand it no longer I lit out.</p>




	<h3>Another Heading</h3>
	<p>I got into my old rags and my sugar-hogshead again, and was free and satisfied. But Tom Sawyer he hunted me up and said he was going to start a band of robbers, and I might join if I would go back to the widow and be respectable. So I went back.</p>

	<p>The widow she cried over me, and called me a poor lost lamb, and she called me a lot of other names, too, but she never meant no harm by it. She put me in them new clothes again, and I couldn't do nothing but sweat and sweat, and feel all cramped up. Well, then, the old thing commenced again. The widow rung a bell for supper, and you had to come to time. </p>



	<h3>A really, really, really long heading</h3>
	<p>When you got to the table you couldn't go right to eating, but you had to wait for the widow to tuck down her head and grumble a little over the victuals, though there warn't really anything the matter with them,—that is, nothing only everything was cooked by itself. In a barrel of odds and ends it is different; things get mixed up, and the juice kind of swaps around, and the things go better.</p>

	<p>After supper she got out her book and learned me about Moses and the Bulrushers, and I was in a sweat to find out all about him; but by and by she let it out that Moses had been dead a considerable long time; so then I didn't care no more about him, because I don't take no stock in dead people.</p>


	<h3>Chapter IV</h3>
	<p>Pretty soon I wanted to smoke, and asked the widow to let me. But she wouldn't. She said it was a mean practice and wasn't clean, and I must try to not do it any more. That is just the way with some people. They get down on a thing when they don't know nothing about it. Here she was a-bothering about Moses, which was no kin to her, and no use to anybody, being gone, you see, yet finding a power of fault with me for doing a thing that had some good in it. And she took snuff, too; of course that was all right, because she done it herself.</p>



	<h3>Chapter V</h3>
	<p>Her sister, Miss Watson, a tolerable slim old maid, with goggles on, had just come to live with her, and took a set at me now with a spelling-book. She worked me middling hard for about an hour, and then the widow made her ease up. I couldn't stood it much longer. Then for an hour it was deadly dull, and I was fidgety. Miss Watson would say, "Don't put your feet up there, Huckleberry;" and "Don't scrunch up like that, Huckleberry—set up straight;" and pretty soon she would say, "Don't gap and stretch like that, Huckleberry—why don't you try to behave?"</p>


	<h3>1914 translation by H. Rackham</h3>
	<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm. All I wanted was to go somewheres; all I wanted was a change, I warn't particular. She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place. Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it. But I never said so, because it would only make trouble, and wouldn't do no good.</p>



	<h3>Section 1.10.32</h3>
	<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm. All I wanted was to go somewheres; all I wanted was a change, I warn't particular. She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place. Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it. But I never said so, because it would only make trouble, and wouldn't do no good.</p>


	<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>

	<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

	<p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm. All I wanted was to go somewheres; all I wanted was a change, I warn't particular. She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place. Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it. But I never said so, because it would only make trouble, and wouldn't do no good.</p>
	<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>
	<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

	p>Then she told me all about the bad place, and I said I wished I was there. She got mad then, but I didn't mean no harm. All I wanted was to go somewheres; all I wanted was a change, I warn't particular. She said it was wicked to say what I said; said she wouldn't say it for the whole world; she was going to live so as to go to the good place. Well, I couldn't see no advantage in going where she was going, so I made up my mind I wouldn't try for it. But I never said so, because it would only make trouble, and wouldn't do no good.</p>

	<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>

	<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

	</div>

	</div>

	<script src="http://www.mainstreetwebworx.com/auto-toc/js/jquery-1.6.4.min.js" type="text/javascript"></script>
	<script src="http://www.mainstreetwebworx.com/auto-toc/js/waypoints.min.js" type="text/javascript"></script>
	<script src="http://www.mainstreetwebworx.com/auto-toc/js/flexmenu.min.js" type="text/javascript"></script>

	</body>
	</html>
	//Find sections (defined by <h3> tags) and wrap with <section> tags and unique IDs.
	var counter = 1;
	$('#content h3').each(function(){
	var $set = $(this);
	var nxt = this.nextSibling;
	while(nxt) {
	if(!$(nxt).is('#content h3')) {
	$set.push(nxt);
	nxt = nxt.nextSibling;
	} else break;
	}
	$set.wrapAll('<section id="chapter-' + counter + '" />');
	counter++;
	});

	// Build Table of Contents based on all <h3> tag titles.
	var ToC =
	"<div class='nav-container'><nav role='navigation' class='table-of-contents'>" +
	"<h2>On this page:</h2>" +
	"<ul>";

	var newLine, el, title, link;
	// Reset counter
	counter = 1;

	$("#content h3").each(function() {
	el = $(this);
	title = el.text();
	link = "#chapter-" + counter;

	newLine =
	"<li>" +
	"<a href='" + link + "'>" +
	title +
	"</a>" +
	"</li>";

	ToC += newLine;
	counter++;

	});

	ToC +=
	"</ul>" +
	"</nav></div>";

	// Add table of contents to top of .post-box div
	$(".post-box").prepend(ToC);


	// jQuery Waypoints sticky Table of Contents
	$(function() {

	// Do our DOM lookups beforehand
	var nav_container = $(".nav-container");
	var nav = $("nav");

	var top_spacing = 0;
	var waypoint_offset = 50;

	nav_container.waypoint({
	handler: function(event, direction) {

	if (direction == 'down') {
	nav_container.css({ 'height':nav.outerHeight() });
	nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({"top":top_spacing});
	} else {
	nav_container.css({ 'height':'auto' });
	nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});
	}
	},
	offset: function() {
	return -nav.outerHeight()-waypoint_offset;
	}
	});

	var sections = $("section");
	var navigation_links = $("nav a");

	sections.waypoint({
	handler: function(event, direction) {

	var active_section;
	active_section = $(this);
	if (direction === "up") active_section = active_section.prev();

	var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
	navigation_links.removeClass("selected");
	active_link.addClass("selected");

	},
	offset: '25%'
	})

	navigation_links.click( function(event) {
	$('html, body').animate({
	scrollTop: $($(this).attr('href')).offset().top -0.08*$(window).height()
	}, 500);
	return false;
	});
	});

	//Activate flexMenu
	$('.table-of-contents ul').flexMenu({
	cutoff: 1,
	linkTextAll: 'On this page:',
	linkTitleAll: 'On this page:'
	});
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0b1 \| 201101
	NOTE: WORK IN PROGRESS
	USE WITH CAUTION AND TEST WITH ABANDON */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}



	/base/

	body {
	font-size: 13px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #666;
	padding: 2em 0;
	}

	p {
	font-size: 1em;
	line-height: 1.5em;
	margin: 0 0 1.5em 0;
	}

	a {
	color: #40bfe8;
	}

	a:hover {
	text-decoration: none;
	}

	h1 {
	font-size: 6em;
	font-weight: bold;
	margin: 0 0 .3em 0;
	color: #40bfe8;
	letter-spacing: -0.07em;
	}

	h3 {
	font-size: 2em;
	font-weight: bold;
	line-height: 1.3em;
	margin: 0 0 .5em 0;
	color: #40bfe8;
	letter-spacing: -0.07em;
	}


	.table-of-contents {
	background: #eee;
	width: 100%;
	}

	.table-of-contents h2 {
	font-size: 18px;
	font-weight: bold;
	padding: 4px 10px 10px 10px;
	max-width: 900px;
	margin: 0 auto;
	}

	@media only screen and (max-width: 767px) {
	.table-of-contents h2 {
	display: none;
	}
	}

	.wrapper {
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding: 0;

	background: #ffffff;

	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* FF3.5 - 3.6 */
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

	-webkit-border-radius: 0 0 1px 1px;
	-moz-border-radius: 0 0 1px 1px;
	border-radius: 0 0 1px 1px;

	}

	header {
	padding: 2em 2em 0;
	}

	section {
	padding: 0 2em 1em;
	}

	footer {
	padding: 1em;
	font-size: 0.9em;
	}

	.nav-container { margin-bottom: 2em; width:100%; display: block; }

	.sticky {
	position: fixed;
	top: 0;
	left: 0;

	animation:thedrop 1s 1;
	-moz-animation:thedrop 1s 1;
	-webkit-animation:thedrop 1s 1;

	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
	}

	.sticky .nav-above {
	position: absolute;
	left:1em;
	right:1em;
	height:15px;
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 80%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	}

	/media queries/

	/* #Tablet (Portrait) width of 768px */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	.wrapper {
	width: 700px;
	}

	nav {
	width: 728px;
	}

	}

	/* #Mobile (Portrait) width of 320px */

	@media only screen and (max-width: 767px) {
	.wrapper {
	width: 300px;
	}

	h1 {
	font-size: 2.5em;
	text-align: center;
	}

	h3 {
	font-size: 1.3em;
	text-align: center;
	}
	}

	/* Mobile (Landscape) width of 480px */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrapper {
	width: 400px;
	}

	h1 {
	font-size: 3.5em;
	}

	h3 {
	font-size: 1.7em;
	}
	}


	/* Steps 1 and 2 don't involve CSS. */

	/* Step 3: Style the navigation bar... */

	.table-of-contents > ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	line-height: 1;
	overflow: hidden;
	max-width: 900px;
	}

	.table-of-contents > ul li, .table-of-contents > ul a {
	display: block;
	white-space:nowrap;
	}

	.table-of-contents > ul li {
	list-style-type: none;
	}

	.table-of-contents > ul > li {
	float: left;
	display: block;
	margin-left: .25em;
	}

	.table-of-contents > ul > li:first-child {
	margin-left: 0;
	}

	.table-of-contents > ul a {
	padding: 5px 12px;
	text-decoration: none;
	height: 1em;
	color: #666;
	text-transform: uppercase;
	}

	.table-of-contents > ul a.selected {
	background: #ccc;
	color: #fff;
	cursor: default;
	}

	.table-of-contents > ul a:hover {
	background: #ccc;
	}


	/* Step 4: add a breakpoint */

	@media only screen and (max-width: 550px) {
	aside, article {
	width: 95%;
	float: none;
	}

	article {
	margin-right: 0;
	margin-bottom: 1em;
	}
	}

	/* Step 5: set a fixed height */

	.js .table-of-contents > ul {
	height: 23px;
	}

	/* Step 6 is JavaScript */

	/* Step 7 - style flexMenu */

	.flexMenu-popup {
	padding: 0;
	background-color: #666;
	margin: 0;
	}

	li.flexMenu-viewMore > a, li.flexMenu-viewMore > a:hover {
	background-color: #666;
	color: #fff;
	text-decoration: none !important;
	}

	ul.flexMenu-popup a {
	color: #fff;
	}

	.flexMenu-viewMore > a:after {
	display: inline-block;
	content:"";
	border-left:0.3em solid transparent;
	border-right:0.3em solid transparent;
	border-top:0.4em solid white;
	margin-left:0.4em;
	position: relative;
	top: -.1em;
	}

	.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
	background-color: #ccc;
	}

	.flexMenu-popup > li > a, .flexMenu-popup > li {
	display: block;
	}

	.flexMenu-popup > li > a:hover {
	background-color: #ccc;
	}

	/* Step 8 - Adjust for touchscreens */

	.touch .navbar {
	font-size: 1.5em;
	}

	/* Step 9 - Fix cross-browser funkiness */

	.lt-ie8 .flexMenu-popup {
	margin-top: -1px
	}

	.lt-ie8 article {
	width: 600px;
	}

	.lt-ie8 aside {
	width: 200px;
	}

	.lt-ie8 body {
	width: 901px;
	}