jumpy content on window resize

[lmcmgig]

If browser is resize, all the content after the galley is jumping. By refreshing height, only on the once instead of each new row, help on the issue.

A possible approach, in JustifiedGallery.prototype.flushRow add isLastRow around height update if (isLastRow) { //Gallery Height this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border; this.$gallery.height(this.galleryHeightToSet + this.getSpinnerHeight()); }

[biziclop]

I tried something similar I think:

https://github.com/miromannino/Justified-Gallery/pull/258/commits/4791ef8dee259fac13f09efe45402deca5211fd0

You can give it a spin: https://github.com/biziclop/Justified-Gallery

[miromannino]

258 from @biziclop fixed this.

Try to get the 3.6.5 from the master branch and see if that has been solved.

[lmcmgig]

Doesn't solve it. Making refreshSensitivity to 18, solve it. The draw back it's all picture at the far right are crop on there sides. It's the hard way to ignore scroll bar place is taking.

What append is hard to understand, we need to see it in action. But the first row is flush, the content doesn't need a scroll bar. When the second row is added, a scroll bar is needed, but the width change. And we start again and again and again.

[biziclop]

Somewhat related idea: maybe there could be a flex-based row model which needs no further javascript adjustments for small width changes (so refreshSensitivity could be much larger without worry):
https://jsfiddle.net/qqL8mxpv/

[lon9man]

Guys, can you explain why 500px doesn't jump and original demo jumps? how 500px resolved this issue?

compared pages:

1. https://500px.com/editors
2. http://miromannino.github.io/Justified-Gallery/options-and-events/

comparing video: https://photos.app.goo.gl/t5MlY1nep9xAQOwi2

[acwolff]

I use Justified Gallery – v3.6.5 which shows this jumpy contents: Open https://andrewolff.jalbum.net/Vecht_SaharaN_PS/ on a PC and makes the window so large that you don't see a vertical scroll-bar at the right side. Now move the bottom of the window up until you just see a vertical scroll-bar: the window starts jumping.

I tied to correct this by adding refreshSensitivity: 18, see https://andrewolff.jalbum.net/SlideShow4/ If you do the exercise discussed above, you see no jumpy contents. However move now the right side of the window: you see that the right border of the gallery disappears and also part of the image disappears If you come to a point that a vertical scroll-bar is displayed, you see again a bumpy contents/

How should a get a jumpy free display?

[biziclop]

@acwolff: Dear Sir, first of all, I don't know whose idea was it, but capturing the up and down keys to go to a different page should be awarded with a baseball bat in the creator's face in my opinion. It' a fucking nightmare.

Now I should figure out something, because I'm at least part of the jumpy behaviour.

Somewhat related links:
https://github.com/chartjs/Chart.js/issues/2127
https://stackoverflow.com/questions/2175992/detect-when-window-vertical-scrollbar-appears

[acwolff]

@biziclop I don't understand why like to crash my face because I allow navigation via keyboard keys!

But never mind, I have a work around for the jumpy display problem: Use both the refreshSensitivity and a boder in combination with a transparent gallery background:

$("#thumbsgallery").justifiedGallery({
    rowHeight : rowHeight_jg,
    maxRowHeight : 2*rowHeight_jg,
    lastRow : lastRow_jg,
    captions : true, 
    waitThumbnailsLoad: false,
    border: 20,
    refreshSensitivity: 18,
    margins : margins_jg
})

#thumbsgallery {
    background-color: rgba(255,255,255,0.0);
}

See the effect here: https://andrewolff.jalbum.net/PS_JustifiedGallery/

[acwolff]

This is only a problem on PC's, so the best way to solve this problem is to hide scrollbars on a PC and use only mouse-wheel for scrolling. See here for an example: https://www.andrewolff.nl/FotoSerie/Wandelingen/Oostvaarderplassen/

It is in that case not required to set refreshSensitivity to 18 or use a transparent background.

[miromannino]

I believe this is the best article I've seen so far about this: http://dmrutherford.github.io/echo/scrollbars-and-page-width

It seems that in 500px they are doing this too. Having your gallery inside of a width:100% container is the actual problem.

[miromannino]

P.S. I believe there is nothing that JG should do on this topic. If you resize the gallery I need to re-layout the images. Again, is more about how the container where the gallery stays is resizing itself.

[jefftucker1952]

@miromannino

Having your gallery inside of a width:100% container is the actual problem.

That doesn't appear to solve the problem. I can easily produce a flickering page with the gallery in a container with width: 90%, for example.

Edit: And it's cross-browser - Chrome and Firefox. So the linked article's remarks about computing window size don't seem to apply to this.