CODEWITHSUNDEEP
javascriptjqueryhtmlcssturnjs
markovchain
markovchain

Reputation: 503

Why doesn't turn.js demo work?

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>

Upvotes: 1

Views: 4447

Answers (1)

epascarello
epascarello

Reputation: 207521

Because 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
    });
});

Upvotes: 6

Related Questions