I can run the demo script on fiddle as provided by the official documentation.
But when I downloaded the script and opened the demos, it doesn't work on my browser. There are no errors on my console.
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"
I don't quite get it. Here's the code I'm using.
<html>
<head>
<script type="text/javascript" src="includes/jquery-1.11.0.js"></script>
<script type="text/javascript" src="includes/turn.js"></script>
<script>
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
<style>
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;
}
</style>
</head>
<body>
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</body>
</html>
I can run the demo script on fiddle as provided by the official documentation.
But when I downloaded the script and opened the demos, it doesn't work on my browser. There are no errors on my console.
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"
I don't quite get it. Here's the code I'm using.
<html>
<head>
<script type="text/javascript" src="includes/jquery-1.11.0.js"></script>
<script type="text/javascript" src="includes/turn.js"></script>
<script>
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
<style>
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;
}
</style>
</head>
<body>
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</body>
</html>
1 Answer
Reset to default 6Because you are reading the element before it is on the page.
Either move the script to the bottom of the body so it is after the element you are referencing or use document ready
$(function(){ //document ready
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
});