Getting initial to work at the top of the code?

HTML & CSS
182

You will need @Paul_Wilkins to help you with the JS but this gets it working with the css and html I posted

(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hidea");
        el.classList.remove("hideb");
        el.classList.remove("hidec");
        el.classList.remove("hided");
        el.classList.remove("hidee");
        el.classList.remove("hidef");
    }

    function hide(el) {
        el.classList.add("hidee");
    }

    function upTo(el, selector) {
        while (el.matches(selector) === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playc, .pausec, .speakerc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
    }

    function getPlay(button) {
        return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
    }

    function getPause(button) {
        return button.querySelector(".pausea, .pauseb, .pausec, .paused, .pausee, .pausef");
    }

    function hideInitialOverlay(button) {
        var link = upTo(button, ".wrap");
        link.classList.remove("inactive");
        hide(button.querySelector(".title"));
        button.classList.add("activated");
    }

    function showPlayButton(button) {
        var play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        var play = getPlay(button);
        return play.classList.contains("hidea") || play.classList.contains("hideb") || play.classList.contains("hidec") || play.classList.contains("hided") || play.classList.contains("hidee") || play.classList.contains("hidef");
    }

    function pauseAllButtons() {
        var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
        buttons.forEach(function hidePause(button) {
            if (isPlaying(button)) {
                showPlayButton(button);
            }
        });
    }

    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        player.setAttribute("src", src);
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        var player = getAudio();
        var playing = isPlaying(button);

        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }


    function playButtonClickHandler(evt) {

        var button = upTo(evt.target, ".playButtone");
        togglePlayButton(button);
    }

    function initialOverlayClickHandler(evt) {
        var button = upTo(evt.target, ".wrap");
        hideInitialOverlay(button);
        button.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);
    }
    document.querySelector(".wrap").classList.add("inactive");
    var playButton = document.querySelector(".wrap");
    playButton.addEventListener("click", initialOverlayClickHandler);
}());

Whole code for easy copy and paste:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	background-color: black;
}
.wrap {
	width: 266px;
	height: 174px;
	overflow: hidden;
	position: relative;
}
.wrap a {
	float: left;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	margin: 0 4px 12px 0;
}
.wrap a:hover {
	border: 3px solid red;
}
.wrap li:nth-of-type(5n) a {
	margin-right: 0;
}
.wrap li:nth-of-type(15) a{
	position: relative;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	background: #ffffff;
}
.wrap li:nth-of-type(15) a::before, .wrap li:nth-of-type(15) a::after {
	content: '';
	position: absolute;
	top: 0;
	width: 14px;
	height: 44px;
}
.wrap li:nth-of-type(15) a::before {
	left: 0;
	background-color: #00ffff;
}
.wrap li:nth-of-type(15) a::after {
	right: 0;
	background-color: #ff00ff;
}
.title {
	height: 168px;
	margin:0;
	background: url("https://i.imgur.com/BBYxKcf.jpg");
	border: 3px solid #0059dd;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 30px;
	color: #0059dd;
	line-height: 100px;
	text-align: center;
	cursor: pointer;
}
.title{display:none}
.inactive .title{display:block;}

.title::before, .title::after {
	content: "";
	position: absolute;
	top: 0;
	left: 86px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.title::after {
	left: 177px;
}
.nav {
	margin:0;
	padding:0;
	list-style:none;
}
.nav li{float:left;}
.activated .playButtone {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border: 3px solid #0059dd;
	fill: #aaff00;
}
.playe {
	position: absolute;
	left: 6px;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;/* move it under the image*/
}
.pausee {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.hidee, .wrap.inactive a {
	display: none;
}
</style>
</head>

<body>
<div class="wrap">
  <h1 class="title">Links</h1>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
  <audio></audio>
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" 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">
      <title>PLAY</title>
    </path>
    </svg> <svg class="pausee hidee" focusable="false" 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">
      <title>PAUSE</title>
    </path>
    </svg> 
   </div>
</div>
<script>

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hidea");
    el.classList.remove("hideb");
    el.classList.remove("hidec");
    el.classList.remove("hided");
    el.classList.remove("hidee");
    el.classList.remove("hidef");
  }

  function hide(el) {
    el.classList.add("hidee");
  }

  function upTo(el, selector) {
    while (el.matches(selector) === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playc, .pausec, .speakerc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
  }

  function getPause(button) {
    return button.querySelector(".pausea, .pauseb, .pausec, .paused, .pausee, .pausef");
  }

  function hideInitialOverlay(button) {
    var link = upTo(button, ".wrap");
    link.classList.remove("inactive");
    hide(button.querySelector(".title"));
    button.classList.add("activated");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hidea") || play.classList.contains("hideb") || play.classList.contains("hidec") || play.classList.contains("hided") || play.classList.contains("hidee") || play.classList.contains("hidef");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    player.setAttribute("src", src);
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

  function togglePlayButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
   
    showButton(button, {playing});
    manageAudio(player, {src: button.getAttribute("data-audio"),
      playing
    });
  }


  function playButtonClickHandler(evt) {

    var button = upTo(evt.target, ".playButtone");
    togglePlayButton(button);
  }

  function initialOverlayClickHandler(evt) {
    var button = upTo(evt.target, ".wrap");
	hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }
  document.querySelector(".wrap").classList.add("inactive");
  var playButton = document.querySelector(".wrap");
  playButton.addEventListener("click", initialOverlayClickHandler);
}());




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

