CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlinkturn
daviddcarr
daviddcarr

Reputation: 15

Turn.js Table of Contents link issue

I've hit a bit of a snag on a project i'm working on with Turn.js. I'm trying to create a 'Table of Contents' with clickable links to the page said content can be found on. What I've done appears to work a couple times, but then it just quits.

HTML:

<div id="flipbook">
    <div class="hard"><p>Turn.js</p></div> 
    <div class="hard"></div>
    <div>
        <div class="button-container">
            <button data-page="4">Go To Page 1</button>
            <button data-page="5">Go To Page 2</button>
            <button data-page="6">Go To Page 3</button>
            <button data-page="7">Go To Page 4</button>
            <button data-page="8">Go To Page 5</button>
            <button data-page="9">Go To Page 6</button>
            <button data-page="10">Go To Page 7</button>
            <button data-page="11">Go To Page 8</button>
        </div>
    </div>
    <div><p>Page 1</p></div>
    <div><p>Page 2</p></div>
    <div><p>Page 3</p></div>
    <div><p>Page 4</p></div>
    <div><p>Page 5</p></div>
    <div><p>Page 6</p></div>
    <div><p>Page 7</p></div>
    <div><p>Page 8</p></div>
    <div class="hard"></div>
    <div class="hard"></div>
</div>
<button class="reset" data-page="3">Reset</button>

JS:

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

$("button").click(function(){
    $("#flipbook").turn("page", $(this).data('page'));
});

Here's a jsfiddle: http://jsfiddle.net/ddcarr/fveoyv4o/1/

My set-up is essentially the same, there's a reset button outside of the book element that always works. This has me believing that there's either an issue with pointer-events or with z-indexing. I've had no luck so far, if anyone can point me in the right direction I'd really appreciate it.

Thanks!

Upvotes: 0

Views: 1370

Answers (1)

XtianSavier
XtianSavier

Reputation: 11

I got a solution to your problem.

you need to do like this,

$(document).on('click','button',function(){
    $("#flipbook").turn("page", $(this).data('page'));
});

This would work perfectly fine as you expected! I hope it helps you. :)

Upvotes: 1

Related Questions