Help with function that re-initializes Masonry after device orientation change

Howdy! My first post.

I read the sitepoint article, Getting Bootstrap Tabs to Play Nice with Masonry by @antonella. In the article there is a function that re-initalizes Masonry after a bootstrap tab is clicked here’s what it looks like:

$('a[data-toggle=tab]').each(function () {
    var $this = $(this);
    $this.on('', function () {
    $container.imagesLoaded( function () {
            columnWidth: '.item',
            itemSelector: '.item'

So what I need is a function that will do the same thing, but when the device orientation changes. Can I use the jQuery orientationchange to accomplish this? What would such a function consist of?

Help much appreciated.

1 Like

Hi there,

If you’re using jQuery mobile, I guess you can use orientationchange. Otherwise you could trigger your function on page load and window resize and check the width of the window object. Also, there are a few scripts you can use to do JS stuff at different breakpoints. Here’s a link that I’ve found helpful:

As for the function, you can replicate the code above, or encapsulate it in a named function and use it as many times as you like. Something like this:

function initializeMasonry(tab, container) {
  tab.each(function() {
    var $this = $(this);

    $this.on('', function () {
      container.imagesLoaded(function() {
          //rest of the code here

Then you can call the function as many times as you need it:

var $tab = $('a[data-toggle=tab]'),
      $container = //select the container with jQuery for the value;

initializeMasonry( $tab, $container );

I haven’t tried it myself, but it should do the job.


Maybe matchmedia would be useful here.

Thanks for your reply!

The problem I’m having is that when I turn to landscape mode on mobile, the masonry layout gets messed up.
I’ve discovered that it only happens on windows phone; apple works just fine. Apparently, the .container div doesn’t resize at all, but the photos do because they have the .img-responsive class.

Maybe I could try a CSS @media query.
If you have any ideas I’d appreciate your help Thanks again.

The matchmedia I mentioned should be able to catch the orientation change and then you could initialise masonry again but this is more @antonella’s areas than mine. :slight_smile:

To see if it was a CSS issue I’d need to see the site and see how you have set things up but if as you say its working in ios then it may be a bug in a windows phone (which I am unable to test).

Hi Paul,

Now that I’ve read the second message, I can see the problem has nothing to do with my article’s topic or code, therefore I’m in no better position than anyone else to debug this. Perhaps a link to the website can be helpful, although I haven’t got a Windows phone to test this either.

Could you please post a link to your project. This would make it easier for everyone on the forum to help you.

All right, here’s a link. This is just a demo of the gallery layout. @PaulOB

Thank you!

As I said before, I can’t test this on a Windows phone, so I just throw a couple of suggestions.

The first thing that comes to mind is that Masonry shouldn’t need to be re-initialized every time the viewport changes, it should do this by default. In my article I needed to re-initialize it because of the hidden panes in Bootstrap’s tabs. If this doesn’t happen, perhaps you could leave a message on the project’s GitHub page.

There’s a CodePen demo of a Masonry layout made by De Sandro, Masonry’s developer. Do you find the same problem viewing that demo? Here’s where you can find it:

Yes! That’s absolutely right. It usually does by default in every browser I’ve tested except IE mobile. It seems that it’s an IE mobile bug because I did some googling and found some stackoverflow posts related to it. I might try matchmedia like @PaulOB said, but since it seems to occur only in IE mobile, I might just finish building the page before I figure that out.

Thanks for all your help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.