Use margins or absolute positioning?

Should it be like this instead?

    <div class="initial ">Links</div>
    <div class="playButton">

If it should be playButton playing, how would I get it to work that way?


Text is below not above.

This looks all messed up.

   <div class="playButton playing">
    <div class="initial ">Links</div>

vs.

Are you saying it should work like this, and if you are, how exactly would I get it to work that way?

<div class="initial ">Links</div>
    <div class="playButton playing">

I was told to use

min-height: 50px;

Wrong answer.

The css would work that way without amendment but you have made your js tag specific so the js would break…

Did you try removing the width and height from playButton in the original set up? You only need the height added when you show it with .playing because the other div is then hidden anyway.

Here once again is how to absolutely place the element.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	position:relative;
	padding:10px;
	background:red;
	border:1px solid #000;
	display:table;
}
.initial {
	width: 260px;
	height: 168px;
	cursor: pointer;
	background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
	border: 3px solid #0059dd;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 30px;
	color: #0059dd;
	cursor: pointer;
	line-height: 100px;
	text-align: center;
}
.playButton.playing {
	width: 50px;
	height: 50px;
	border: none;
	cursor: pointer;
	background-color: #000000;
	margin:auto;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	fill: #aaff00;
	box-Shadow: inset 0 0 0 3px #0059dd;
}
.link div {
	margin: 0 0 12px 0;
}
.link a {
	display: block;
	width: 50px;
	height: 50px;
	margin: -50px 0 0;
	background: black;
	box-Shadow: inset 0 0 0 3px #0059dd;
}
a.x1 {
	margin: 0;
}
a.x2 {
	margin-left: 54px;
}
a.x3 {
	margin-left: 108px;
}
a.x4 {
	margin-left: 162px;
}
a.x5 {
	margin-left: 216px;
}
.hide {
	display: none;
}
.link div:last-child {
	margin-bottom: 0;
}
</style>
</head>

<body>

<div class="wrap">
  <div class="myLink">
    <div class="link">
      <div>
        <a class="x1" href="#" target="_blank"></a>
        <a class="x2" href="#" target="_blank"></a>
        <a class="x3" href="#" target="_blank"></a>
        <a class="x4" href="#" target="_blank"></a>
        <a class="x5" href="#" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="#" target="_blank"></a>
        <a class="x2" href="#" target="_blank"></a>

        <a class="x4" href="#" target="_blank"></a>
        <a class="x5" href="#" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="#" target="_blank"></a>
        <a class="x2" href="#" target="_blank"></a>
        <a class="x3" href="#" target="_blank"></a>
        <a class="x4" href="#" target="_blank"></a>
        <a class="x5" href="#" target="_blank"></a>
      </div>
    </div>
  </div>
  
  <div class="playButton">
    <div class="initial ">Links</div>
    <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <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"></path>
  </svg>

    <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <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"></path>
  </svg>
  </div>

  <audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>
</div>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script> 
text
</body>
</html>
1 Like

Does it work like that in every case?

I can and should use that method for all play buttons?

How do I implement absolute positioning on this?

I removed margin from here:

  .play1,
  .pause1 {
    margin: 2px 284px;
  }
<style>

.wrap {
	position:relative;
	background:red;
	display:table;
}

  .playButton1 {
    width: 600px;
    height: 44px;
cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
  }
  
  .playButton1.playing {
    background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
  }
  
  .play1,
  .pause1 {
  position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
    cursor: pointer;
  }

</style>

<div class="wrap">
<div class="playButton1">
  <svg class="play1" width="39" height="40" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>
  </svg>

  <svg class="pause1" style="display:none;" width="39" height="40" viewbox="0 -3.4 24 24">
    <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
    <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
    <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
    <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
    <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
    <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
  </svg>
</div></div>

<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
(function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton1");
        var player = document.querySelector("#player1");
        player.volume = 1.0;
        if (player.paused) {
            button.classList.add("playing");
            document.querySelector(".playButton1 .play1").style.display = "none";
            document.querySelector(".playButton1 .pause1").style.display = "inline-block";
            player.play();
        } else {
            button.classList.remove("playing");
            document.querySelector(".playButton1 .play1").style.display = "inline-block";
            document.querySelector(".playButton1 .pause1").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
}());
</script>

