Question

I want to do a portfolio page like this one.
I am using the masonry Jquery plugin.
So, when I click on a box, it should expand and push the other boxes, not lie underneath them.
So basically, on click I add a new width and height to the box that I am clicking, and display another div in the box.

If I add the height and width inline, the div pushes the other boxes like it should, but when I use jQuery, it just expands underneath them. Here is a fiddle.

html:

<div class="container">
    <div class="box" id="1" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_1"></div>
        <div class="box-content" id="bc_1">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 1</span>
        </div>
        <div class="big-box-content" id="bbc_1">
            <h1 class="title">Titlul clipului aici 1</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>
    </div>

    <div class="box" id="2" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_2"></div>
        <div class="box-content" id="bc_2">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 2</span>
        </div>
        <div class="big-box-content" id="bbc_2">
            <h1 class="title">Titlul clipului aici 2</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>

    </div>
     .....
     .....
</div>

jQuery:

$('.box').click(function () {
    id = this.id;
    //if there is any box opened, close it
    $('.close-btn').css('display', 'none');
    $('.box-content').css('display', 'block');
    $('.big-box-content').css('display', 'none');
    $('.box').css('width', '200px').css('height', 'auto').css('padding', '10px');
    // open the clicked one
    $('#' + id).css('width', '650px').css('height', 'auto').css('padding', '15px');
    $('#bc_' + id).css('display', 'none');
    $('#bbc_' + id).css('display', 'block');
    $('#cb_' + id).css('display', 'block');
});

Answer 1

use the reload function of masonry.

    $(function(){

    $('.container').masonry('reload');

});

jsfiddle: http://jsfiddle.net/WA347/45/