CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-masonry
oshirowanen
oshirowanen

Reputation: 15925

jQuery masonry example not working for me

Based on jQuery masonry, I have got the following:

jQuery:

$('#container').masonry({
    itemSelector : '.item',
        columnWidth: 240
});

jQuery ajax: (jquery-masonry works the first time success happens after a page load. jquery-masonry does not work if the success happens again without a page reload.)

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $( "#container" ).empty();

        var i = 0;

        // creating the div elements
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var j = Math.floor(Math.random() * 200) + 50

            var $widget = $( "<div class='item col1' style='height:" + j + "px'></div>" ).appendTo( $( "#container" ) );
            $( "<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>" ).appendTo( $widget );

        }

        // initialising the jquery masonry plugin
        $('#container').masonry({
            itemSelector : '.item',
            columnWidth: 240
        });

    }

}

HTML: (Create dynamically via jQuery-ajax)

<div id="container" style="position: relative; height: 0px;" class="masonry">
    <div class="item col1" style="height:154px"><span>39 - 154</span></div>
    <div class="item col1" style="height:100px"><span>52 - 100</span></div>
    <div class="item col1" style="height:229px"><span>53 - 229</span></div>
    <div class="item col1" style="height:126px"><span>55 - 126</span></div>
    <div class="item col1" style="height:245px"><span>56 - 245</span></div>
    <div class="item col1" style="height:242px"><span>57 - 242</span></div>
    <div class="item col1" style="height:146px"><span>58 - 146</span></div>
    <div class="item col1" style="height:63px"><span>59 - 63</span></div>
    <div class="item col1" style="height:118px"><span>60 - 118</span></div>
    <div class="item col1" style="height:249px"><span>61 - 249</span></div>
    <div class="item col1" style="height:136px"><span>62 - 136</span></div>
    <div class="item col1" style="height:114px"><span>63 - 114</span></div>
    <div class="item col1" style="height:152px"><span>64 - 152</span></div>
    <div class="item col1" style="height:52px"><span>65 - 52</span></div>
    <div class="item col1" style="height:95px"><span>66 - 95</span></div>
</div>

CSS:

.item {
    width: 220px;
    margin: 10px;
    float: left;
    background:white;
}

Result:

enter image description here

Expected:

When it should look like this interms of the divs being up against each other horizontally and vertically.

Question:

What am I doing wrong?

Upvotes: 0

Views: 2115

Answers (2)

Christian
Christian

Reputation: 19740

You need to use the .masonry('reload') function after you append more elements. Eg, this may work:

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $( "#container" ).empty();

        var i = 0;

        // creating the div elements
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var j = Math.floor(Math.random() * 200) + 50

            var $widget = $( "<div class='item col1' style='height:" + j + "px'></div>" ).appendTo( $( "#container" ) );
            $( "<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>" ).appendTo( $widget );

        }

        // reload jquery masonry plugin
        $('#container').masonry('reload')

    }

}

Otherwise, check the jsFiddle: http://jsfiddle.net/RNA8R/1/

Upvotes: 2

Calvin Cheng
Calvin Cheng

Reputation: 36506

I suspect that your jquery.masonry.min.js isn't loaded up correctly. Check the network tab on your firebug or your chrome developer tools.

Here's my exact code in my index.html file (not what is rendered on my dom; my actual code in my html file):-

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="./masonry-master/jquery.masonry.min.js"></script>
        <script>
            $(function(){
              $('#container').masonry({
                // options
                itemSelector : '.item'
              });
            });
        </script>
        <style>
            body {
                background: #999;
            }

            .item {
                width: 220px;
                margin: 10px;
                float: left;
                background:white;
            }​
        </style>
    </head>
    <body>
    <div id="container">
        <div class="item" style="height:154px"><span>39 - 154</span></div>
        <div class="item" style="height:100px"><span>52 - 100</span></div>
        <div class="item" style="height:229px"><span>53 - 229</span></div>
        <div class="item" style="height:126px"><span>55 - 126</span></div>
        <div class="item" style="height:245px"><span>56 - 245</span></div>
        <div class="item" style="height:242px"><span>57 - 242</span></div>
        <div class="item" style="height:146px"><span>58 - 146</span></div>
        <div class="item" style="height:63px"><span>59 - 63</span></div>
        <div class="item" style="height:118px"><span>60 - 118</span></div>
        <div class="item" style="height:249px"><span>61 - 249</span></div>
        <div class="item" style="height:136px"><span>62 - 136</span></div>
        <div class="item" style="height:114px"><span>63 - 114</span></div>
        <div class="item" style="height:152px"><span>64 - 152</span></div>
        <div class="item" style="height:52px"><span>65 - 52</span></div>
        <div class="item" style="height:95px"><span>66 - 95</span></div>
    </div>


    </body>
</html>

Directory structure:-

My index.html loads up jquery.masonry.min.js in a directory called masonry-master right in the same directory level

Upvotes: 0

Related Questions