How would I create this image?

I’m just going to have text in there instead.

Why isn’t the text size big, why is the close button not on the screen?

https://jsfiddle.net/vL7tmnkd/3/

(function manageButtonOpen() {

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

    function addLinkToButton() {
        const modalButton = document.querySelector(".playButtonB");
        modalButton.addEventListener("click", function (event) {
            //const target = event.currentTarget.dataset.destination;
            //openModal(target);
            openModal(event.currentTarget.dataset.destination);
        });
    }
    addLinkToButton();

}());

(function manageButtonClose() {

    function closeModal(modal) {
        modal.classList.remove("active");
    }

    function addCloseEventToModal() {
        const closeModalElement = document.querySelector(".closeB");
        closeModalElement.addEventListener("click", function () {
            closeModal(document.querySelector(".modalB"));
        });
    }
    addCloseEventToModal();
}());

text size

Button is there, why is the font size not big?

https://jsfiddle.net/gao6b7u5/

iuyiyuiuy

  <div id="ba" class="modalB">
        <div class="inner-modalB">
      
        <div class="textOne">
          <h1 class="center-text">text</h1>
        </div>
        <div class="textTwo">
          <h2 class="center-text">text</h2>
        </div>
.textOne {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 40px;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-style: normal;
  background: none;
}


.textTwo {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 40px;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family:"Karla", sans-serif;
  font-weight: 500;
  font-style: normal;
  background: none;
}

Adding color behind text, how do I make the length of the line shorter?

https://jsfiddle.net/gao6b7u5/4/

color behind text

You’ve added and deleted about 20 fiddles since I looked at this and can’t keep track.

In one of the fiddles you posted you just needed to stretch the container to get the wide blue border around the circle.

This is the element that is only as wide as its content so you need to stretch it with flex.

.containerC {
flex: 1 0 0;
}

You’ll have to work backwards from there as some of those fiddles are gone and you changed all the others also.

(When you debug try adding a background color to each container and you will see whether its full width or shrunk to the middle.)

That is already being done.

.video-containerA,
.video-containerB,
.video-containerC,
.inner-modalB{
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

I’m lost here:



(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"
                    });
                
                }
            });
        });
    }

There’s no errors in the js here: https://jsfiddle.net/7ycoun2s/1/

I can’t get the curtain to move.

I’m lost here: https://jsfiddle.net/7ycoun2s/6/

(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 playButtonB = 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;
      }
      playButtonB.classList.add("visible");
    });
  }

I did do this:

.video-containerA .heart,
.inner-modalB .heart{
  transition: opacity 3s ease-in 1.5s;
}

.video-containerA.slide .curtain,
.inner-modalB.slide .curtain {
  transition: 8s ease-in-out;
  transform: translateY(-100%);
}

I got the curtain to go up here: https://jsfiddle.net/302ymwsq/1/

But the heart should fade in first:

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



   /* const container = modal.querySelector(".inner-modalB");
    const heartPiece = modal.querySelector(".heart");
    const playButtonB = 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;
      }
      playButtonB.classList.add("visible");
    });*/


  }

Now the heart fades in: https://jsfiddle.net/uLtgz5pr/1/

after the heart fades in, the curtain should go up.

after the heart fades in, the curtain should go up.

I did that here: https://jsfiddle.net/0ksty6br/

now, after the curtain goes up, .closeB should fade in.

I did that here: https://jsfiddle.net/rhyxuavm/

To disable the button after it is clicked once, I did this:

https://jsfiddle.net/zbm3jhq1/

Is that fine?

.playedB{
  background-image: linear-gradient(135deg, #ff6bff 0%, #00e6e6 100%);
  pointer-events: none;
}


  function addPlayerToButtons() {
    const button = document.querySelector(".playButtonB");

    button.addEventListener("click", function(event) {
      button.classList.remove("playedB");
      button.classList.add("playedB");
      openModal(event.currentTarget.dataset.destination);
      //Listening
      players.add(".buttonA", {
        videoId: "yq5KBfbmark"
      });
    });
  }

  addPlayerToButtons();
}());

Or do I do this instead?
https://jsfiddle.net/zbm3jhq1/1/

or do I do both in the code?

function addPlayerToButtons() {
  const button = document.querySelector(".playButtonB");

  button.addEventListener("click", function(event) {
    /*button.classList.remove("playedB");
    button.classList.add("playedB");*/
    openModal(event.currentTarget.dataset.destination);
    //Listening
    players.add(".buttonA", {
      videoId: "yq5KBfbmark"
    });

    // Disable the button after it is clicked once
    button.disabled = true;
  });
}

addPlayerToButtons();
}());

or, I can do all of these: https://jsfiddle.net/zbm3jhq1/5/

