How to fadeout the play svgs

In case I wanted to have each one be a different image. So I don’t forget how to do it, but by now I have lots of these saved.

The buttons are still not placed in the middle, how is that fixed?

They look in the middle to me but I’m not going to get the ruler out :slight_smile:

Scroll up and down, there is a lot of empty space there.

Now do you see?

Here is a working code of it centered if that might help.

This isn’t your code though. https://jsfiddle.net/ufz3b0yx/

Ah yes that’s only on very small height screens so I didn’t notice.

I’ve tweaked things a bit so theres no scroll on that screen.

1 Like

The buttons jump up after they are clicked.

You can test this one on your snippet.

Before click.

After click.

Which is probably why I can’t scroll further down.

That only happens if you are on a screen smaller than the total button height.

I’ll have a play around with it and see what can be done.

Now you removed the right scroll bar from the code, how come?

I’m just testing things out to see what happens.

The problem is that if the screen height is less than the height of the buttons the centring still centres the buttons.

I’ll have to look at it in the morning as too tired to look now.

1 Like

Ok I’ve tweaked some more and updated the codepen again (I can’t be bothered with multiple codepens).

I believe this addresses the jump issue although it wasn’t a real issue as you had to be on a screen smaller than the buttons anyway to see it happen.

I don’t see a problem with scrolling but you have to be careful with pointer-events none or you can disable scrolling with the mouse.

There’s bound to be other tweaks needed with timing and positions etc but try and work them out for yourself first before commenting. Only when you have tried and failed post for help.:slight_smile:

If this format suits you then I believe the JS can be greatly simplified now but that would be a question for the js forum.

1 Like

If it helps I’ve added clicks to all the play buttons so the relevant container is shown.

I used a data attribute on the button to show where its destination is.

 <button data-destination=".play1" class="playa thePlay" type="button" aria-label="Open">
...

  <button data-destination=".play2" class="playa thePlay" type="button" aria-label="Open">

etc....

It’s probably not the right way to do it but help you get started.

You would then need to add the video code and utilise those data attributes to find the player etc. The video code is too complicated for me to look at and a question for the js forum.

1 Like

When I get up to this, I was thinking of first, getting the js working with the html set like this.

<div class="outer">
</div>

<div class="playButtonContainer">
</div>

Then after that is done, then adjust the css accordingly.

That’s what I was thinking.

I noticed something.

My code has a right scrollbar at this view. https://jsfiddle.net/2xndajtp/

Your code is missing a right scrollbar at the same view level.

How would that be fixed?

Making the height smaller in your code, does produce a scrollbar, but the screen does not fill the whole area as how it looks in my code.

I’m not sure what you mean as my demo gets a scrollbar when needed and can scroll to view it.

Here’ what I see although its hard to see the Mac scrollbar.

Are you sure you are not looking at the fiddle’s scrollbar as that has nothing to do with my code.

I downloaded the snippet source code from https://jsitor.com/

That’s the html we’ve been working with and I have adjusted all the CSS?

It’s the JS that needs to updated.

Never do JS first. Get it working without JS and then enhance.

1 Like

I’ve no idea what that is supposed to mean.