I got it!!!

  position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
        margin:auto;

Is this how you would do this one?

  .initial2,.pause2,
  .play2,.speaker2 {
      position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
        margin:auto;
  }
<style>

.wrap {
	position:relative;
	background:red;
	display:table;
}

  .playButton2 {
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
    border: 3px solid #0059dd;

  }
  
  .playButton2.playing {
    border: 3px solid #e77d19;
    background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");

  }

  .initial2,.pause2,
  .play2,.speaker2 {
      position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
        margin:auto;
  }







  
  .initial2 {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
  }
  
  .pause2,
  .play2 {
    stroke: #e77d19;
    stroke-width: 3px;
    fill: transparent;
    display: none;
  }
  
  .speaker2 {
    fill: #1ed760;
    fill-rule: evenodd;
    display: none;
  }

</style>


<div class="wrap">

<div class="playButton2">
  <svg class="initial2" 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"></path>
  </svg>

  <svg class="pause2" 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"></path>
  </svg>

  <svg class="speaker2" 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"></path>
  </svg>

  <svg class="play2" 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"></path>
  </svg>
</div></div>

<audio id="player2" preload="none">
  <source src="" type="audio/mpeg">
  </source>
</audio>

<script>
(function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton2");
        var player = document.querySelector("#player2");
        document.querySelector(".playButton2 .initial2").style.display = "none";
        player.volume = 1.0;
        if (player.paused) {
            button.classList.add("playing");
            document.querySelector(".playButton2 .play2").style.display = "none";
            document.querySelector(".playButton2 .pause2").style.display = "inline-block";
            player.play();
        } else {
            document.querySelector(".playButton2 .pause2").style.display = "none";
            document.querySelector(".playButton2 .play2").style.display = "inline-block";
            player.pause();
        }
    }

    function playButtonMouseoverHandler() {
        var player = document.querySelector("#player2");
        player.isPlaying = function isPaused() {
            return player.paused === false;
        };
        if (player.isPlaying()) {
            document.querySelector(".playButton2 .speaker2").style.display = "none";
            document.querySelector(".playButton2 .pause2").style.display = "inline-block";
        }
    }

    function playButtonMouseoutHandler() {
        var player = document.querySelector("#player2");
        player.isPlaying = function isPlaying() {
            return player.paused === false;
        };
        if (player.isPlaying()) {
            document.querySelector(".playButton2 .pause2").style.display = "none";
            document.querySelector(".playButton2 .speaker2").style.display = "inline-block";
        }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
}());
</script>

Can you show me how I can use absolute positioning on these 3 buttons?

How exactly would it work on this one?

I’m stuck.

I’m confused on how I would do it on this one.

<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }
  
  .pause3 {
    display: none;
  }
  
  .playButton3.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton3.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm">
    <svg class="play3" width="12" height="14" style="margin:15px 36px;" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14" style="margin:15px 37px;" viewbox="0 0 60 100" >
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 soundpark">
    <svg class="play3" width="12" height="14" style="margin:15px 39px;" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14" style="margin:15px 40px;" viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/spdeep" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 cavoparadisoclub">
    <svg class="play3" width="12" height="14" style="margin:15px 36px;" viewbox="0 0 85 100" >
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14" style="margin:15px 37px;" viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;">
    </source></audio>
  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton3(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play3");
        var pause = button.querySelector(".pause3");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton3");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton3);
    });
}());


</script>

I created a a design on codepen with the layout but the coding is different

My Codepen

I even added comments in it to show what can be edited only different is I am using images not svg as i don’t know how to use svg :frowning:

Feel free to check it :slight_smile:

Let me know if there is anything wrong and please tell me what it would effect :slight_smile:

I am using the checkbox hack so there is no javascript involved

Really, it would?

How would I change the javascript around to do it this way?