.playedB{
  background-image: linear-gradient(135deg, #ff6bff 0%, #00e6e6 100%);
  pointer-events: none;
}
function addPlayerToButtons() {
  const button = document.querySelector(".playButtonB");

  button.addEventListener("click", function(event) {
    button.classList.remove("playedB");
    button.classList.add("playedB");
    button.style.pointerEvents = "none"; 
    openModal(event.currentTarget.dataset.destination);
    //Listening
    players.add(".buttonA", {
      videoId: "yq5KBfbmark"
    });

    // Disable the button after it is clicked once
    button.disabled = true;
  });
}

addPlayerToButtons();
}());

It’s fine if you only have a mouse to use. If I tab to the element on the keyboard and press enter then it still works again. You would be better adding the disabled attribute to it.

e.g.

button.disabled = true;

Now you can’t click it or tab to it.

From Bing Copilot:

All of the methods you’ve mentioned are valid ways to disable a button after it’s clicked once, but they have slightly different behaviors:

  1. Using CSS pointer-events: none;: This method will prevent all click events on the button. However, it won’t change the appearance of the button, so users might not realize the button is disabled.
  2. Using JavaScript button.disabled = true;: This method will disable the button and also change its appearance to indicate it’s disabled. This is the most common way to disable a button.
  3. Using both methods: This will definitely disable the button, but it might be overkill since either method should be sufficient on its own.

In general, I would recommend using the JavaScript method (button.disabled = true;) because it provides visual feedback to the user. If you want to change the appearance of the button when it’s disabled, you can do that with CSS. Here’s an example:

CSS

button:disabled {
  background-color: grey;
  cursor: not-allowed;
}

This will change the background color of the button to grey and change the cursor to a “not-allowed” cursor when the button is disabled.

Would you do this?

button:disabled {
   background-image: linear-gradient(135deg, #ff6bff 0%, #00e6e6 100%);
  cursor: not-allowed;
}

https://jsfiddle.net/zbm3jhq1/7/

function addPlayerToButtons() {
  const button = document.querySelector(".playButtonB");

  button.addEventListener("click", function(event) {
    /*button.classList.remove("playedB");
    button.classList.add("playedB");
    button.style.pointerEvents = "none"; */
    openModal(event.currentTarget.dataset.destination);
    //Listening
    players.add(".buttonA", {
      videoId: "yq5KBfbmark"
    });

    // Disable the button after it is clicked once
    button.disabled = true;
  });
}

addPlayerToButtons();
}());

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

disabld

And then I added “Closed” to it. https://jsfiddle.net/zbm3jhq1/8/

closed

    // Disable the button after it is clicked once
    button.disabled = true;

    // Change the title attribute to "Closed"
    button.title = "Closed";
  });
}

addPlayerToButtons();
}());
1 Like

Yes I was going to suggest styling on its disabled state but as you already had classes added to do that it didn’t seem worth the effort but you could simply style via the disabled attribute rather than the class…

As I said that won’t stop keyboard users (and there are very many of those) as its a faster way to navigate and you can tab to the element and press enter rather than reaching for a pointing device. pointer-events only applies to pointers (and fingers).

1 Like

https://jsfiddle.net/nq2Lbwo6/1/

1px looks like 2px on mobile.

And the rest of it that looks off.

Here is how it looks on chrome mobile.

How is that fixed?

Is there a way to adjust that or fix it?

Why are the lines not the same size?

.btn-wrap {
  position: relative;
  z-index: 0;
  padding: 0 0;
  margin: 20px 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;
}

Prompt: 1px looks like 2px on mobile.

From Copilot:

This issue might be related to the device’s pixel density or devicePixelRatio. On some devices, a 1px border may not display evenly on all sides due to the device’s pixel ratio1. This is especially noticeable on devices with a pixel ratio of 1.51.

Here are a few possible solutions:

  1. Adjust the border size: You could try adjusting the border size to 0.5px or 0.75px, although this might result in no border showing at all1.
  2. Use em units: Changing the border size to .1em instead of 1px might work, but the results can vary depending on the device’s pixel density2.
  3. Add a margin: Adding a margin to the div might help. For example, if you have a div with a class of .brand and .col-8, you could try adding a right margin of -1px1.

Please note that these solutions might not work perfectly on all devices due to variations in pixel densities2. It’s a complex issue that many developers face when trying to achieve consistent rendering across different devices2. If these solutions don’t work for you, you might need to use JavaScript to measure the screen and adjust the layout based on the device’s pixel density2. However, this could make the screen appear a bit smaller2.

Would this work? https://jsfiddle.net/6k0s538f/1/

div {
  width: 215px;
  height: 1px; /* adjust as needed */
  background: linear-gradient(to right, blue 0px, blue 79px, black 79px, black 136px, blue 136px, blue 215px);
}

It looks like this on chrome mobile on my iPhone SE.

It looks perfect in chrome and safari iOS

I’d need to test on your device to find a solution unfortunately.