1

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.

Val
  • 1,260
  • 5
  • 23
  • 39

1 Answers1

2

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>
Nico
  • 6,259
  • 4
  • 24
  • 40
  • The fiddle is working. I am still getting the same issue with the local viewing. I inspected the page and see the turn.min.js loading. I placed it right before the

    tag, but still it is the same error in the JSFiddle since that is where I place all the js for faster viewing. It is strange, because I am seeing the overflow error as in the JSFiddle, yet the JSFiddle is working and I am stumped on the local testing.

     – Val Oct 08 '14 at 20:55
  • are you loading jquery Before tourn.js? something like : change with your jquery version and your files path – Nico Oct 08 '14 at 21:42
  • You are correct. I was not loading the jQuery before the turn.min.js file. It took some time, but I eventually had to place the turn.min.js into the layout after the jQuery script. ~ Thanks and well done. – Val Oct 08 '14 at 21:45