Of course your multiple classes need to be addressed so that you donā€™t have to keep adding them in to the routines.

2 Likes
183

How come titles donā€™t work, they should?

Iā€™m perplexed by this.

<title>PLAY</title>
<title>PAUSE</title>

  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" 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">
      <title>PLAY</title>
    </path>
    </svg> <svg class="pausee hidee" focusable="false" 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">
      <title>PAUSE</title>
    </path>
    </svg> 
   </div>
</div>
184

Looking further into it.

Only Pause works with title, not Play.

185

z-index: -1;

Is interfering with title Play showing on the Play svg as a tooltip.

When you hover on play, no text is appearing.

186

That the discussion frequently drifts off on tangents and has numerous hypothetical fixes for broken code without ever seriously addressing the root problem doesnā€™t help any.

My question about if the primary purpose was to present links that can play media files has gone unanswered.

I am unfamiliar with the terminology ā€œdummy linksā€ and have not seen a definition or explanation of what that means.

Perhaps because of the interest in having a ā€œplayā€ button, they should not be links at all but select options in a form?

In any case, without clear specifications and not starting with good HTML, I fear this endeavor will be an endless exercise in futility. As I posted long ago, I have no problem with others wanting to play with code if it helps them learn. But this has been going on for a long time and it doesnā€™t seem that enough is getting learned in the process. Unless Iā€™m missing something it seems the trend is ā€œhelp me find hacks that will work with my broken codeā€ with insufficient interest in fixing the broken code of finding the hacks without assistance.

3 Likes
187

That is most definitely at the heart of the matter. After some 18 months of tinkering with essentially the same problem, itā€™s still not at all clear to me what, if any, end goal the OP has in mind.

2 Likes
188

I havenā€™t picked out what links I want to add to them yet.

189

I am curious about something.

If I didnā€™t use links at all, how would you change link to a block?

I tried this:

But I know Iā€™m doing something wrong.

<div class="linkse">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>



.linkse {
  width: 266px;
  height: 174px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.linkse  {
  float: left;
  width: 44px;
  height: 44px;
  border: 3px solid #0059dd;
  margin: 0 4px 12px 0;
  
}



.linkse :nth-of-type(5n) {
  margin-right: 0;
}

.linkse :nth-of-type(15) {
  position: relative;
  width: 44px;
  height: 44px;
  border: 3px solid #0059dd;
  background: #ffffff;
}

.linkse :nth-of-type(15)::before,
.linkse :nth-of-type(15)::after {
  content: '';
  position: absolute;
  top: 0;
  width: 14px;
  height: 44px;
}

.linkse :nth-of-type(15)::before {
  left: 0;
  background-color: #00ffff;
}

.linkse :nth-of-type(15)::after {
  right: 0;
  background-color: #ff00ff;
}
190

Where is ā€œlinkā€?

191

Here:

192

Sorry, but I still donā€™t see ā€œlinkā€ in the html or css. Which section and which line?

193

I just did this.

194

If they are not going to be links, but just a matrix of squares, then surely a background image would be most appropriate.

195

They will eventually be links, I was just seeing, experimenting how the other way would work.

196

This may be easier to see:

Compared to the working code using links:

197

Why would you waste your time (and ours) experimenting with code you donā€™t intend to use when you havenā€™t yet completed the code you will use?

As @Mittineague said, constantly chopping and changing from one thing to another is not helping you learn, and itā€™s thoroughly frustrating to anybody trying to assist.

3 Likes
198

I assumed that they were all to be links that go to different places but are just set up as placeholder (dummy) links for now that donā€™t go anywhere but eventually will.

But as usual with asasass nothing is straight forward and the thread has veered all over the place again.:slight_smile:

1 Like
199

You assumed right.

I was just experimenting using divs/ nonlinks.

200

How would you fix this issue?
#185

201

My 2nd question is.

The 8th link is the playbutton.

Do I keep it like this.
<li><a href="#"></a></li>

or can I change it to this?
<li><a></a></li>

or would I do something else?