Making changes to the CSS now that the play buttons are inside their own container

asasass · November 22, 2022, 5:21pm

After trying to add the fan in, code is broken.

The initial screen/splash screen, that should have a different background, than the body, right?

body background, should be given to the body, not splash screen, right?

I would need to set the splash screen to have a different color from the body, which was:

body {
  background: #353198;
}

And so, the splash screen bg color would be anything I wanted.

After I added this in the exitSkip button stopped working.

<button class="exitSkip" type="button"></button>

After the exitSkip button is clicked, or the play is clicked, the fan would be removed, not to return again on the page. How it should work.

Now both are alike, but both broken still.

Circle should be: 380px, not 290px.

Button with image and exitSkip, placed somewhere should be over the fan.

Also, the fan isn’t getting smaller as the window closes or gets smaller.

js version: https://jsfiddle.net/zcp1f7x6/1/

CSS version: https://jsfiddle.net/o40utzc8/

<div class="playButtonContainer with-curtain ">

<div class="fan2">
  <div class="sun"></div>
  <div class="sun"></div>
  <div class="cross"></div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="76 130 381 381">
    <path fill="#000100" stroke="#000000" d="M443.516,362.486C437.80600000000004,364.501,373.29900000000004,353.861,328.165,346.041C365.607,372.43,418.745,410.519,421.357,415.981C427.24100000000004,428.287,406.07000000000005,448.92,400.495,454.495C394.919,460.072,374.285,481.241,361.979,475.358C356.519,472.746,318.42499999999995,419.606,292.03999999999996,382.164C299.859,427.299,310.49899999999997,491.808,308.484,497.517C303.94399999999996,510.378,274.383,509.998,266.498,509.999C258.614,509.999,229.052,510.37800000000004,224.512,497.51800000000003C222.497,491.809,233.137,427.29900000000004,240.958,382.165C214.569,419.607,176.47899999999998,472.74600000000004,171.017,475.358C158.714,481.242,138.077,460.073,132.503,454.497C126.92599999999999,448.922,105.75699999999999,428.28700000000003,111.63899999999998,415.98400000000004C114.25199999999998,410.52000000000004,167.39299999999997,372.427,204.83499999999998,346.04100000000005C159.69899999999998,353.85900000000004,95.19399999999997,364.50200000000007,89.48199999999999,362.48600000000005C76.62099999999998,357.94800000000004,77.00199999999998,328.38700000000006,77.00099999999999,320.50000000000006C77.00099999999999,312.61500000000007,76.62199999999999,283.0540000000001,89.481,278.51700000000005C95.19,276.50100000000003,159.701,287.14200000000005,204.834,294.95900000000006C167.392,268.57000000000005,114.254,230.48000000000008,111.643,225.01900000000006C105.758,212.71600000000007,126.93,192.08200000000005,132.505,186.50400000000008C138.07999999999998,180.93000000000006,158.715,159.75800000000007,171.016,165.64400000000006C176.47899999999998,168.25700000000006,214.572,221.39900000000006,240.95999999999998,258.84200000000004C233.14199999999997,213.70600000000005,222.49899999999997,149.19500000000005,224.515,143.48400000000004C229.05399999999997,130.62500000000003,258.614,131.00200000000004,266.5,131.00100000000003C274.385,131.00100000000003,303.945,130.62500000000003,308.48199999999997,143.48400000000004C310.498,149.19300000000004,299.85699999999997,213.70100000000002,292.03999999999996,258.836C318.429,221.39300000000003,356.518,168.258,361.97999999999996,165.64300000000003C374.28299999999996,159.75800000000004,394.91799999999995,180.92900000000003,400.49499999999995,186.50500000000002C406.06999999999994,192.08,427.24099999999993,212.71500000000003,421.35499999999996,225.02000000000004C418.74299999999994,230.48100000000005,365.60499999999996,268.57500000000005,328.16299999999995,294.96000000000004C373.299,287.141,437.804,276.499,443.51599999999996,278.516C456.37499999999994,283.055,455.99799999999993,312.618,455.99799999999993,320.502C455.99999999999994,328.386,456.37799999999993,357.946,443.51599999999996,362.486Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" transform="rotate(223.25039999999998 266.49965580744913 320.5000132420905)"></path>
  </svg>
</div>

