CODEWITHSUNDEEP
jquery
truslivii.lev
truslivii.lev

Reputation: 701

prependTo() doesn't add new element

I use WowBook, a flipbook jQuery plugin and I need to use thumbnails_generator.js for generation thumbnails.

I added this script on my page

<script src="Scripts/js/thumbnails_generator.js"></script>

but script doesn't work properly.

thumbnails_generator.js

;(function($) {

/* A lot of other functions */

function createUI(){
    console.log(1);
    var div = $("<div>").prependTo("body").css({
        background: "white",
        border:"1px solid black",
        position: "absolute",
        padding: "8px",
        zIndex: 100000,
        top: 0,
        left: 0
    });
    console.log(2);

    var button = $("<button style='position: relative; top:0; left: 0'>Generate Thumbnails</button>");
    button.appendTo(div);
    $("<div id='progress' style='display: none;'><span class='loaded'>0</span> / <span class='total'></span> pages loaded</div>").appendTo(div);
    var anchor = $("<a download='thumbnails.png' style='display:block'>Click to download thumbnails</a>");
    button.click(function(){
        var book = $.wowBook( $(".wowbook") );
        $('#progress').css("display", "block").find(".total").text( book.pages.length );
        loadAllPages( book, function(){
            var canvas  = createThumbnailsSprite( book );
            var data    = canvas.toDataURL('image/png');
            anchor[0].href = data; // dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
            div.append(anchor).append(canvas);
        })
    });
    return
} // createUI

createUI();


})(jQuery);

console.log(1); works and console.log(2); works too, but var div = $("<div>").prependTo("body") doesn't work, it doesn't add any new element on the page. I broke all my mind trying to understand what's wrong?

Upvotes: 0

Views: 138

Answers (1)

Ted
Ted

Reputation: 14937

Change this:

createUI();

to this:

$(document).ready(function(){
    createUI();
});

Upvotes: 1

Related Questions