CODEWITHSUNDEEP
javascriptjquery
Himmators
Himmators

Reputation: 15026

Make sure that one javascript gets run before another

I have two javascript-files. That currently both get loaded in the header

    <link rel="stylesheet" href="http://filer.jungrelations.com/beaussometumblr/js/main.js">
        <script src="http://filer.jungrelations.com/beaussometumblr/js/vendor/masonry.pkgd.min.js"></script>

main.js does some manipulation to the order in the DOM. Applies masonry, an javascript library that positions elements absolutely based on their order in the DOM. I initiate it using the data-masonry-object-method:

data-masonry-options='{ "columnWidth": 196,  "itemSelector": "section", "gutter": 8, "transitionDuration": 0 }'

Because masonry cares about the order of the html-nodes, It's important that main.js is run before masonry.js. This is what main.js looks like.

$(document).ready(function() {
   $('.stamp1').remove();
});

Upvotes: 0

Views: 276

Answers (2)

Zac
Zac

Reputation: 1742

One option is to pull in the second script file in your first:

$.getScript('second-file.js');

Thus your main.js looks like:

$(document).ready(function() {
   $('.stamp1').remove();            //do whatever you need to do
   $.getScript('second-file.js');    //load the second script
});

Upvotes: 0

Andrea Parodi
Andrea Parodi

Reputation: 5614

I suggest you manually activate masonry in your main.js, after you did the DOM manipulation:

$(document).ready(function() {
    $('.stamp1').remove(); 


    $('#container').masonry({
       columnWidth: 196,
       itemSelector: 'section',
       gutter: 8, 
       transitionDuration: 0
    });

});

You'll also have to remove the data-masonry-options attribute from your container.

Upvotes: 1

Related Questions