Why this implementation of turnjs not work?

Question

I'm trying to implement this example locally:

The first is to import:

jquery library and turnjs.

HTML:

<div class="flipbook-viewport">
   <div class="container">
<div class="flipbook">
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/07.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/08.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/09.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/10.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/11.jpg)"></div>
  <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/12.jpg)"></div>
</div>

JavaScript: It seems the error is here, but I have little experience in JavaScript. I do not understand why this happens.

window.addEventListener('resize', resize);
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
  // e.stopPropagation();
});

function loadApp() {
  console.log('Load App');
  var size = getSize();
  console.log(size);
  // Create the flipbook
  $('.flipbook').turn({
  // Width
  width: size.width,
  // Height
  height: size.height,

  // Elevation
  elevation: 50,

  // Enable gradients
  gradients: true,

  // Auto center this flipbook
  autoCenter: true

  });
}

function getSize() {
  console.log('get size');
  var width = document.body.clientWidth;
  var height = document.body.clientHeight;

  return {
    width: width,
    height: height
  }
}

function resize() {
  console.log('resize event triggered');

  var size = getSize();
  console.log(size);

  if (size.width > size.height) { // landscape
    $('.flipbook').turn('display', 'double');
  }
  else {
    $('.flipbook').turn('display', 'single');
  }

  $('.flipbook').turn('size', size.width, size.height);
}

// Load App
loadApp();

CSS:

html,
body {
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
}

body {
  overflow: hidden;
  background-color: #fcfcfc;
  margin: 0;
  padding: 0;
}

.flipbook-viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.flipbook-viewport .container {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.flipbook-viewport .flipbook {
  width: 922px;
  height: 600px;
}

.flipbook-viewport .page {
  width: 461px;
  height: 600px;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.flipbook .page {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }

.flipbook-viewport .page img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}

.flipbook-viewport .shadow {
  -webkit-transition: -webkit-box-shadow 0.5s;
  -moz-transition: -moz-box-shadow 0.5s;
  -o-transition: -webkit-box-shadow 0.5s;
  -ms-transition: -ms-box-shadow 0.5s;
  -webkit-box-shadow: 0 0 20px #ccc;
  -moz-box-shadow: 0 0 20px #ccc;
  -o-box-shadow: 0 0 20px #ccc;
  -ms-box-shadow: 0 0 20px #ccc;
  box-shadow: 0 0 20px #ccc;
}

but not working.

This is console logs:

what should I do?

Thanks!

What exactly does "not working" mean? Are there errors in the console? Does *something* happen? — Pointy, Aug 31 '15 at 22:28
You should find an explicit title for your question. Most people here need help because something doesn't work. — Domino, Aug 31 '15 at 22:32
The result should be like the example: http://codepen.io/joshbuchea/pen/zGdJMR — alvarezsh, Aug 31 '15 at 22:33
[How to ask a good SO question](http://stackoverflow.com/help/how-to-ask) — Domino, Aug 31 '15 at 22:34
The error you get says that the body does not exist yet when this code is executed. Wrap your code (or at least this block) in `window.addEventListener('load', function(){ /* your code */ });` — blex, Aug 31 '15 at 22:46
Related: [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Aug 31 '15 at 23:00

score 0 · Answer 1 · answered Aug 31 '15 at 23:14

The problem is (as you can see in the console error) that the document.body is null.. That's because Dom (html structure) is not fully loaded, AKA ready..

Wrap your code in jQuery ready handler.. jQuery(document).ready(function() {......});

Note that this is better than `window load' as suggested in comments because this doesn't wait for every image to be fully loaded to execute.

Why this implementation of turnjs not work?

1 Answers1