X3Photo Gallery Forums

Kat · 17 Nov 2016, 09:27

Hello Karl,

In justified layout, it is what i see now :

- IE : wide ok - defaut, narrow, narrower not ok
- Firefox : wide, defaut, narrow, narrower begin ok and in the middle it's all mixed up.
- Chrome : wide & defaut ... all ok but seems very slow

flamepix demo in firefox :

by pm another pic

When i resize the window smaller, all fit ok again.

Also where/how to add the chat plugin ?

Thank you

17 Nov 2016, 10:42

Kat wrote:- IE : wide ok - defaut, narrow, narrower not ok
- Firefox : wide, defaut, narrow, narrower begin ok and in the middle it's all mixed up.

Hmm you are right. I thought I had checked everything already. Will look into immediately ...

Kat wrote:- Chrome : wide & defaut ... all ok but seems very slow

Can't confirm the slowness. Even with new bugs, there is no logical reason why it could possibly be slower than before anyway. Tried from here, and renders in 66ms (0.06 seconds) and 2-3ms (0.003 seconds) on refresh justified layout:

Kat wrote:Also where/how to add the chat plugin ?

First you will need to sign up for an account at https://chatra.io/. You can download their chat app, or use their online chat interface. From their chat app, go to "set up and customize", and scroll down to location your API public key. Then go to X3 settings -> accounts -> Chat, and paste the key.

Kat · 17 Nov 2016, 11:41

mjau-mjau wrote: Hmm you are right. I thought I had checked everything already. Will look into immediately ...

Thank you !

I detected the same bug in chrome, when shrinking the window to see the console. So in chrome when window is full, arrangement is ok, when small it's doesn't show right.

sent image by pm

mjau-mjau wrote: Can't confirm the slowness. Even with new bugs, there is no logical reason why it could possibly be slower than before anyway. Tried from here, and renders in 66ms (0.06 seconds) and 2-3ms (0.003 seconds) on refresh justified layout:

I suppose it's ok now :

Render Time: 29ms    x3.min.js:2
localStorage         x3.min.js:14
Render Time: 10ms x3.min.js:2
localStorage         x3.min.js:14
Render Time: 18ms x3.min.js:2

mjau-mjau wrote:First you will need to sign up for an account at https://chatra.io/. You can download their chat app, or use their online chat interface. From their chat app, go to "set up and customize", and scroll down to location your API public key. Then go to X3 settings -> accounts -> Chat, and paste the key.

ha thanks for that

17 Nov 2016, 12:52

Fixed the justified issue. See demo. Also updated X3 release to X3 0.21.3.

Strange/stupid issue: Justified layout is created by setting WIDTH of images from a script that calculates rows. The WIDTHS set on images include DECIMALS ... If we didn't include decimals to the width, but rounded DOWN instead, that could lead to 3-4px empty space on the right of screen because the total width of all images in a row would be less than that available. Of course, we could not round UP either, as that would lead to last image in a row breaking into a new line.

I diagnosed calculated width, and it was 100% correct. But then I checked the ACTUAL width of images in various browsers, and it seems they do not always respect the decimal pixel width, and choose to apply their own decimal-rounding. See Firefox for example here, rounds my 406.29px to 406.283px:

If I knew that the browser always rounded DOWN the decimal somehow, then there would be no problem. However, since it could have rounded ip to for example 406.295px, this means the last item in the row would be pushed off the edge, and basically break the entire layout.

I have now rounded set width to ONE decimal (for example 406.2px), which seems to be respected by browsers, and seems to have solved the problem.

Kat · 17 Nov 2016, 15:17

mjau-mjau wrote:Fixed the justified issue. See demo. Also updated X3 release to X3 0.21.3

Your update fixed the layout in Chrome and Firefox but still not in Internet explorer
Can you check please.

Also is it possible to display the audio plugin just on certain page ?

18 Nov 2016, 00:01

Your update fixed the layout in Chrome and Firefox but still not in Internet explorer

Could you please try again? We use Cloudflare page-caching for our demo gallery, which also instructs browsers to CACHE pages for at least 30 minutes ... This means it could have been showing the previous 0.21.2 in your IE browser.

I have successfully deep-tested latest X3 version in Internet Explorer without flaws. I have tested navigate TO-, refreshing page, and resizing screen:

18 Nov 2016, 00:08

Also is it possible to display the audio plugin just on certain page ?

Not really. How did you intend to manage the audio playing state if the player gets enabled/disabled on a per-page basis? If visitor is listening to music, you will just turn it off when they get to certain pages? Restart it without visitors knowledge when they get back to a page where audio is enabled again?

This could probably be achieved with some basic custom JS/CSS, but sounds like a "can-o-worms".

