Using Freemasonry in Rails - Windows Not Moving to Window Size

Question

I tried this using both files from the Freemasonry site and stone from stone, but I have the same problem.

Basically, when I resize the browser window, the fields do not move according to the new page size. Instead, I just get the scroll bars appearing in the browser.

I know that the files load normally and select the correct selectors, because if I, for example, change the column width in the masonry parameters (), when the page loads, the windows appear in another place.

In addition, I use Bootstrap, if relevant, but I called the selectors so that they do not interfere with those that were reserved for loading. using # masonry container instead of #container.

Any help would be greatly appreciated, thanks!

application.js:

//= require masonry/jquery.masonry 

message_board / show:

 <div id="show-message-board"> <%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %> </div> <script> $(function(){ $('#masonry-container').masonry({ // options itemSelector : '.item', columnWidth : 50, isAnimated: true }); }); </script> 

_show_message_board.html.erb:

 <div id="masonry-container" class="transitions-enabled infinite-scroll clearfix"> <% messages.each do |message| %> <div class="item"> <p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p> <p class="message_content"><%= message.content %></p> </div> <% end %> 

EDIT:

I tried using the following as suggested elsewhere, and this still doesn't work !:

 $(function(){ var $container = $('#masonry-container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item' }); }); }); 

Answer 1

Here is what I did to get Freemasonry working in my Rails project. Perhaps this will help you ...

• I downloaded the jquery.masonry.min.js file from the site and placed it in the app \ assets \ javascripts directory.

• I added

   //= require jquery.masonry.min 

  to application.js file

• I created a separate mss css file (just to keep it neat) called "masonry.css.scss" in my application \ assets \ stylesheets directory. This is the CSS that I have (I use a “field” instead of your “element”):

   .box { margin: 5px; padding: 5px; background: #D8D5D2; font-size: 11px; line-height: 1.4em; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline; width: 260px; } 

  .box img {width: 100%; }

• Since I use the code in my file "home \ index.html.erb", I created the file "home.js" in the directory "app \ assets \ javascripts". This is the js code I have:

 jQuery(document).ready(function () { var $container = $('#UserShoppingRequestsContainer'); $container.imagesLoaded(function () { $container.masonry({ itemSelector:'.box', isAnimated:true, animationOptions:{ duration:750, easing:'linear', queue:false } }); }); }) 

• Finally, in my file "home \ index.html.erb" I have something like this:

    <div id="UserShoppingRequestsContainer"> <% @shopping_requests.each do |shopping_request| %> <div class="box col3" id="<%= shopping_request.id.to_s %>"> <%= link_to image_tag(shopping_request.request_picture.url(:medium)), user_shopping_request_path(shopping_request.user, shopping_request) %> <p class="serif1_no_padding"><%= shopping_request.category.name %></p> </div> <% end %> </div> 

I think this is right.