Getting initial to work at the top of the code?

I am saying, that if you intend for only the initial image to be hidden, that you cannot succeed when the whole play button is inside of that initial element too.

What Paul means is that this is a wrapper - hide it, and everything inside it goes too.

2 Likes

Is there a way to get it to work with initial at the top, or itā€™s 100% not possible?

It might be possible to have initial separated from the rest of the play button parts

The structure that I would have is:

  • play button
    • initial
    • links
    • buttons

Or it is possible, and I just have to figure it out?

All my other codes have playbutton at the top, but I donā€™t understand how you would do that with this code.

Like this:

play button
initial
links
buttons ( play/pause)

Do you mean like this?


<div class="playButtone" data-audio="http://hi5.1980s.fm/;">
  <p>Links</p>

  <div class="linkse">
    <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>
    <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>
    <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>

    <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>

TypeError: el.matches is not a function


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

I think you mean this, then?

Right?

<div class="playButtone" data-audio="http://hi5.1980s.fm/;">
    
<div class="initiale">
 <p>Links</p>

  <div class="linkse">

or, do I even need initial, and can I do this instead?

body {
  background-color: black;
}

.playButtone {
  position: relative;
  width: 260px;
  height: 168px;
  background: url("https://i.imgur.com/BBYxKcf.jpg");
  border: 3px solid #0059dd;
  cursor: pointer;
}

p {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;
}

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

.playButtone::after {
  left: 177px;
}

.linkse {
  width: 266px;
  height: 174px;
  overflow: hidden;
}

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

.linkse a:hover {
  border: 3px solid red;
}

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

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

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

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

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

.playButtone.activated {
  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,
.linkse.inactive a {
  display: none;
}

You had a way that works, with the initial section. Why are you looking to change that? Are there problems with what worked?

Similar to CSS, JavaScript can benefit from having good HTML to work with. This is not the JavaScript category so Iā€™ll ignore that.

But I have a question. Do both of those SVG images display in the same coordinates, alternating in which is displayed?

If so, it could be a good idea to wrap them in a containing element to style them against instead of styling them against the larger containing element.

If you were to replicate the HTML structure Paul suggested above, it would look more like this.

<div class="playButtone">
  <p>Links</p>

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

  <svg class="playe">
    ...
  </svg>

  <svg class="pausee hidee">
    ...
  </svg>
  
</div>

Note: I have removed most of the content and element attributes to provide clearer visibility to the overall structure, and not because they are somehow irrelevant.

PS. I canā€™t help think that the <p> tag is a poor choice and should be one of <h1> ... <h6> instead depending on what else is on the page

2 Likes

Are you seriously saying that after all this time, you are still unable to distinguish the difference between one div inside another:

<div class="first">
   <div class="second">
   </div>
</div>

and one div after another:

<div class="first"></div>
<div class="second"></div>
1 Like

I did that here, didnā€™t I?

#49

No you didnā€™t. Look at where the closing <div> tag is for the links section.

1 Like

Thanks.

I just fixed it.

 <div class="linkse">
    <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>
    <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>
    <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>

Itā€™s fixed? How do you plan to hide that initial image?

1 Like

That looks better. However, I need to go now, as itā€™s 00:37 (UK time) in the morning and I have to be up early.