Javascript to add class only works after resizing window?

Question

I have something strange on my Squarespace website ( https://hethuisvandelingerie.squarespace.com/lingerie/LI001 ) and it's driving me bonkers...

This is my goal: http://imgur.com/a/Y5mxN . I would like to have a product page having a full screen product picture without scroll bar.

In order to achieve this, some JavaScript is injected if only one product picture is present on the page:

if (Y.one('.collection-type-products') 
&& Y.one('.product-item-single-image-fill'))) 
&& Y.all('.flow-item').size() === 1) {
    if (Y.config.win.innerWidth > 640) {
        Y.one('body').addClass('flow-items-fill');
        Y.one('.flow-item').addClass('content-fill');
    } else {
        Y.one('body').removeClass('flow-items-fill');
        Y.one('.flow-item').removeClass('content-fill');
        Y.one('.flow-item img').setAttribute('style','');
    }
}

For the CSS classes that are added, I find the following LESS code:

@media screen and ( min-width: 641px ){
    .flow-items-fill{
        height:100%;
        #canvas{
            height:100%;
        }
        #main{
            height:100%;
            >.wrapper{
                height:100%;
            }
        }
        #flowItems{
            height:100%;
        }
        .flow-item{
            height:100%;
        }
    }
    .flow-item{
        .content-fill{
            height: 100%;
        }
    }

And also:

// Responsive Images
img{
    // max-width:100%;
}
// But not for imageLoader stuff
.content-fill > img,
.content-fit > img{
    max-width:none;
}

Now, the mystery appears: when loading the page, the product picture seems to dissapear! When minimizing the window, the picture appears perfectly. Next, I maximize the page again & the picture is now shown correctly. However, I refresh my page and the picture is gone once again :(.

This is one of those issues I've spent hours & hours to resolve, so I need your smart brains to help me out!

Thanks a lot guys & girls. You're the best.

Answer 1

I suspect there is some sort of animation being applied that delays the rendering of your window. Your javascript runs before this is complete causing it to fail the test for minimum window size.

Try a timeout delay of 500 msec to see if that changes the situation:

setTimeout(function() {
  if (Y.one('.collection-type-products') 
  && Y.one('.product-item-single-image-fill'))) 
  && Y.all('.flow-item').size() === 1) {
      if (Y.config.win.innerWidth > 640) {
          Y.one('body').addClass('flow-items-fill');
          Y.one('.flow-item').addClass('content-fill');
      } else {
          Y.one('body').removeClass('flow-items-fill');
          Y.one('.flow-item').removeClass('content-fill');
          Y.one('.flow-item img').setAttribute('style','');
      }
  }
}, 500);

Answer 2

Just in case you are interested. I was able to solve the issue. It was not related to the sequence of rendering and was not solved by adding a timeout as suggested by Rasmeister. @Rasmeister, I appreciate your help!

The problem was caused because the CSS class .flow-items-fill was injected. In this CSS class, I asked to get a #flow-items (or image) height of 100%. However, my parent object did not have a height ( height: 0px )... 100% of 0px equals 0 --> my picture disappears. When specifying a height for my parent object ( #main ), the picture height is no longer set to 0px.

Now, I have the desired result!

Kr, BarrieO