I am working on using turn.js. I have not been successful with integrating the API, so I started working in JSFiddle to understand where I am making my errors. The example I am following is from the Creative Technologist with a JSFiddle Demo. However, when I do a simple copy and paste I am unable to get a working demo my demo. The pages of the book are not being hidden.
When I run the code locally I get the following error
Uncaught TypeError: undefined is not a function
Here is the partial code where the browser is directing me to:
plugins: function () {
// run the plugin
$(this.el).turn({
gradients: true,
acceleration: true
});
// hide the body overflow
document.body.className = 'hide-overflow';
}
Where the line that is pointed to is
$(this.el).turn({
I am currently using turnjs4 and jquery 2.1.1.
Update: I was able to get the local viewing accomplished. I am currently using handlebars in my server stack. When I was injecting the the turn.min.js script it was not in the right order with the layout where the jQuery script was inserted. I even attempted to rearrange the ordering of the template to have the turn.min.js injection after the jQuery script that was in the layout, but it still did not work.
The final solution was to include the turn.min.js script after the jQuery script in the layout file! That way the turn.min.js file calling functions from the jQuery script were defined.
in jsfiddle probably you make some mistake when you have added external resource, i'v tried to add again turn.js using this link (copy paste into external resource box) http://www.turnjs.com/lib/turn.min.js , and seems working.
for your local file try add this in your <head>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>