OnClick transition effects, and understanding the markup code


#41

This was all I needed to add, and then that one is done.
https://jsfiddle.net/mk1m2xtn/104/

.playf,.pausef {
  position: relative;
  z-index: 2;  /*layer above the svg*/  
}

#42

How would I apply this opacity transition effect
https://jsfiddle.net/cgtp7pmq/50/

to this code, and is it possible?
https://jsfiddle.net/brxtakyy/3/

As I understand it, this is only meant to effect the background image, and nothing else.

One is hover, the other is onclick, but I don't think that should be an issue.


#43

You'll need to solve your post #34 question before I can go any further with you.

It's not fixing this broken layout that is important, but rather that you are able to take all the info I provided and solve the problem. It was the lesson and how you were able to handle it that was important.

Go back and finish that, rather than ignoring the hints I gave.
We don't want solve all your problems for you, that just keeps you dependent.


#44

That's what I wanted to know before,

So, I need to do more than just adding this?
https://jsfiddle.net/mk1m2xtn/104/

.playf,.pausef {
  position: relative;
  z-index: 2;  /*layer above the svg*/  
}

#45

I fixed that code here:
https://jsfiddle.net/w5ox6ome/

That's not what you mean?


#46

Yeah, that is what I meant.

Now why did, what you did, fix it?
(P.S. I know the answer, just want to make sure you know it)


#47

Which way should I go with?

This works:
https://jsfiddle.net/w5ox6ome/31/

.playButtonsc {
  width: 266px;
  position: relative;
  overflow: hidden;
}

This works:
https://jsfiddle.net/w5ox6ome/36/

.playButtonsc {
  width: 266px;
  height: 50px;
  position: relative;
}

This works:
https://jsfiddle.net/w5ox6ome/

.playButtonsc {
  width: 266px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

This doesn't work:
https://jsfiddle.net/w5ox6ome/40/

.playButtonsc {
  width: 266px;
  position: relative;
}

#48

It was missing:
position: relative;

And without it, the lines would not be positioned inside the audio player.


#49

That is because your child floats are no longer contained by the parent .playButtonsc

Add this to see what is actually happening

.playButtonsc {
  width: 266px;
  position: relative;
  padding:20px 0 0; /*add this*/
  background:red; /*add this*/
}

Any of the first three examples are containing the child floats by either height or overflow (other than visible) and they are acceptable


#50

position: relative; on the parent div established it as the containing block.

That allowed the absolute positioned children to reference their positioning from the parent's box. Rather than from the <body> element


#51

Now we can work on this one:
#42

What would I need to do to get the opacity working on the onclick code?

opacity:
https://jsfiddle.net/cgtp7pmq/60/

    .example {
      background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
      position: relative;
      width: 260px;
      height: 260px;
      border: 3px solid #e77d19;
    }
    
    .example::after {
      content: "";
      background: url("https://i.imgur.com/6wOeaWN.png") 0 -260px;
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .example:hover::after {
      opacity: 1;
      transition: opacity 3.5s;
    }

onclick code:
https://jsfiddle.net/nkvf38r5/86/

 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
   border: 3px solid #0059dd;
 }
 
 .playButtonb.activated {
   border: 3px solid #e77d19;
   background-position: 0 -260px;
 }
 
 .playButtonb::before,
 .playButtonb::after {
   content: "";
   position: absolute;
   top: 0;
   left: 83px;
   width: 3px;
   height: 100%;
   background: #0059dd;
 }
 
 .playButtonb::after {
   left: 174px;
 }
 
 .playButtonb.activated::before,
 .playButtonb.activated::after {
   background: #e77d19;
 }

#52

This uses opacity to simulate a fade in background-image swap. Requires two different elements to create that effect with opacity. Due to the fact that background-image does not transition.

It uses your existing sprite image, but it's no longer a sprite setup where it changes bg position on the same element.

fade-in-bg.zip (2.3 KB)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Background Image Fade In</title>
<style>
.playButtonb {
  position: relative;
  margin: 0 auto;
  width: 260px;
  height: 260px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 0;
}
.playButtonb::before {
  content: "";
  position: absolute;
  top:-3px; left:-3px;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 -260px;
  /*transitions*/
  opacity: 0;
  border:3px solid #0059dd;
  transition: all 2s;
}
.playButtonb.active {
 /*javascript activates this class*/
}
.playButtonb.active::before {
  opacity: 1;
  border: 3px solid #e77d19;
}

/*=== Vertical Lines ===*/
.lines::before,
.lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
  transition: all 2s;
}
.lines::after {
  left: 174px;
}
.playButtonb.active .lines::before,
.playButtonb.active .lines::after {
  background: #e77d19;
}

/*=== SVG styles ===*/
.initialb,
.pauseb,
.playb,
.speakerb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.initialb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}
.pauseb,
.playb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}
.speakerb {
  fill: #1ed760;
}
.hideb {
  display: none;
}
</style>
</head>

<body>
<audio></audio>
<div class="playButtonb" data-audio="http://hi5.1980s.fm/;">
  <svg class="initialb" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
  </svg>

  <svg class="pauseb hideb" focusable="false" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      <title>PAUSE</title>
    </path>
  </svg>

  <svg class="speakerb hideb" focusable="false" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    rfill-rule="evenodd">
      <title>VOLUME</title>
    </path>
  </svg>

  <svg class="playb hideb" focusable="false" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
  </svg>
  <div class="lines"></div>
</div>

<script src="audio.js"></script>
</body>
</html>

Understanding how to use image sprites
#56

All of them should say activated:

I fixed it:
https://jsfiddle.net/nkvf38r5/139/


#57

Thank you for this, appreciated.


#58

I have a question, why do we put no-repeat on images that are fixed, that if you remove no-repeat, there would be no visual difference?

https://jsfiddle.net/nkvf38r5/159/


#59

Your welcome

It will be fine without it. That's just an old habit of mine when using the shorthand background property. BG images repeat by default but in this case of a fixed height it's not an issue


#60

How come the lines were put at the bottom, instead of towards the top of the code?

Is there a particular reason for this?

    </svg>
<div class="lines"> </div>

I now see that, doing that wouldn't work on every code, some need to be towards the top.


#61

If I wanted to do this, how would that be done?
https://jsfiddle.net/nkvf38r5/171/

1 colored line down the middle, then it would disappear after it's clicked on.

How would you remove it, after it's clicked on?

.color::before,
.color::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  background: black;
}

.color.activated::before,
.color.activated::after {
  background: none;
}

 <div class="color"></div>

#62

How would I add a transition delay that specifically targets the border?

This isn't working.
transition-delay: border 3s;
https://jsfiddle.net/nkvf38r5/268/


#63

I'm having an issue with Player B, the one that uses the simple version of the image sprites.
https://jsfiddle.net/ydo7bncu/28/

It's the 2nd player.

Click on Player B, then click on another player, Player B should stay on the blue image and not change.

It was set to active when it should've been activated.
https://jsfiddle.net/ydo7bncu/30/

Fixed.