Photo View Masonry Doesn't Work on iOS

[Josh]

Hello,

On photo view on iOS, the tiles don’t seem to be arranging properly. I added some JavaScript that resizes the tiles when the screen resizes, as this was not happening automatically. However, unlike on desktop, the newly-resized tiles are not pushing the other ones out of the way. The attached screenshot is of an iPad Retina running iOS 9.3 in the simulator. You can see the highlighted element, which has been resized but is failing to push the other element out of the way. You can also see that the elements were not automatically aligned correctly.

In private browsing mode, this error also occurs, but I get the following additional error message when I rotate the screen:
$().isotope("reLayout") is not a valid method

Here is the code I’m using to resize on changes to the screen size:

jQuery(window).resize(function() {
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
      jQuery(this).trigger('resizeEnd');
}, 20);
});

var resize = function() {
  var max = 0;
  var tiles = jQuery('.tribe-events-event-details.tribe-clearfix');

  tiles.map(function(i, e) {
    var height = jQuery(e).height('auto').height();
    if (height > max) {
      max = height;
    }
    return e;
  }).map(function(i, e) {
    jQuery(e).height(max);
  });
};

// on resize end event, resize tiles to size of max
jQuery(window).bind('resizeEnd', resize)

// trigger event once
jQuery(resize);

// also resize after ajax event (i.e. retrieving new tiles)
jQuery(document).ajaxComplete(function(event, xhr, settings) {
  resize();
});

[George]

Hey Josh,

Thanks for reaching out. We unfortunately cannot help with writing custom code, nor with troubleshooting custom code you have written. Please see our support policy here for more information → https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/

With that being said, in your first reply you wrote, “I added some JavaScript that resizes the tiles when the screen resizes, as this was not happening automatically.”

1. Can you clarify what you mean by this? Are you saying the Photo View is not at all responsive?

2. Can you temporarily REMOVE ANY CUSTOM CODE YOU HAVE WRITTEN, and then compare the behavior of your site’s Photo View in different browser sizes to the behavior of the Photo View on our official demo site here? → http://wpshindig.com/events/photo/

☝️ Do you find that both Photo Views behave exactly the same? Or do you find that the demo site’s Photo View adapts to smaller viewport sizes, while your site’s Photo View does not?

Just curious about the core issue here, as in my experience the Photo View does adapt to the size of the viewport.

Thanks,
George

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts