1

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.

Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?

Note:

I have tried this link Forcing windows resize to fire This will not work.

Community
  • 1
  • 1
Jack O'Connor
  • 244
  • 3
  • 19
  • `$(window).resize()` doesn't fire it? – Skatch Jul 08 '15 at 10:42
  • "my JS makes everything but an article disappear." how? – atmd Jul 08 '15 at 10:44
  • @atmd I have them all a 'section-type'. E.g. `
    ` My jQuery will hide all other section types other than the one that was clicked.
     – Jack O'Connor Jul 08 '15 at 11:15
  • if you have made the element invisible but not taken them out of the flow that might be why the resize isnt being show, can you show your hiding code. the issue might not be that the resize isnt triggering (it prob is) but if the elements are still in the flow then masonry wont react – atmd Jul 08 '15 at 11:31

3 Answers3

2

$(window).resize(function(){
  $('span').text('event fired!');
});
$('button').click(function(){
  window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
Skatch
  • 2,112
  • 2
  • 14
  • 32
  • This is the problem i'm having which is weird. If i run a on click on a random button, and run the trigger event on window for a resize, it will register that I have done that. The window resize function will run what is inside of it. However, it will not make Masonry.js respond like it would if the window was actually resized. Almost like Masonry.js is not recognising the event has been triggered. – Jack O'Connor Jul 08 '15 at 11:19
  • 1
    Hm, I don't know, maybe the jQuery trigger event only triggers the jQuery functions binded to it. Try with pure javascript, I edited the code above with `window.dispatchEvent(new Event('resize'));` – Skatch Jul 08 '15 at 11:22
  • Maybe so, the pure JS didn't work either. I tried running it also in the Masonry.js file but this failed too, perhaps Masonry.js works on widths rather than the resize function itself? I wonder if anyone else is getting this problem. – Jack O'Connor Jul 08 '15 at 11:30
  • Due to this documentation: http://masonry.desandro.com/events.html , I think that "resize" event is not listening by masonry.js. Maybe it's only custom events like `layoutComplete`. – Marcos Pérez Gude Jul 08 '15 at 11:43
  • See the EDIT 2 of my answer, I think that's the solution – Marcos Pérez Gude Jul 08 '15 at 11:48
1

This must work (I'm using it right now)

     $(window).trigger('resize');

Hope this helps.

EDIT

Note that's jQuery syntax.

EDIT 2

i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:

 $(window).on('resize', function () {
     $('#element').masonry('reloadItems');
 }); 
 $(window).trigger("resize");

Good luck

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

I managed to fix this. 

$('#article-options li').on('click', function() {

    setTimeout(function() {
        var $grid = $('#blog-container').masonry({
            columnWidth: 80
        });
        // change size of item by toggling gigante class

        $(this).toggleClass('gigante');
        // trigger layout after item size changes
        $grid.masonry('layout');

    }, 200);
});

Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.

I have set a timeout as JS was running a bit behind and making me click twice for the code to run.

I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.

As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

Jack O'Connor
  • 244
  • 3
  • 19