Skip to content
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
Open

jumpy content on window resize #259

lmcmgig opened this issue Jan 23, 2018 · 12 comments

Comments

@lmcmgig
Copy link

@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
Copy link

@biziclop 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
Copy link
Owner

@miromannino 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
Copy link
Author

@lmcmgig 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
Copy link

@biziclop 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
Copy link

@lon9man 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
Copy link

@acwolff 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
Copy link

@biziclop 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
Copy link

@acwolff 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
Copy link

@acwolff 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
Copy link
Owner

@miromannino 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
Copy link
Owner

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

@jefftucker1952
Copy link

@jefftucker1952 jefftucker1952 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants