New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jumpy content on window resize #259

Open
lmcmgig opened this Issue Jan 23, 2018 · 12 comments

Comments

Projects
None yet
6 participants
@lmcmgig

lmcmgig commented Jan 23, 2018

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

This comment has been minimized.

biziclop commented Jan 23, 2018

I tried something similar I think:

4791ef8

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

@miromannino

This comment has been minimized.

Owner

miromannino commented Feb 11, 2018

#258 from @biziclop fixed this.
Try to get the 3.6.5 from the master branch and see if that has been solved.

@lmcmgig

This comment has been minimized.

lmcmgig commented Feb 11, 2018

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

This comment has been minimized.

biziclop commented Feb 12, 2018

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

This comment has been minimized.

lon9man commented Mar 16, 2018

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

This comment has been minimized.

acwolff commented Apr 17, 2018

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

This comment has been minimized.

biziclop commented Apr 17, 2018

@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:
chartjs/Chart.js#2127
https://stackoverflow.com/questions/2175992/detect-when-window-vertical-scrollbar-appears

@acwolff

This comment has been minimized.

acwolff commented Apr 19, 2018

@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 comment has been minimized.

acwolff commented Apr 24, 2018

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

This comment has been minimized.

Owner

miromannino commented Apr 24, 2018

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

This comment has been minimized.

Owner

miromannino commented Apr 24, 2018

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.

@EarlyOut

This comment has been minimized.

EarlyOut commented Apr 29, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment