title: Why doesn't turn.js demo work?
body: <p>I can run the <a href="http://jsfiddle.net/blasten/A9a7E/" rel="nofollow">demo</a> script on fiddle as provided by the <a href="http://turnjs.com/docs/Main_Page" rel="nofollow">official documentation</a>. </p>
  
  <p>But when I downloaded the script and opened the demos, it doesn't work on my browser. There are no errors on my console.</p>
  
  <p>I tried running the same script on fiddle in my browser and this time I do get an error. "Uncaught TypeError: Cannot read property 'style' of null              turn.js:184"</p>
  
  <p>I don't quite get it. Here's the code I'm using.</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
          &lt;script type="text/javascript" src="includes/jquery-1.11.0.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="includes/turn.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $("#flipbook").turn({
                  width: 400,
                  height: 300,
                  autoCenter: true
              });
          &lt;/script&gt;
          &lt;style&gt;
              body{
                  overflow:hidden;
              }
  
              #flipbook{
                  width:400px;
                  height:300px;
              }
  
              #flipbook .page{
                  width:400px;
                  height:300px;
                  background-color:white;
                  line-height:300px;
                  font-size:20px;
                  text-align:center;
              }
  
              #flipbook .page-wrapper{
                  -webkit-perspective:2000px;
                  -moz-perspective:2000px;
                  -ms-perspective:2000px;
                  -o-perspective:2000px;
                  perspective:2000px;
              }
  
              #flipbook .hard{
                  background:#ccc !important;
                  color:#333;
                  -webkit-box-shadow:inset 0 0 5px #666;
                  -moz-box-shadow:inset 0 0 5px #666;
                  -o-box-shadow:inset 0 0 5px #666;
                  -ms-box-shadow:inset 0 0 5px #666;
                  box-shadow:inset 0 0 5px #666;
                  font-weight:bold;
              }
  
              #flipbook .odd{
                  background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
                  background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                  background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                  background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                  background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                  background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                  -webkit-box-shadow:inset 0 0 5px #666;
                  -moz-box-shadow:inset 0 0 5px #666;
                  -o-box-shadow:inset 0 0 5px #666;
                  -ms-box-shadow:inset 0 0 5px #666;
                  box-shadow:inset 0 0 5px #666;
  
              }
  
              #flipbook .even{
                  background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
                  background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
                  background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
                  background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
                  background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
                  background-image:linear-gradient(left, #fff 95%, #dadada 100%);
                  -webkit-box-shadow:inset 0 0 5px #666;
                  -moz-box-shadow:inset 0 0 5px #666;
                  -o-box-shadow:inset 0 0 5px #666;
                  -ms-box-shadow:inset 0 0 5px #666;
                  box-shadow:inset 0 0 5px #666;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="flipbook"&gt;
              &lt;div class="hard"&gt; Turn.js &lt;/div&gt; 
              &lt;div class="hard"&gt;&lt;/div&gt;
              &lt;div&gt; Page 1 &lt;/div&gt;
              &lt;div&gt; Page 2 &lt;/div&gt;
              &lt;div&gt; Page 3 &lt;/div&gt;
              &lt;div&gt; Page 4 &lt;/div&gt;
              &lt;div class="hard"&gt;&lt;/div&gt;
              &lt;div class="hard"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>