How would I create this image?

Is that the same AI that continually draws seven fingers on all its photos :slight_smile:

I gave you the right answer. Can you see the difference between these two.

3 Likes

No I can’t.

How do I fix this?

Is it both the circle and the half circle becoming disfigured, or only the circle?

How do I prevent that?

https://jsfiddle.net/txuz1myf/3/

how doifixthat

pic2

How do I prevent it from squishing?

squishing

I assume your screen width is less than the 47px so the flex shrink over-rides the width and shrinks it smaller. You could either set a min-width of 47px or probably better to add flex-shrink:0 to the button .exitE.

.exitE {
 flex-shrink:0;
}
1 Like

I had wanted to separate this out to make it easier for myself, but it made it more complicated.

I want to turn this into a modal button:

modal button

Where it opens into a video.

I have done this before, but I am stuck.

Without the button being visible here, I can’t fix anything.

Here’s partially the full code: https://jsfiddle.net/rvf08b47/4/
The footer appears at the end.

This one has all the video stuff working in it.

(function manageOpenModel() {
    function openModal(target) {
        const modal = document.querySelector(target);
        modal.classList.add("active");
        modal.querySelector(".curtain").classList.add("slide");
         //modal.querySelector(".wrapB").classList.add("visible");
    }

    function addPlayerToButtons() {
        const modalButtons = document.querySelectorAll(".playButtonB");
        modalButtons.forEach(function (button, index) {
            button.addEventListener("click", function (event) {
                modalButtons.forEach(function (markAsPlayed) {
                    markAsPlayed.classList.remove("played");
                });
                button.classList.add("played");
                //const target = event.currentTarget.dataset.destination;
                //openModal(target);
                openModal(event.currentTarget.dataset.destination);
                if (index === 0) {
                    //Listening
                    players.add(".buttonA", {
                        videoId: "yq5KBfbmark"
                    });
                
                }
            });
        });
    }
    addPlayerToButtons();
}());
(function manageCloseModel() {
    function removePlayer() {
        videoPlayer.destroyPlayers();
    }

    function closeModal(modal) {
        modal.classList.remove("active");
        modal.querySelector(".curtain").classList.add("hide");
        modal.querySelector(".wrapB").classList.remove("visible");
        removePlayer();
    }

    function addCloseEventToModals() {
        const closeModals = document.querySelectorAll(".closeB");
        closeModals.forEach(function (modal) {
            modal.addEventListener("click", function (event) {
                //const currentModal = event.target.closest(".modal");
                //closeModal(currentModal);
                closeModal(event.target.closest(".modalB"));
            });
        });
    }
    addCloseEventToModals();
}());

What happened to the button, why is it not there?

buttonnotthere

jhhjh

    <!--<div class="btn-wrap">
      <button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
    </div>-->
    
        <div class="btn-wrap">
      <button data-destination="#ba" class=" playButtonB" type="button" title="Exit" a
.btn-wrap {
  position: relative;
  z-index: 0;
  padding: 0 0;
  margin: 23px 0 0;
  display: flex;
  align-items: center;
}

.btn-wrap:before,
.btn-wrap:after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background: #0059dd;
  transform: translatey(1px);
}

.btn-wrap:before {
  margin-right: 5px;
}

.btn-wrap:after {
  margin-left: 5px;
}


.playButtonB {
  position: relative;
  z-index: auto;
  margin: 0 auto;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: transparent;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  cursor: pointer;
}

.playButtonB:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -11px;
  top: -11px;
  width: 57px;
  height: 30px;
  border: 1px solid #0059dd;
  border-bottom: transparent;


  border-radius: 30px 30px 0 0;

  pointer-events: none;
}

Continuing

Now I have this: https://jsfiddle.net/Lb9hp4k8/3/

      <div class="btn-wrap">
        <button data-destination="#ba" class="playButtonB" type="button" title="Open" aria-label="Open"></button>
      </div>


      <div id="ba" class="modalB">
        <div class="inner-modalB">
          <div class="ratio-keeper">

            <div class="video buttonA"></div>

            <div class="buttonA"></div>
            <div class="curtain"></div>
          </div>
          <button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
        </div>
      </div>

That added a ton of extra whitespace.

