Question

I’m trying to implement jQuery masonry in my app, but not getting it to work.

I think the problem is that I’m trying to apply it to tables, not divs. Can someone pls take a look and confirm this? how do I fix it?

The page on which I want to apply jquery masonry is just a simple index.html.erb page that shows all the users posts. I want to have these appears in 3 columns, in boxes of varying heights.

Thanks,

Faisal

POSTS>INDEX.HTML.ERB

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/app/assets/javascripts/jquery.masonry.min.js"></script>

<table class="table table-striped">
<script type="text/javascript"> 
$('#container').masonry({
    itemSelector: '.box',
    columnWidth : 100 
});
</script>
<tbody>
<% @posts.each do |post| %>
<tr>
<td>I am a <%= post.title %> getting married in <%= post.job %> in <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.</td>
<td><%= time_ago_in_words(post.created_at) %> ago.</td>
</tr>
<% end %>
</tbody>
</table>

Answer 1

Make sure you update “/path/to/jquery.masonry.min.js” with the actual path to the script

here is a working example I did on the fly http://jsfiddle.net/D7QQU/1/:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="/path/to/jquery.masonry.min.js"></script>
  <style>
    .item {
      width: 220px;
      margin: 10px;
      float: left;
    }
  </style>
  <script> 
    $('#container').masonry({
       itemSelector: '.box',
        columnWidth : 100 
    });
  </script>

  <div id="container">
    <% @posts.each do |post| %>
      <div class="item"> I am a <%= post.title %> getting married in <%= post.job %> in    <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.
      <%= time_ago_in_words(post.created_at) %> ago.</div>
    <% end %>
  </div>

​From what I’ve seen, it uses divs instead of table cells.

let me know if you still need help.

Edit:

Based on you comment below:

You need to add this to the top of the page using it. It will find the js in the assets.

If using 3.2 then jquery is in there by default just use the rails jquery:install command

<%= javascript_include_tag('jquery.masonry.min') %>