Question

I’m using masonry (jQuery plugin) to create “fluid” awesome columns.
Everything worked great until I added a field that is visible if javascript is turned off, otherwise when the page is loaded I hide the fields and show a “read more” link (läs mer)…

But Masonry takes the hidden field into account when it sets the positions of the divs =/

any ideas?

You can see it here: http://hyrakontorsplats.nu/

Update:
I tried to move the call for masonry last, and that did the trick for loading..
but now it doesn’t reorder the way it should when I click read more and show the element.

$(‘.merInfo’).hide();
$(‘.lasMer’).show();

$('#kontorsplatser').masonry({
  itemSelector: '.kontorsplats',
  //isRTL: true  //align right :)
});

Answer 1

I found it!

Look for reload here: http://masonry.desandro.com/docs/methods.html
My final (working!) code:

$(‘.merInfo’).hide();
$(‘.lasMer’).show();

$(".lasMer").click(function() {
    $(this).parent().siblings(".merInfo").show();
    $(this).hide();
    $('#kontorsplatser').masonry( 'reload' );

});

$('#kontorsplatser').masonry({
  itemSelector: '.kontorsplats',
  //isRTL: true  //align right :)
});