trytytyt

 <div class="containerC hide">
    <div class="inner-container">
      <div class="flex">
        <div class="blue-margin-bottom">
          <svg width="136" height="136" viewBox="0 0 136 136">
            <rect x="0" y="0" width="136" height="136" fill="#0059dd" />
            <rect x="4" y="4" width="128" height="128" fill="black" />
            <rect x="8" y="8" width="120" height="120" fill="#0059dd" />
            <rect x="12" y="12" width="112" height="112" fill="black" />
            <rect x="16" y="16" width="104" height="104" fill="#0059dd" />
            <rect x="20" y="20" width="96" height="96" fill="black" />
            <rect x="24" y="24" width="88" height="88" fill="#0059dd" />
            <rect x="28" y="28" width="80" height="80" fill="black" />
            <rect x="32" y="32" width="72" height="72" fill="#0059dd" />
            <rect x="36" y="36" width="64" height="64" fill="black" />
            <rect x="40" y="40" width="56" height="56" fill="#0059dd" />
            <rect x="44" y="44" width="48" height="48" fill="black" />
            <rect x="48" y="48" width="40" height="40" fill="#0059dd" />
            <rect x="52" y="52" width="32" height="32" fill="black" />
            <rect x="56" y="56" width="24" height="24" fill="#0059dd" />
            <rect x="60" y="60" width="16" height="16" fill="black" />
            <rect x="64" y="64" width="8" height="8" fill="#0059dd" />
          </svg>
        </div>
        <div class="orange-margin">
          <h1 class="title-text">text</h1>
        </div>
        <div class="yellow-padding-margin">
          <h2 class="center-text">text</h2>
        </div>
      </div>


      <div class="btn-wrap">
        <button data-destination="#ba" class="playButtonB" type="button" title="Open" aria-label="Open"></button>
      </div>


      <div id="ba" class="modalB">
        <div class="inner-modalB">
          <div class="ratio-keeper">

            <div class="video buttonA"></div>

            <div class="buttonA"></div>
            <div class="curtain"></div>
          </div>
          <button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
        </div>
      </div>
    </div>


    <footer class="margin-top my-footer">
      <ul class="footer-top">
        <li><a href="#" target="_blank">text</a></li>
        <li class="divider"><a href="#" target="_blank">text</a></li>
        <li><a href="#" target="_blank"><span class="green-text">text</span><span class="orange-text">text</span></a>
        </li>
      </ul>
      <div class="footer-mid">text</div>
      <div class="footer-base">text</div>
    </footer>
  </div>
</div>

You haven’t added the code for the exitA:after assuming that you are changing that button.

You will need to add the btnwrap div and then change its position to absolute to match the original button position.

