IE Browser Comapatiblity

[KhayyamNosrati]

Hi again, Hope you are doing well I found another issue.

The plugin does not work properly with IE. I tried Internet Explorer 11, and when I load the page which I have created, the plugin doesn't work and masonry layout is not proper, and it effects other contents as well..

Would You Please make it cross-browser Thank You in advance again :-) Have a Good day!

[websemantics]

Did you test if the issue was from the original plugin or is it specific for the plus new features, filter and shuffle?

[KhayyamNosrati]

The function you have override "measureColumns" creates the issue in IE as I checked. When I remove it, the plugin works fine in IE.

On Oct 24, 2016 1:39 AM, "Adnan M.Sagar, PhD" notifications@github.com wrote:

Did you test if the issue was from the original plugin or is it specific for the plus new features, filter and shuffle?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/websemantics/masonry-plus/issues/2#issuecomment-255611075, or mute the thread https://github.com/notifications/unsubscribe-auth/AT1Fm2FpmEfQvhcP4DPzvo2XfPJPM2zcks5q277_gaJpZM4Kdg8A .

[KhayyamNosrati]

I finally found the solution! The original plugin author got the this issue fixed before.. now the whole thing works fine for IE as well. Thank You Have a Good day!

[websemantics]

I've looked at the issue fix, the code of 'measureColumns' isn't different from the current masonry-plus 1.0.1 code!!

[KhayyamNosrati]

check lines 67-76 in "masonry-plus 1.0.1 " and compare with the issue.. there are small changes.

[websemantics]

1- masonry-plus 1.0.1 (67-76)

// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
/* var firstItem = this.items[0] old code */
var firstItem = this.items.find(function(item) {return !item.isIgnored})
var firstItemElem = firstItem && firstItem.element
// columnWidth fall back to item of first element
this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
    // if first elem has no width, default to size of container
    this.containerWidth
}

2- masonry.js (64-69)

// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
    var firstItem = this.items[0];
    var firstItemElem = firstItem && firstItem.element;
    // columnWidth fall back to item of first element
    this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
    // if first elem has no width, default to size of container
    this.containerWidth;
}

3- Changes,

This,

var firstItem = this.items[0]

Changed to,

var firstItem = this.items.find(function(item) {return !item.isIgnored})

As per issue #1,

Or am I missing something more obvious here?

[KhayyamNosrati]

var firstItemElem = this.items[0].element;

this.columnWidth = this.columnWidth || getSize( firstItemElem ).outerWidth; These lines are removed.

var firstItem = this.items[0];

var firstItemElem = firstItem && firstItem.element; and these are added BEFORE(out of) if statement.

You can changed above, in the jsfiddle issue #1 while running it with Internet Explorer, then compare with masonry-plus 1.0.1. And Thank You for all your friendly respond and support! :-)

[websemantics]

You're correct, .. my mistake! ... I compared with the latest release, 4.1.1, not the issue you pointed out,

Still wondering why you had to revert back to an older release to get your code working! But as long as it solved your problem I guess :)