$('a[data-toggle=tab]').each(function () {
var $this = $(this);
$this.on('shown.bs.tab', function () {
$container.imagesLoaded( function () {
$container.masonry({
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?
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('shown.bs.tab', 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.
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.
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).
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.
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.
