Why Does Turn.js Only Work Once in Meteor Application?

Question

I want to integrate Turn.js in a meteor project, but come across a "small" problem ,

the script work well the first time I "load" the template , but wouldn't work when i come across the same template.

{{#if correspondances_readingMode}}

<script >

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['../../lib/turn.js'],
    nope: ['../../lib/turn.html4.min.js'],
    both: ['css/basic.css'],
    complete: loadApp
});

</script>

<style>
.page{
       width:400px;
    height:300px;
    background-color:white;
    line-height:300px;
    font-size:20px;
    text-align:center;
}
</style>

        <div class="flipbook">

        {{#each myPost}}

            <div class="page">
            {{{text}}}
            </div>
        {{/each}}
        </div>
{{/if}}

All seems to go as if the script was only executed when the user come across the template the first time , but wouldn't launch again the second time.

I have try many thing, but I came to think it's because of the handlebar {{#if}}

P.s : On chrome the second time it's loaded it doesn't show turn.js as a script :

enter image description here

try using template rendered handler http://docs.meteor.com/#/full/template_onRendered — sites, Mar 26 '15 at 23:40
Seems that I can't make that work , even if I create another template that is called when 'correspondances_readingMode' (hence removing the handlebar and have a template unique to this , the onRendered doesn't work , not even Once ) — Boo, Mar 27 '15 at 00:06

score 0 · Answer 1 · answered Jan 25 '17 at 06:04

I was running into the same problem. I figured that the width of the booklet was calculated before the containing div got its full width. I set a delay of 1 second after rendering and now it seems to work fine.

Template.menu.rendered = function(){
setTimeout(function() {
import '/imports/turn.min.js';

    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    // console.log('Current view: ', $(this).turn('view'));
                                }
                            }
                        });
    });


    $(window).bind('keydown', function(e){

        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');

    });
}, 1000);
};

`

Why Does Turn.js Only Work Once in Meteor Application?

1 Answers1