.btn-wrap {
  position: absolute;
  inset:auto 0 -23px 0;
  z-index: 9;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

You will need to remove the transform;translate from your original styles as the button is now inside the btnwrap.

jsfiddle.net_rvf08b47_1_

You hide the actual button to start with so you will also need to hide the line as well. You should be able to do this using :has on the btn-wrap.

e.g.

.btn-wrap:not(:has(.visible)){
opacity:0;
}

I removed a bunch of code here: https://jsfiddle.net/4uaf0ytz/4/

Maybe easier to figure out.

One click and the footer is visible.


That isn’t what I want though:

I updated it here:

Post: #28

https://jsfiddle.net/Lb9hp4k8/3/

I just want the button to be on the screen.

It is hidden.

I can’t figure out how to have it be on the screen.

Clicking on it opens the modal.

The one for this is .modalB

.modalA,
.modalB {
  /*background: rgba(0, 0, 0, 0.4);*/
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  border-radius: 50%;
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  background:
    repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.modalA.active,
.modalB.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  padding: 8px 8px;
}
````Preformatted text`

I’m getting confused somewhere: https://jsfiddle.net/32ksca6n/

confused

Full partially working code: https://jsfiddle.net/q3msokj9/

Does the html have to be fixed?

or, maybe the css needs to be fixed.

If I remove this all the extra white space is gone:

     <div id="ba" class="modalB">
        <div class="inner-modalB">
          <div class="ratio-keeper">

            <div class="video buttonA"></div>

            <div class="buttonA"></div>
            <div class="curtain"></div>
          </div>
          <button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
        </div>
      </div>
    </div>

html:

  <div class="containerC hide">
    <div class="inner-container">
      <div class="flex">
        <div class="blue-margin-bottom">
          <svg width="136" height="136" viewBox="0 0 136 136">
            <rect x="0" y="0" width="136" height="136" fill="#0059dd" />
            <rect x="4" y="4" width="128" height="128" fill="black" />
            <rect x="8" y="8" width="120" height="120" fill="#0059dd" />
            <rect x="12" y="12" width="112" height="112" fill="black" />
            <rect x="16" y="16" width="104" height="104" fill="#0059dd" />
            <rect x="20" y="20" width="96" height="96" fill="black" />
            <rect x="24" y="24" width="88" height="88" fill="#0059dd" />
            <rect x="28" y="28" width="80" height="80" fill="black" />
            <rect x="32" y="32" width="72" height="72" fill="#0059dd" />
            <rect x="36" y="36" width="64" height="64" fill="black" />
            <rect x="40" y="40" width="56" height="56" fill="#0059dd" />
            <rect x="44" y="44" width="48" height="48" fill="black" />
            <rect x="48" y="48" width="40" height="40" fill="#0059dd" />
            <rect x="52" y="52" width="32" height="32" fill="black" />
            <rect x="56" y="56" width="24" height="24" fill="#0059dd" />
            <rect x="60" y="60" width="16" height="16" fill="black" />
            <rect x="64" y="64" width="8" height="8" fill="#0059dd" />
          </svg>
        </div>
        <div class="orange-margin">
          <h1 class="title-text">text</h1>
        </div>
        <div class="yellow-padding-margin">
          <h2 class="center-text">text</h2>
        </div>
      </div>


      <div class="btn-wrap">
        <button data-destination="#ba" class="playButtonB" type="button" title="Open" aria-label="Open"></button>
      </div>


      <div id="ba" class="modalB">
        <div class="inner-modalB">
          <div class="ratio-keeper">

            <div class="video buttonA"></div>

            <div class="buttonA"></div>
            <div class="curtain"></div>
          </div>
          <button class="closeB" type="button" title="Close" aria-label="Close">&times</button>
        </div>
      </div>
    </div>


    <footer class="margin-top my-footer">
      <ul class="footer-top">
        <li><a href="#" target="_blank">text</a></li>
        <li class="divider"><a href="#" target="_blank">text</a></li>
        <li><a href="#" target="_blank"><span class="green-text">text</span><span class="orange-text">text</span></a>
        </li>
      </ul>
      <div class="footer-mid">text</div>
      <div class="footer-base">text</div>
    </footer>
  </div>
</div>

I still have to figure out how to:

add this:

function showContainer(containerSelector, heartSelector, exitSelector) {
        const container = document.querySelector(containerSelector);
        const heartPiece = document.querySelector(heartSelector);
        const exitButton = document.querySelector(exitSelector);

        container.classList.remove("hide");


        heartPiece.addEventListener("animationend", function () {
            //if (e.propertyName !== 'opacity') return;
            container.classList.add("slide");
        });

        container.addEventListener("animationend", function (event) {
            if (event.animationName !== "slide") {
                return;
            }
            exitButton.classList.add("visible");
        });
    }



    function resetPage() {

        showContainer(
            ".video-containerB",
            ".video-containerB .heart",
            ".exitB"
        );
    }

to this:

Keeping this same format structure:

    function openModal(target) {
        const modal = document.querySelector(target);
        modal.classList.add("active");
        modal.querySelector(".curtain").classList.add("slide");
         //modal.querySelector(".wrapB").classList.add("visible");
    }

I did not think I would run into issues doing this because I have done it before.

I can try removing most of the code again here: https://jsfiddle.net/709fn6s5/1/

The white space is still there, I don’t know how to remove it.

or, I don’t know what I am doing.

The modal that opens is tiny, I have no idea why.

The css that is set for the footer might be preventing it from expanding full screen,

I have no idea.

I don’t know how to fix this.

And the animation or transition is not working on the curtain.

One thing at a time.


I am only seeing this now:

confused

After I click this:

fgfdgfdg

I can’t figure this out.

This should be removed from the code because I am not using it.

I did that here: https://jsfiddle.net/gbqz7ys8/1/

/*(function managePageE() {
    function hideContainer(containerSelector) {
        const container = document.querySelector(containerSelector);
        container.classList.add("hide");
    }

    function showContainer(containerSelector) {
        const container = document.querySelector(containerSelector);
        container.classList.remove("hide");
    }

    function resetPage() {
        hideContainer(".containerC");
        showContainer(".containerB");
    }

    function exitClickHandler() {
        resetPage();
    }
    const exit = document.querySelector(".playButtonB");
    exit.addEventListener("click", exitClickHandler);
}());*/

Here’s the working video modal code to compare: https://jsfiddle.net/e61gbzfy/

I gave you the answers but you ignored them mostly :slight_smile:

In this fiddle:

playbuttonB is not showing because it has opacity:0. If you give it opacity:1 it will show. Then you need to remove the transform as I already mentioned .

I would set the btn-wrap to take up some of the room that your modal is occupying.

.btn-wrap {
    position: absolute;
    z-index: 0;
    padding: 0 0;
    margin: 23px 0 0;
    display: flex;
    align-items: center;
    inset: 0;
}

The space under the button is from modalB which just has opacity:1 but takes up space so no idea what that’s for.

I am up to adding in the animation stuff now.

https://jsfiddle.net/2mhbak1r/

adding this:

function showContainer(containerSelector, heartSelector, exitSelector) {
        const container = document.querySelector(containerSelector);
        const heartPiece = document.querySelector(heartSelector);
        const exitButton = document.querySelector(exitSelector);

        container.classList.remove("hide");


        heartPiece.addEventListener("animationend", function () {
            //if (e.propertyName !== 'opacity') return;
            container.classList.add("slide");
        });

        container.addEventListener("animationend", function (event) {
            if (event.animationName !== "slide") {
                return;
            }
            exitButton.classList.add("visible");
        });
    }



    function resetPage() {

        showContainer(
            ".video-containerB",
            ".video-containerB .heart",
            ".exitB"
        );
    }

to this:

Keeping this same format structure:

    function openModal(target) {
        const modal = document.querySelector(target);
        modal.classList.add("active");
        modal.querySelector(".curtain").classList.add("slide");
         //modal.querySelector(".wrapB").classList.add("visible");
    }

I think I would be adding this:

window.onload = function () {
    const container = document.querySelector(".video-containerA");
    const heartPiece = document.querySelector(".heart");
    const exitButton = document.querySelector(".exitA");

    // Make the heart piece visible
    heartPiece.classList.add("visible");

    // Add event listener to the heart piece
    heartPiece.addEventListener("transitionend", function () {
        container.classList.add("slide");
    });

    // Add event listener to the container
    container.addEventListener("transitionend", function (event) {
        if (event.propertyName !== "transform") {
            return;
        }
        exitButton.classList.add("visible");
    });
};

to this:

    function openModal(target) {
        const modal = document.querySelector(target);
        modal.classList.add("active");
        modal.querySelector(".curtain").classList.add("slide");
         //modal.querySelector(".wrapB").classList.add("visible");
    }

Here was my first attempt: https://jsfiddle.net/m6o9q74h/1/

function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".curtain").classList.add("slide");

    const container = document.querySelector(".inner-modalB");
    const heartPiece = document.querySelector(".heart");
    const playButton = document.querySelector(".playButtonB");

    // Make the heart piece visible
    heartPiece.classList.add("visible");

    // Add event listener to the heart piece
    heartPiece.addEventListener("transitionend", function () {
        container.classList.add("slide");
    });

    // Add event listener to the container
    container.addEventListener("transitionend", function (event) {
        if (event.propertyName !== "transform") {
            return;
        }
        exitButton.classList.add("visible");
    });
}

Here was my 2nd attempt: https://jsfiddle.net/m6o9q74h/3/

function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".curtain").classList.add("slide");

    modal.querySelector(".inner-modalB");
    modal.querySelector(".heart");
    modal.querySelector(".playButtonB");

    // Make the heart piece visible
    modal.classList.add("visible");

    // Add event listener to the heart piece
    modal.addEventListener("transitionend", function () {
        modal.classList.add("slide");
    });

    // modal event listener to the container
    modal.addEventListener("transitionend", function (event) {
        if (event.propertyName !== "transform") {
            return;
        }
        modal.classList.add("visible");
    });
}

Here is my 3rd attempt: https://jsfiddle.net/mkpywhj8/4/

(function manageOpenModel() {
function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".curtain").classList.add("slide");

    const container = modal.querySelector(".inner-modalB");
    const heartPiece = modal.querySelector(".heart");
    const playButton = modal.querySelector(".playButtonB");

    // Make the heart piece visible
    heartPiece.classList.add("visible");

    // Add event listener to the heart piece
    heartPiece.addEventListener("transitionend", function () {
        container.classList.add("slide");
    });

    // Add event listener to the container
    container.addEventListener("transitionend", function (event) {
        if (event.propertyName !== "transform") {
            return;
        }
        playButton.classList.add("visible");
    });
}

    function addPlayerToButtons() {
        const modalButtons = document.querySelectorAll(".playButtonB");
        modalButtons.forEach(function (button, index) {
            button.addEventListener("click", function (event) {
     
                //const target = event.currentTarget.dataset.destination;
                //openModal(target);
                openModal(event.currentTarget.dataset.destination);
                if (index === 0) {
                    //Listening
                    players.add(".buttonA", {
                        videoId: "yq5KBfbmark"
                    });
                
                }
            });
        });
    }
    addPlayerToButtons();
}());

I would be able to use transition here because it is not being hidden.

So far I have not been able to figure this out.