Streaming live at 10am (PST)

Turn.js not working

Hello everybody,
I’m trying to use turn.js to add a flipbook on this page. It seems like I’ve done everything properly, but it doesn’t work. There’s something I’m missing and I can’t figure out what. Here’s what I did:

In the page settings I went to custom code and inside I added:

<.script src=“”><./script>

<.script src="//"><./script>

plus a bunch of CSS inside a <.style> tag.

Then in section before I put

<.script type=“text/javascript”>
(document).ready(function() { ("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true

Then I put an embed component in the page and wrote (copied and pasted from turn.js webpage, just as a test):

<.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>

When I publish I can see the text and some sort of grey container (with the wrong size), and by checking the dev console I get this:

jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2 jQuery.Deferred exception: (...).turn is not a function TypeError: (…).turn is not a function
at HTMLDocument. (
at e (
at t ( undefined
S.Deferred.exceptionHook @ jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2
jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2 Uncaught TypeError: $(…).turn is not a function
at HTMLDocument. ((index):78)
at e (jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2)
at t (jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2)

Here’s is the read-only link to the page:

Can anyone help? Thanks a lot!

Remove jquery (Webflow already load this).

Put the turn.js CDN code before body.

AH! Ok, it’s a progress! But pages won’t turn, I can just see the cover. It’s a step forward though, thanks


You also got syntax her:

( document ).ready(function() {

Should be (add $):

$( document ).ready(function() {

Copy Paste

<script src="//"></script>

<script type="text/javascript">
  $( document ).ready(function() {
      width: 400,
      height: 300,
      autoCenter: true

that’s odd! I see this
Screenshot 2020-10-16 at 11.19.45

Anyway i am not sure this library works well with webflow jquery version.
The code last update before 9 years ago + You need to add a lot of styles by yourself + What about mobile?

My advice is to use another solution/idea.

it’s supposed to work on mobile, but I’m also considering another solution. Thanks for your help though, much appreciated