Two versions of a playButton Binding Audio With a grid link structure

Just for reference, @PaulOB gave a working version of this code earlier, which did not require multiple classes or multiple different margins.

Normally it’s a bad idea to force a layout to push things off the screen, for that then makes it impossible for someone to access that off-screen content.

Proper use of CSS lets you create layouts that work under a wide variety of conditions, all the way from fancy 80" screens all the way down to tiny cellphone displays, without needing to change the HTML at all.

1 Like

It needs to have a margin of 12px between the 2 horizontal gaps

Talk to the CSS people about that. You’re in the JavaScript forum at the moment.

Then, we’ll use the code with margins until that gets resolved.

If that’s ok?

You might but I won’t be touching that until it’s better, as it’s far too fragile right now.

Can’t I make one using margins, then when it gets resolved, do one without?

It’s only the audio that has to be attached to it.

FIXED

Added:

.test a {
  vertical-align: top;
}
<style>
  .cover {
    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;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: green;
 
    transition: 0.5s ease-in-out;
  }
  
  .preventWrapping {
    white-space: nowrap;
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }

.test a {
  vertical-align: top;
}

</style>

<div class="cover ">Links</div>

<div class="test hide">
  <div class="links">



      <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 href="" target="_blank"></a>
        <a href="" target="_blank"></a>
        <a href="" target="_blank"></a>
        <a href="" target="_blank"></a>
        <a 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>
<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

I fixed it, What’s the next step?

I just removed classes.

Remove those now-useless class names from the anchor tags.

Did.

What is the goal that we are now wanting to achieve?

Post 1 will tell you that.

After you click the cover. It will start playing music.

And then you can stop it in the middle box or press play again.

The middle square will be the div button.

Cover (play)

middle square (pause)

middle square (playagain)

Ahh good, so we just need the middle one to be different from the others that are around it.
Putting a class on that middle one will help you to do that.

I see your bid of post 1, and raise with Post #2 which also mentions that a classname of “controls” might be a suitable name for it. :smiley:

There’s an issue though, I removed all the margins, so how do I know which is the middle square?

Here, I just hid the cover so you could see:

That’s the middle anchor, that’s in the middle div. You should be able to find it at line number 80 of your code.

Do I put this:
<div class="controls "></div>

In that spot?

You can just leave it as a link with a class name, and replace the image with the play/pause that you want to be there.