CODEWITHSUNDEEP
javascriptjqueryhtmljquery-masonryjquery-isotope
Luca
Luca

Reputation: 1118

Isotope masonry layout is not working after item size change

I have a simple masonry layout. And need to change elements size and position on click.

Here is a jsfiddle: http://jsfiddle.net/664cV/12/ and the code:

JS

$(function(){
    $('#container').isotope({
        itemSelector: '.box'
    });

    $('.box').click(function(){
        $('.box').width(100).height(100);
        $(this).width(300).height(300);

        $('#container').isotope('reLayout');
    });
});​

CSS

#container {
    width: 400px;
}

.box {
    font-size: 28px;
    width: 100px;
    height: 100px;
}

/* omitted color classes */

HTML

<div id="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div class="box yellow">4</div>
    <div class="box black">5</div>
</div>​

The problem is that it isn't working correctly for element number 1 and number 3 (see images)

Element 1 clicked (solved: see answer)

Error 1

Element 3 clicked

Error 2

What am I doing wrong?

Upvotes: 3

Views: 8211

Answers (3)

gspiker
gspiker

Reputation: 1

I just ran into this problem myself and fixed it by adding an empty div at the top of the container with the same selector as my masonry items, then added the css:

.grid-item:first-child {
    width: 1px;
    height: 0;
    padding: 0;
}

If you're wondering if this will result in your first item being shifted right by a pixel, the answer is no. I'm guessing this is because the height is 0, so it takes up no space. I wish this didn't involve adding unnecessary HTML, but it seems to work pretty well.

Upvotes: 0

Cybercartel
Cybercartel

Reputation: 12582

masonry and isotope maximize only columns. You can find an explanation from the wookmark jquery plugin. When you want to maximize columns and rows you need something else.

  1. http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout
  2. http://www.benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Upvotes: 0

caruso_g
caruso_g

Reputation: 403

You need to set the masonry first item width so that, once re-sized, isotope will remember this settings instead of the new first item width keeping the grid consistent.

Sadly, item number three still leaves an empty space, but I think that is isotope's standard behavior since it puts the fourth item up to the first, free, row, in that case row number one.

masonry: {
    columnWidth: 100
}

In fact, if you click on the box number 7, it leave an empty space as well. It would be nice to find a solution to that default behavior too.

<div class="box red">6</div>
<div class="box blue">7</div>
<div class="box green">8</div>
<div class="box yellow">9</div>
<div class="box black">10</div>

Upvotes: 3

Related Questions