Replicating a transition effect


#83

I would not change the css with js as that creates inline styles and ruins the specificity of the layout. Its ok for multiple progressions where you are progressively altering something but for one off changes simply add or remove classes as required and use css for what is was intended.

e.g.

.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

.playerStatus2 .lines:before,
.playerStatus2 .lines:after {background:yellow}


.playerStatus3 .lines:before,
.playerStatus3 .lines:after {background:teal}

and so on…

You would then use JS to add the appropriate class (i.e. playerStatus1 or 2 or 3 etc.) to .wrap as and when required (a question for Paul in the JS forum although you have enough snippets of JS now to accomplish this task yourself).

This keeps all styling information in the css and easy to change at a later date without touching the jS.


#84

I have an improvement here he just helped me do to it:

But now I have to adjust it to put what you did in here:
https://jsfiddle.net/zb6mkug3/796/

  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
//       color = "red";
//     }
//     if (color) {
      const wrapper = document.querySelector(".wrapg");
      wrapper.style.borderColor = color;
      wrapper.querySelector(".left").style.borderLeftColor = color;
      wrapper.querySelector(".right").style.borderRightColor = color;
    }
  }

I need to remove this which I did, and add your improvement in:


.wrapg .left {
  position: absolute;
  left: 198px;
  top: 0;
  width: 3px;
  height: 100%;
  border-left: solid #0059dd;
}

.wrapg .right {
  position: absolute;
  left: 399px;
  top: 0;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
  border-right: solid #0059dd;
}

#85

I’m confused:
https://jsfiddle.net/zb6mkug3/809/

How would I add this in?

.playerStatus .lines:before,
.playerStatus .lines:after {background:red}
  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      wrapper.style.borderColor = color;
      wrapper.style.background = color;
      wrapper.querySelector("        ").style.background = color;
    }
  }

#86

I tried this:
https://jsfiddle.net/zb6mkug3/812/


     const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }

#87

Works fine for me in Chrome.

The cursor disappears once the video is playing but I assumed that was what you wanted because it does the same in Firefox.

You keep changing topics so I don;t know if this is separate from the questions before or an extension of them?

This is of course JS related and should be answered in your other thread.

I don’t know why you keep adding extra elements for the lines when I have shown you several times how to do it without any extra elements.

Using the code in your latest fiddle you would add the styles like these.

.playerStatus1.wrapg.border,
.playerStatus1 .left,
.playerStatus1 .right {border-color:green}

.playerStatus2.wrapg.border,
.playerStatus2 .left,
.playerStatus2 .right {border-color:yellow}

Those are a little verbose and you don’t really need the multiple dot separated classes except that as you already have them we have to follow suit.

The Js could be changed like this:

 function changeBorderColor(playerStatus) {
    let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      document.querySelector(".wrapg").classList.add(color);
    }
  }

Of course @Paul_Wilkins may have something to say about that. :slight_smile:

Working page:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.jacketc .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #fa33fc;
}

.jacketc .lines::before,
.jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.jacketc .lines::after {
  left: 399px;
}

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  box-sizing: border-box;
  background: #000000;
}

.wrapg.border {
  border: 3px solid #0059dd;
}

.wrapg iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 338px;
}

.wrapg .left {
  position: absolute;
  left: 198px;
  top: 0;
  width: 3px;
  height: 100%;
  border-left: solid #0059dd;
}

.wrapg .right {
  position: absolute;
  left: 399px;
  top: 0;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
  border-right: solid #0059dd;
}

.hide {
  display: none;
}

.playerStatus1.wrapg.border,
.playerStatus1 .left,
.playerStatus1 .right {border-color:green}

.playerStatus2.wrapg.border,
.playerStatus2 .left,
.playerStatus2 .right {border-color:yellow}





</style>
</head>

<body>
<div class="jacketc "> <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="lines"></div>
</div>
<div class="wrapg border hide">
  <div class="video " data-id="M7lc1UVf-VE"></div>
  <div class="left "></div>
  <div class=" right"></div>
</div>

<script>
(function iife() {
  "use strict";
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrapg");
    hide(cover);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";
  let player;
  const load = document.querySelector(".jacketc");

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function loadClickHandler() {
    loadPlayer();
    player.playVideo();
  }
  load.addEventListener("click", loadClickHandler);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(50); // percent
  }

  function changeBorderColor(playerStatus) {
    let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      document.querySelector(".wrapg").classList.add(color);
    }
  }

  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

</script>

