Simulating a Turn.js page flip with click/scroll event

Question

I created a basic turn.js flipbook. When I click the link element (#clickme), I want to simulate the screen animation where a user clicks (mousedown) at the peel and releases (mouseup) after turning the page. Here's my code so far:

$("#flipbook").turn({
    width: 700*2,
    height: 938,
    'display': 'double',
    duration: 3000
});

//Create two empty span elements over the peel start and end points
var rect = document.getElementById("flipbook").getBoundingClientRect();
$("#flipStart").css("top", rect.bottom - 50);
$("#flipStart").css("left", rect.right - 50);
$("#flipEnd").css("top", rect.bottom - 50);
$("#flipEnd").css("left", rect.left);

//Simulate the flip with click
$("#clickme").click(function() {
    var targetNode1 = document.getElementById("flipStart");
    var targetNode2 = document.getElementById("flipEnd");
    if (targetNode1) {
        triggerMouseEvent (targetNode1, "mouseover");
        triggerMouseEvent (targetNode1, "mousedown");
    }
    if (targetNode2) {
        triggerMouseEvent (targetNode2, "mouseover");
        triggerMouseEvent (targetNode2, "mouseup");
        triggerMouseEvent (targetNode2, "click");
    }
    else
        console.log ("*** Target node not found!");

    function triggerMouseEvent (node, eventType) {
        var clickEvent = document.createEvent ('MouseEvents');
        clickEvent.initEvent (eventType, true, true);
        node.dispatchEvent (clickEvent);
    }
});

When I run this, nothing happens though. I figured the mousedown event is not getting triggered but mouseup does. Anyone have any idea what I am doing wrong?

Here's the HTML:

<body style="overflow: hidden">
<div id="clickme"><a href="#">Click</a></div>
<div id="flipbook" style="margin: auto; position: absolute">
  <div id="page1"><p>Page 1</p></div>
  <div id="page2"><p>Page 2</p></div>
  <div id="page3"><p>Page 3</p></div>
  <div id="page4"><p>Page 4</p></div>
  <div id="page5"><p>Page 5</p></div>
</div>
<div id="flipStart" style="position:absolute"><span style="display:block; width: 50px; height: 50px; margin: auto; z-index: 90;"></span> </div>
<div id="flipEnd" style="position: absolute"><span style="display: block; width: 50px; height: 50px; margin: auto; z-index: 90"></span> </div>
</body>

Could you also add your HTML code? – Alvaro Flaño Larrondo Mar 17 '16 at 14:14 — Alvaro Flaño Larrondo, Mar 17 '16 at 14:14
Sure. I've added a simplified HTML. – Bharadwaj Ramakrishnan Mar 17 '16 at 14:36 — Bharadwaj Ramakrishnan, Mar 17 '16 at 14:36

Alvaro Flaño Larrondo · Answer 1 · 2016-03-17T15:52:09.687

Some recomendations about your code:

If you are already using jQuery, it is easier to use it instead of Vanilla JS for elements selection and for triggering events.
It is a better if you keep your CSS style in a separate file. Try to avoid inline styl.

Now, about what you were asking, I'm not sure what are you trying with that code but if you "want to simulate a manual page flip when I click on a link element" you may want to take a look at the next, previous and peel methods of Turn.js. Here is a working code and a JSFiddle to help you get started:

HTML

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

<div id="controls">
  <a id="previous" href="#">Previous</a>
  <a id="next" href="#">Next</a>
</div>

JS

$("#flipbook").turn({
    width: 400,
    height: 300
});

var num_pages = $("#flipbook").turn("pages");

$("#previous").mousedown(function(){
    var page = $("#flipbook").turn("page");
    if(page == 2 || page == 3 || page == num_pages){
        $("#flipbook").turn("peel", "l");
  }
  else{
        $("#flipbook").turn("peel", "tl");
  }
}).mouseup(function(){
    $("#flipbook").turn("previous");
});

$("#next").mousedown(function(){
    var page = $("#flipbook").turn("page");
    if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
        $("#flipbook").turn("peel", "r");
  }
  else{
        $("#flipbook").turn("peel", "tr");
  }
}).mouseup(function(){
    $("#flipbook").turn("next");
});

CSS

body{
    overflow:hidden;
    background-color:#D5E8EA;
}

#flipbook{
    width:400px;
    height:300px;
    margin: auto;
    position: absolute
}

#flipbook .page{
    width:400px;
    height:300px;
    background-color:#DED7D7;
    line-height:300px;
    font-size:20px;
    text-align:center;
}

#flipbook .hard{
   background:#ccc !important;
   font-weight:bold;
}

Thanks for the reminder :) (I do have to stop my compulsive habit of inline CSS). However, your code is not what I'm looking to do. I am trying to simulate on the screen the whole animation where the user flips the page. I want to eventually get this to work for scrolling. So the page will flip only to the extent that I scroll. — Bharadwaj Ramakrishnan, Mar 17 '16 at 15:22
I think I understand now and I have updated the answer and the JSFiddle. — Alvaro Flaño Larrondo, Mar 17 '16 at 15:39
Thanks for your answer @Alvaro. The issue I have with your code is that it will always complete the page flip. What if I want to pause in between the page flip and what if then I decide I don't want to turn the page? I won't be able to do with `turn('next')`. Forget about my Click. My final purpose is to implement this on scroll. Think of my problem as something like, for every scroll position the page will turn a little bit. — Bharadwaj Ramakrishnan, Mar 17 '16 at 15:49

Simulating a Turn.js page flip with click/scroll event

1 Answers1