<div class="initial ">Links</div>
<div class="playButton playing">
<script>
  (function iife() {
    "use strict";
    document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

After I remove margin, it looks like this.

    .wrap {
        position:relative;
        display:table;
    }

    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
  }

<div class="wrap"></div>

I don’t know how to properly implement the above code to the below code.

<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }
  
  .pause3 {
    display: none;
  }
  
  .playButton3.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton3.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14"  viewbox="0 0 60 100" >
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 soundpark">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14" viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/spdeep" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 cavoparadisoclub">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100" >
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14"  viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;">
    </source></audio>
  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton3(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play3");
        var pause = button.querySelector(".pause3");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton3");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton3);
    });
}());


</script>

What would I change in this code if I didn’t want the audio to start after you clicked on the image. If I wanted the play button to show, and not pause, with no audio playing until you clicked on the play button ?

How it looks now after you Click on the image. It goes straight to the audio. If I would want it to go to the play button first, how would I change this code?


So the play button shows after the image is clicked with no audio playing?

<style>
  .wrap {
    position: relative;
    display: table;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    fill: #aaff00;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  .link div {
    margin: 0 0 12px 0;
  }
  
  .link a {
    display: block;
    width: 50px;
    height: 50px;
    margin: -50px 0 0;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .hide {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

</style>
</head>

<body>

  <div class="wrap">
    <div class="myLink">
      <div class="link">
        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>

          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>
      </div>
    </div>

    <div class="playButton">
      <div class="initial ">Links</div>
      <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
        <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"></path>
      </svg>

      <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
        <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"></path>
      </svg>
    </div>

    <audio id="player" preload="none">
      <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
      </source>
    </audio>
  </div>

  <script>
    (function iife() {
      "use strict";
      document.querySelector(".myLink").classList.add("hide");

      function playButtonClickHandler() {
        document.querySelector(".myLink").classList.remove("hide");
        var button = document.querySelector(".playButton");
        var player = document.querySelector("#player");
        document.querySelector('.playButton .initial').style.display = 'none';
        player.volume = 1.0;
        if (player.paused) {
          button.classList.add("playing");
          document.querySelector(".playButton .play").style.display = "none";
          document.querySelector(".playButton .pause").style.display = "inline-block";
          player.play();
        } else {
          document.querySelector(".playButton .play").style.display = "inline-block";
          document.querySelector(".playButton .pause").style.display = "none";
          player.pause();
        }
      }
      var playButton = document.querySelector(".playButton");
      playButton.addEventListener("click", playButtonClickHandler);
    }());

  </script>

I removed margin from the code. Now I want to use absolute positioning on these 3 buttons, how would I do that?

First, is this even possible to do with this type of code where you have 3 play buttons?

    .wrap {
        position:relative;
        display:table;
    }

    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
  }

<div class="wrap"></div>

I don’t know how to properly implement the above code to the below code.

If it’s not capable of being done, then it’s not possible. And if it’s not possible, then only margin can be used for this type of code.

<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }
  
  .pause3 {
    display: none;
  }
  
  .playButton3.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton3.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14"  viewbox="0 0 60 100" >
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 soundpark">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14" viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/spdeep" type="audio/mpeg">
    </source></audio>
  </div>

  <div class="playButton3 cavoparadisoclub">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100" >
      <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"></path>
    </svg>

    <svg class="pause3" width="10" height="14"  viewbox="0 0 60 100">
      <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"></path>
    </svg>

    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;">
    </source></audio>
  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton3(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play3");
        var pause = button.querySelector(".pause3");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton3");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton3);
    });
}());


</script>

Topics merged.

You know when I said that “absolute positioning is good when you want to place a smaller element on top of a larger element” - can you tell me where in your new example you have elements placed on top of each other?

You don’t have anything on top you just have a play svg inside a div. There would be no need for absolute positions or negative margins here. You could have auto centred and nudged into position with a top margin or some other method.

As it happens you can also do it with absolute positioning anyway and would be like this:

.playButton3{position:relative;}
.play3{position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;}

That code is additional to your css.

Don’t keep expecting that there is one way to do something every time. The method you use changes on the situation and depends on what else is going on. You have to engage the part of your brain that is used for thinking and not blindly copy and paste :slight_smile:

3 Likes

can you tell me where in your new example you have elements placed on top of each other?

The playbutton is sitting on a block bigger than itself?

How much of the javascript needs to be changed to do this?