<div class="wrapImage">
  <button class="playa cover spinner" type="button" data-container="play1">
    <span class="color-circle"></span>
  </button>
</div>

PaulOB · November 22, 2022, 5:59pm

Your fan is inside .playButtonContainer which has a width of 290px. It doesn’t get smaller or bigger.

Then they need to be inside the fan container and placed into position absolutely.

Back tomorrow.

asasass · November 22, 2022, 6:03pm

Isn’t there a way for the fan to be set at 380px, and

And for the 1 play button to have its own?

And then the group of play buttons, to have its own?

js version works now, almost good. https://jsfiddle.net/96kcmqj3/

exitSkip works, but now the hover play is all messed up.

    const fan2 = document.querySelector(".fan2")
    if (exitSkipButton) {
      document.querySelector(".fan2").remove();
    }
    const wrapImage = document.querySelector(".wrapImage")
    if (exitSkipButton) {
      document.querySelector(".wrapImage").remove();
    }

asasass · November 23, 2022, 7:52am

At this code here I am trying to have the video fade in over the fan.

I have most of it working.

The video is fading in over the fan.

The issue here is that the video is being cut into a circle.

How do I fix that? https://jsfiddle.net/dm5r01hk/

.containerInitial {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.curtainInitial {
  flex: 1 0 0;
  margin: auto;
  max-width: 676px;
  position: relative;
}

.sun,
.fan2,
.sun:before,
.fence,
.cross:before,
.cross:after,
.fan2 svg {
  position: absolute;
  inset: 0 0 0 0;
}

.fan2 {
  max-width: 380px;
  width: 100%;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 /1;
  position: relative;
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

<div class="containerInitial ">
  <div class="curtainInitial">
    <div class="ratio-keeper">
      <div class="fan2">
        <div class="sun"></div>
        <div class="sun"></div>
        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="76 130 381 381">
          <path fill="#000100" stroke="#000000" d="M443.516,362.486C437.80600000000004,364.501,373.29900000000004,353.861,328.165,346.041C365.607,372.43,418.745,410.519,421.357,415.981C427.24100000000004,428.287,406.07000000000005,448.92,400.495,454.495C394.919,460.072,374.285,481.241,361.979,475.358C356.519,472.746,318.42499999999995,419.606,292.03999999999996,382.164C299.859,427.299,310.49899999999997,491.808,308.484,497.517C303.94399999999996,510.378,274.383,509.998,266.498,509.999C258.614,509.999,229.052,510.37800000000004,224.512,497.51800000000003C222.497,491.809,233.137,427.29900000000004,240.958,382.165C214.569,419.607,176.47899999999998,472.74600000000004,171.017,475.358C158.714,481.242,138.077,460.073,132.503,454.497C126.92599999999999,448.922,105.75699999999999,428.28700000000003,111.63899999999998,415.98400000000004C114.25199999999998,410.52000000000004,167.39299999999997,372.427,204.83499999999998,346.04100000000005C159.69899999999998,353.85900000000004,95.19399999999997,364.50200000000007,89.48199999999999,362.48600000000005C76.62099999999998,357.94800000000004,77.00199999999998,328.38700000000006,77.00099999999999,320.50000000000006C77.00099999999999,312.61500000000007,76.62199999999999,283.0540000000001,89.481,278.51700000000005C95.19,276.50100000000003,159.701,287.14200000000005,204.834,294.95900000000006C167.392,268.57000000000005,114.254,230.48000000000008,111.643,225.01900000000006C105.758,212.71600000000007,126.93,192.08200000000005,132.505,186.50400000000008C138.07999999999998,180.93000000000006,158.715,159.75800000000007,171.016,165.64400000000006C176.47899999999998,168.25700000000006,214.572,221.39900000000006,240.95999999999998,258.84200000000004C233.14199999999997,213.70600000000005,222.49899999999997,149.19500000000005,224.515,143.48400000000004C229.05399999999997,130.62500000000003,258.614,131.00200000000004,266.5,131.00100000000003C274.385,131.00100000000003,303.945,130.62500000000003,308.48199999999997,143.48400000000004C310.498,149.19300000000004,299.85699999999997,213.70100000000002,292.03999999999996,258.836C318.429,221.39300000000003,356.518,168.258,361.97999999999996,165.64300000000003C374.28299999999996,159.75800000000004,394.91799999999995,180.92900000000003,400.49499999999995,186.50500000000002C406.06999999999994,192.08,427.24099999999993,212.71500000000003,421.35499999999996,225.02000000000004C418.74299999999994,230.48100000000005,365.60499999999996,268.57500000000005,328.16299999999995,294.96000000000004C373.299,287.141,437.804,276.499,443.51599999999996,278.516C456.37499999999994,283.055,455.99799999999993,312.618,455.99799999999993,320.502C455.99999999999994,328.386,456.37799999999993,357.946,443.51599999999996,362.486Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" transform="rotate(223.25039999999998 266.49965580744913 320.5000132420905)"></path>
        </svg>
        <div class="cross"></div>
        <div class="wrap embed-youtube ">
          <div class="video embed-youtube  " data-id="djV11Xbc914">
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="exit" type="button" aria-label="Open"></button>
</div>

This was my attempt at fixing it:

The video faded in without it being cut/clipped into a circle.

The fan got all messed up though.

https://jsfiddle.net/z46dxrep/

.sun,
.fan2,
.sun:before,
.fence,
.cross:before,
.cross:after,
.fan2 svg {
  position: absolute;
  inset: 0 0 0 0;
}

/*.fan2 {
  max-width: 380px;
  width: 100%;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 /1;
  position: relative;
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}*/

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

PaulOB · November 23, 2022, 8:32am

I’m out most of the day but I will look when I get back home if you haven’t solved it by then.

If you are trying to do what you had in your other demos then why are you putting the video inside the fan div? Keep it separate as before as they are not the same size and cannot be nested in each other or vixe versa. You have the fan working in all your other demos so why move that element now?

The play button was also in another container placed on top so that would still be the same. Unless you are doing something different now.

Annoyed that you are still using all those divs for the fence though despite the good alternatives I’ve given you:(

Back this evening now,

asasass · November 23, 2022, 8:38am

I have your version of the fence saved.
I have multiple different gradient versions of the fence saved.
I also have versions using svgs for the fence, vertical lines and cross.

Yes, I’m doing something different now.

In order for the video to fade in over the fan, doesn’t it need to be inside the fan container?

This didn’t work: https://jsfiddle.net/0bsen4rc/

or, I wasn’t able to figure it out.

      <div class="cross"></div>

    </div>
    <div class="ratio-keeper">
      <div class="wrap embed-youtube ">
        <div class="video embed-youtube  " data-id="djV11Xbc914">
        </div>
      </div>
    </div>
  </div>

PaulOB · November 23, 2022, 4:25pm

You need to absolutely position the fan and then the video will go on top. Your exit button is also below the fold now because you have placed it below 100% so you should probably move the exit button up one level inside the curtain container…

.fan2{ position:absolute;}

Another problem is that the video is a different aspect ratio to the fan so when you squeeze the window smaller the fan will stick out of the top and bottom of the video. The height of the video will reduce quicker than the height of the circle because of their different aspect ratios.

I don’t know what you expected to happen or whether you were going to hide the fan once the video was displayed.

asasass · November 23, 2022, 4:47pm

How might I be able to add the sun background behind here?

https://jsfiddle.net/9p83Ljf2/

How do I also fix the exit button, something doesn’t seem right with it?

How it is positioned.


  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

.sun {
  mix-blend-mode: soft-light;
}

.sun:before {
  content: "";
  background: radial-gradient(white, yellow 30%, #ff4d00, transparent 70%) no-repeat -20% 100% / 50% 50%;
}

PaulOB · November 23, 2022, 5:24pm

That changes all the dynamics again.

You’ll have to try something like this.

.sun-wrap {
  max-height:102%;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

.sun {
  mix-blend-mode: soft-light;
}

.sun:before {
  content: "";
  background: radial-gradient(white, yellow 30%, #ff4d00, transparent 70%) no-repeat -20% 100% / 50% 50%;
}

<div class="containerInitial ">
  <div class="curtainInitial">
    <div class="ratio-keeper">
       <div class="sun-wrap">
        <div class="sun"></div>
        <div class="sun"></div>
      </div>
     <div class="fence">

etc....

asasass · November 23, 2022, 5:26pm

How come I don’t see anything? https://jsfiddle.net/n90yhL3a/1/

PaulOB · November 23, 2022, 5:53pm

Sorry cut and paste missed out this bit,

.sun,
.sun-wrap,
.sun:before {
  position: absolute;
  inset: 0 0 0 0;
}

e.g.

.sun,
.sun-wrap,
.sun:before {
  position: absolute;
  inset: 0 0 0 0;
}

.sun-wrap {
  max-height:102%;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

.sun {
  mix-blend-mode: soft-light;
}

.sun:before {
  content: "";
  background: radial-gradient(white, yellow 30%, #ff4d00, transparent 70%) no-repeat -20% 100% / 50% 50%;
}

The exit button still needs sorting though.

asasass · November 23, 2022, 5:58pm

What seems to be the issue with it?

The exit button.

PaulOB · November 23, 2022, 6:27pm

It’s almost impossible to place.

There is no point of reference for it apart from the ratio keeper but as the overflow is hidden you can’t drag it outside the black area.

Neither can you let it be in the flow as that will push the black and the sun upwards away from the center.

The logic will have to be rethought.

asasass · November 23, 2022, 10:50pm

I ended up removing the sun and keeping the gradient. I think it was the ratio thing that was expanding the circle. It’s ok. https://jsfiddle.net/8exosbyp/

Now, how to fix the exit button.

asasass · November 24, 2022, 1:50am

I have the sun fan/code here. https://jsfiddle.net/gqp8fevn/

At this code here: https://jsfiddle.net/oehdvnz0/

How would I be able to remove the 1st video from there, and replace it with the spinning fan?

Is that something that is doable?

Only thing staying on that page, is the button container.

Spinning fan, then the buttons below it.

The spinning fan code would replace the video stuff in container1.

With just the buttons under it.

At this link here I added in all the css without messing anything up.

https://jsfiddle.net/6rxtcbvf/3/

At this link here: I added in the javascript: https://jsfiddle.net/6rxtcbvf/5/

When I click on the buttons, the curtains aren’t going up.

Also, Page 1 is going to need to have it’s own button container, because, those will be floating ones.

    <div class="button-container1">
      <button class="exit exitPage3" type="button"><span>Page 3</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span>Page 2</span></button>
    </div>

I think that, if there is no video on a page, I don’t think .exit can be added on as a class. or am I wrong?

const exitButtons = document.querySelectorAll(".exit, .initial, .new");

.exit would be used for video pages, initial, would be for the home page with the fan.
.new would be used to take you to a div somewhere.

I did this, but all the styles from the buttons disappeared, but the buttons take you to the pages without an error.

Seen here: https://jsfiddle.net/1o3kz2a0/

<div class="button-container">
<button class="initial" type="button"><span class="p3">Page 3</span></button>
<button class="new" type="button"><span class="">New</span></button>
<button class=" initial" type="button"><span class="p2">Page 2</span></button>
</div>

If I add this back in I get an error: https://jsfiddle.net/1o3kz2a0/1/

    <div class="button-container">
      <button class="exit exitPage3" type="button"><span>Page 3</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span>Page 2</span></button>
    </div>

Uncaught TypeError: Cannot read properties of null (reading ‘querySelectorAll’) at line 258 col 28

It’s telling me I don’t have any classes called remove, wrap, or container in the html elements listed, when I do.

<div class="container2 hide">
<div class="container ">
<div class="curtain remove">

<div class="container3 hide">
  <div class="container ">
    <div class="curtain remove">

Curtains now go up: https://jsfiddle.net/6rxtcbvf/8/

asasass · November 24, 2022, 12:10pm

I attached a play button to the fan here to get rid of the error.

https://jsfiddle.net/s4p7j9vg/2/

asasass · November 25, 2022, 2:09pm

Having 100 buttons on the screen, what would you suggest, or recommend to change this to?

https://jsfiddle.net/k6q4c2j3/

https://jsitor.com/PwUYiZxFyU

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

asasass · November 25, 2022, 8:58pm

Is there a particular way the buttons should flow on the screen?

PaulOB · November 25, 2022, 9:10pm

Less buttons

That would be down to your design but if you have 100 buttons then only 3 a row is a bt silly.

asasass · November 25, 2022, 9:12pm

Would grid be better to use for the buttons?

Flex still better?

I’m trying to figure out how to reduce the html down to 1 container.

Should I allow the buttons to wrap when the window gets smaller?