</body>
</html>

Of course this has nothing to do with the transition effects we’ve been talking about in this thread ?


#88

I’m still confused on how I would set this up.

***** You had just showed me I could do it like this:

.playerStatus .lines:before,
.playerStatus .lines:after {background:green}

I’m not referring to transition effects at all.

This is the latest:

I’m not using left / right in the CSS

I tried this:
https://jsfiddle.net/zb6mkug3/812/

     const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }
.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}


  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }

#89

You have all the pieces to the jigsaw (I just gave them to you). Apply them in the right context and a little thought about what you are doing rather than blindly copying and pasting stuff.

This is what your latest would look like with the new code I suggested.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.jacketc {
	position: relative;
	width: 606px;
	height: 344px;
	cursor: pointer;
	margin-top: 45px;
	border-radius: 25px;
	border: 3px solid #0059dd;
	box-sizing: border-box;
	background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.jacketc .play {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	fill: #fa33fc;
}
.jacketc .lines::before, .jacketc .lines::after {
	content: "";
	position: absolute;
	top: 0;
	left: 198px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.jacketc .lines::after {
	left: 399px;
}
.wrapg {
	position: relative;
	width: 606px;
	height: 344px;
	margin-top: 45px;
	cursor: pointer;
	overflow: hidden;
	border-radius: 25px;
	border: 3px solid #0059dd;
	box-sizing: border-box;
	background: #000000;
}
.wrapg iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 600px;
	height: 338px;
}
.wrapg .lines::before, .wrapg .lines::after {
	content: "";
	position: absolute;
	top: 0;
	left: 198px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.wrapg .lines::after {
	left: 399px;
}
.hide {
	display: none;
}

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}


</style>
</head>

<body>
<div class="jacketc "> <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="lines"></div>
</div>
<div class="wrapg hide">
  <div class="video " data-id="M7lc1UVf-VE"></div>
  <div class="lines"></div>
</div>
<script>
(function iife() {
  "use strict";
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrapg");
    hide(cover);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";
  let player;
  const load = document.querySelector(".jacketc");

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function loadClickHandler() {
    loadPlayer();
    player.playVideo();
  }
  load.addEventListener("click", loadClickHandler);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(50); // percent
  }

/*
  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }
  */
  
  function changeBorderColor(playerStatus) {
	const wrapper = document.querySelector(".wrapg");
	let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }


  function onPlayerStateChange(event) {
    changeBorderColor(event.data);

  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };



}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());



</script>
</body>
</html>

Specifically.

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

and…

 function changeBorderColor(playerStatus) {
	const wrapper = document.querySelector(".wrapg");
	let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

#90

Then you are in the wrong thread :slight_smile: (Look at its title)


#91

I don’t understand where this goes:
https://jsfiddle.net/zb6mkug3/813/

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

#92

In the css.

Look at my post I gave you a full working example with everything in place :slight_smile:


#93

It wasn’t set up like this so I was confused:

playerStatus {
  border-color: green
}

.playerStatus .lines:before,
.playerStatus .lines:after {
  background: green
}

#94

I wanted the cursor to stay on pointer without changing.


#95

Good luck with that :slight_smile:

As I said in Chrome it just flickers off for a fraction of a second and seems to occur when you append your scripts so I don’t think there’s anything you can do about it (but I may be wrong).

Its a non-issue anyway and possibly an accessibility aid to tell you not to click yet as the thing hasn’t loaded.


#99

I have 1 minor question in how you wrote this.
How would I write this part the right way:

If I’m not using this part?
(playerStatus === 1)

With that removed the code works how it’s supposed to.
It changes to green right away after it’s clicked.

But then that leaves an empty block { }
https://jsfiddle.net/byw5szgt/10/

function changeColor() {
    if (color = "playerStatus") {

    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

This is what it looked like before
https://jsfiddle.net/zb6mkug3/819/

 if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

#100

You need to ask this in the JS forum as I don;t know what you are doing now. You seemed to be detecting an event change on the player and changing colours accordingly but now you just want to change it whatever?

You probably just need to add the class.

e.g.

function changeColor() {
      wrapper.classList.add("playerStatus");
  }

However I suggest you keep this in your other thread.


#101

Thank you for that, much simpler than using the if’s.

Now the lines change color much faster than using the other way for some reason.

Changes color faster:
https://jsfiddle.net/byw5szgt/16/

Waits for the youtube player to load:
https://jsfiddle.net/zb6mkug3/818/