title: How to implement the nanoScroller so that it works correctly?
body: <p>I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.</p>
  
  <p>Here is my code so that you can see exactly how i have it in the .html file</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Example&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/nanoscroller.css"&gt;
  &lt;script rel="text/javascript" src="js/jquery.nanoscroller.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  /* START NanoSlider */
  .nano { background: #bba; width: 500px; height: 500px; }
  .nano .content { padding: 10px; }
  .nano .pane   { background: #888; }
  .nano .slider { background: #111; }
  /* END NanoSlider */
  &lt;/style&gt;
  &lt;script&gt;
      $(document).ready(function(){
           $(".nano").nanoScroller();
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="about" class="nano"&gt;
      &lt;div class="content"&gt;
           This is the content box and it should be scrolling but it is not!! =/.  
      &lt;/div&gt; 
  &lt;/div&gt;        
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/fcJr3/1/" rel="nofollow">http://jsfiddle.net/fcJr3/1/</a></p>
  
  <p>Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?</p>
  
  <p>As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!</p>
  
  <p>EDIT: this is the nanoSlider here: <a href="http://jamesflorentino.github.io/nanoScrollerJS/" rel="nofollow">http://jamesflorentino.github.io/nanoScrollerJS/</a></p>