Perhaps you could let me know exactly WHY you want the audio to be inaccessible from a certain page?

Kat · 18 Nov 2016, 05:39

mjau-mjau wrote: Could you please try again? We use Cloudflare page-caching for our demo gallery, which also instructs browsers to CACHE pages for at least 30 minutes ... This means it could have been showing the previous 0.21.2 in your IE browser.

I deleted the cache files from IE still showed the previous 0.21.2 and the strange thing is when i tested your justified example from my panel, it's worked fine. What i had to do is delete my page and recreate a new one. Now it's ok with wide, default, narrowest.

Can you please look for narrow and narrower because it's still doesn't show right here :

Kat · 18 Nov 2016, 09:52

mjau-mjau wrote: Perhaps you could let me know exactly WHY you want the audio to be inaccessible from a certain page?

It is for a person who want add sample of his own music this way, on a dedicated page.

I tried this and some other variation, but it doesn't work :

}
.noaudio #x3_plugin_buttons >button#button_audioplayer{
 display:none;
}

then adding in the page where needed to disable the audio
>détails>Css classes>noaudio

Can you please help me to add the correct custom css?

Thanks

18 Nov 2016, 12:45

Yep, you are right ... It still randomly fails sometimes, less than before, but I know why. The WIDTH of the container element could be decimal-based, but only for layout widths below "default", because they use % sizing. Combine this with the fact that javascript "rounds" the number when we are reading this width into the script, and it could mean that the calculated width of all row items could end higher than the actual decimal-based width of the container, which could lead to broken rows. ANYWAY ... I will deal with this tomorrow once and for all. Looks like I might have to include some 1px "safety margin" procedures, but it will be fixed.

Width of element could be decimal-based:

Yet javascript returns a rounded value :/, which the row is calculated from, thus leading to total width of items possibly breaking at the end of the row.

19 Nov 2016, 05:16

Kat wrote:I tried this and some other variation, but it doesn't work :
Code
.noaudio #x3_plugin_buttons >button#button_audioplayer{
 display:none;
}

You probably need to use the !important attribute, since "display" style is toggled by javascript. This should work:

.noaudio #button_audioplayer {
  display: none !important;
}

Keep in mind, if the audio is already playing, you are effectively preventing the visitor from being able to toggle the audio OFF, until they can see the button again.

19 Nov 2016, 11:39

X3 [0.21.4] released, includes FINAL fix for JUSTIFIED layout bugs.

Now uses window.getComputedStyle() to get exact decimal-based width of justified layout container [divbox=label label-info]Fix![/divbox]
Added 2px "safety margin". * This should not be required with the fix above, which is tested to work under all conditions. However, this safety-margin will basically make sure the justified layout does not break, EVEN if the browser does not manage decimal-based widths as it should.
Justified layout is now only refreshed on browser resize if the container element actually changes width.

Kat · 21 Nov 2016, 08:10

mjau-mjau wrote: X3 [0.21.4] released, includes FINAL fix for JUSTIFIED layout bugs.

That's super, everything works fine again Karl !

mjau-mjau wrote:Keep in mind, if the audio is already playing, you are effectively preventing the visitor from being able to toggle the audio OFF, until they can see the button again.

Yes, you are right. This solution disable only the button not the audio of course. And when audio is playing, the css is

.button_audioplayer.playing

adding >displaying:none wouldn't work either

It must be in some .json file >audio : enable "true" or "false" or in javascript. Implement this per page would it be possible ?

Another exemple is the choice to add audio player on the home page only.

21 Nov 2016, 10:36

Sorry Im not quite sure what you are saying about the audio player. The below didn't work? It should work fine:

.noaudio #button_audioplayer {
  display: none !important;
}

If you want to hide the audio button ONLY if it is NOT playing, then you can use the following code:

.noaudio #button_audioplayer:not(.playing) {
  display: none !important;
}

Kat · 22 Nov 2016, 19:56

mjau-mjau wrote:Sorry Im not quite sure what you are saying about the audio player.

like you said here :

mjau-mjau wrote:Keep in mind, if the audio is already playing, you are effectively preventing the visitor from being able to toggle the audio OFF, until they can see the button again.

If the audio already playing on another page, the audio continue playing even if the button is hidden, one must return to the previous page to stop the music, so it's not what i am looking for.
The second code disable the sound playing on another page only when clicking on the button and the button disappear. It's also a little ackward.

Maybe there is another way to do this like audioplayer:"false" for a page or maybe could you consider to add audioplayer as a "page" plugins too ?

X3Photo Gallery Forums

[0.21] justified layout arrangement18 postsPage 1 of 2

[0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement

Re: [0.21] justified layout arrangement