Question

I’m runnig RoR application with a wall of blocks using Vanilla Masonry, and each block in this wall could be flipped with JQuery Flip! plugin. The issue is that the length of contents on each side of the block could be different, so I want the wall positions reloading after each flip action, to avoid overlapping.

My code works one-way, when I flip the block for the first-time, but when I revert flipping, I encounter overlapping.

I initialize Masonry on load and here is my code for flipping-wall.js:

$(document).ready(function(){
    $('.sponsorFlip').bind("click",function(){
            var elem = $(this);
    var wall = new Masonry( document.getElementById('container'), {
                    gutterWidth:5,
                    isFitWidth: true
                  });

    if(elem.data('flipped'))
    {
        elem.revertFlip();
        elem.data('flipped',false);
                    wall.reload();  
    }
    else
    {
        elem.flip({
            direction:'lr',
            speed: 350,
            onBefore: function(){
                elem.html(elem.siblings('.sponsorData').html());
            }
        });
        elem.data('flipped',true);
        wall.reload();
    }
});

});

Here is three steps:

Please, can you tell me what am I doing wrong.
Thanks guys.

Answer 1

As far as I can tell (tested on my localhost), after flipping is done you have to refer to already initialized Masonry object (instead of creating yet another instance) and reload it.

It could loook like this (put that in place of your onload function).

$(window).load(function() {
    // initialize Masonry - later on you will refer to this wall variable
    var wall = new Masonry( document.getElementById('container'), {gutterWidth:5, isFitWidth: true});

    $('.box').click(function() {
        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:

        elem.revertFlip();
        // Unsetting the flag:
        elem.data('flipped',false);    

        }
        else
        {
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'lr',
            speed: 350,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden
                // from view with display:none) into the clicked
                // .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.box').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);

        }
            // reload already existing Masonry object
        wall.reload();
    })
})

P.S.
Using jQuery Masonry would save you some hassle as it can be embedded in head.