Not seeing the square links with javascript disabled

JavaScript
408

Do you suggest I move the buttons margin back into the html then?

 function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .initial, .speaker").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }


<div class="playButtonsc wrapc">

  <div class="playButtonc svoefm" data-audio="http://163.172.187.253:8081/radio/svoefm/icecast.audio">
    <svg class="play" style="margin: 15px 36px;" focusable="false" 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="pause hide" style="margin: 15px 37px;" focusable="false" 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>
  </div>

  <div class="playButtonc soundpark" data-audio="http://163.172.187.253:8081/radio/soundeep/icecast.audio">
    <svg class="play" style="margin: 15px 41px;" focusable="false" 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="pause hide" style="margin: 15px 42px;" focusable="false" 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>
  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">
    <svg class="play" style="margin: 15px 36px;" focusable="false" 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="pause hide" style="margin: 15px 37px;" focusable="false" 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>
  </div>
  <div class="lines"></div>
</div>
409

How do you believe that will change things? Aside from upping the specificity by inlining it, so long as it’s not overriding other CSS rules, it would have exactly the same effect.

410

Doing that removes all the suffixes.
Putting their margin back into the html.


 function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .initial, .speaker").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }
411

On how many occasions have you been told not to place styles in your HTML?

Why would you think it might be a good idea here?

412

It is far better to use the following CSS technique instead:

playButtonc.wrap .play {

}

That way you can target specifically to each button, there’s only the one unique playButtonX thing to deal with, the CSS remains off the HTML page, and the JavaScript has the same consistent play/pause/etc names to deal with.

1 Like
413

Can you show me what you mean here please.


.playButtonc.wrapc .play,
.playButtonc.wrapc .play {
  margin: 15px 36px;
}

.playButtonc.wrapc .pause,
.playButtonc.wrapc .pause {
  margin: 15px 37px;
}

.playButtonc.wrapc .play {
  margin: 15px 41px;
}

.playButtonc.wrapc .pause {
  margin: 15px 42px;
}
414

I’ve just realised that the wrap doesn’t need to be mentioned.

Where you had pausea, use playButtona .pause instead.
Where you had playc, use playButtonc .play instead.

415

Now what are you telling me to do?

This is how it was before:

.wrapc .playa,
.wrapc .playc {
  margin: 15px 36px;
}

.wrapc .pausea,
.wrapc .pausec {
  margin: 15px 37px;
}

.wrapc .play {
  margin: 15px 41px;
}

.wrapc .pause {
  margin: 15px 42px;
}

This is how it looked before that:
https://jsfiddle.net/u18t40xa/259/


.wrapc .playa,
.wrapc .playc {
  margin: 15px 36px;
}

.wrapc .pausea,
.wrapc .pausec {
  margin: 15px 37px;
}

.wrapc .playb {
  margin: 15px 41px;
}

.wrapc .pauseb {
  margin: 15px 42px;
}
416

Because you have the unique wrapX there, you can remove all alphabet suffixes from everything else.

417

To target one of the triple play buttons, you can use their unique name, such as: .svoefm .play

1 Like
418

Yes, that worked, Thank you.

1 Like
419

Which classname do you want to use a unique designation for? Am I right o assume that .wrapX is what you want to use? Such as, .wrapa, .wrapb, and so forth?

Working from that assumption, we can work through the CSS code removing alphabet suffixes as we go.

Changing activeX to just active

Renaming activea to just active in the CSS is easy, with the same change being done in the JS code too.
The effect of this change can be tested, and be found to be working in the code at https://jsfiddle.net/u18t40xa/260/

playButtonc to wrapc

Because we want only wrapX to be the one unique thing, we can use wrapc instead of playButtonc. However, because we’re wanting to target each of the three separate playbuttons inside of the wrap, we can use the > symbol to target only the elements that are direct children of wrapc instead:

/*.playButtonc>div { */
.wrapc>div {

We can test that things continue to work after that change, which leaves us with the code at https://jsfiddle.net/u18t40xa/261/

1 Like
420

Changing playa/playc and pausea/pausec to just play and pause

The duplication here is because you want the outer playbuttons to be different from the middle one.

.wrapc .playa,
.wrapc .playc {
  margin: 15px 36px;
}
.wrapc .pausea,
.wrapc .pausec {
  margin: 15px 37px;
}
.wrapc .play {
  margin: 15px 41px;
}

.wrapc .pause {
  margin: 15px 42px;
}

We can use the unique soundpark on the middle button to target that one separately:

/* .wrapc.play { */
.soundpark .play {
  margin: 15px 41px;
}
/* .wrapc .pause { */
.soundpark .pause {
  margin: 15px 42px;
}

Which lets us remove the alphabetical suffixes from the other classnames:

/* .wrapc .playa,
.wrapc .playc { */
.wrapc .play {
...
/* .wrapc .pausea,
.wrapc .pausec { */
.wrapc .pause {

We can now rename playa/playc and pausea/pausec in the HTML code:

<!--<svg class="playa" focusable="false" width="12" height="14" viewbox="0 0 85 100">-->
    <svg class="play" focusable="false" width="12" height="14" viewbox="0 0 85 100">
...
<!--<svg class="pausea hide" width="10" focusable="false" height="14" viewbox="0 0 60 100">-->
    <svg class="pause hide" width="10" focusable="false" height="14" viewbox="0 0 60 100">
...
<!--<svg class="playc" focusable="false" width="12" height="14" viewbox="0 0 85 100">-->
    <svg class="play" focusable="false" width="12" height="14" viewbox="0 0 85 100">
...
<!--<svg class="pausec hide" focusable="false" width="10" height="14" viewbox="0 0 60 100">-->
    <svg class="pause hide" focusable="false" width="10" height="14" viewbox="0 0 60 100">

Which lets us improve playa/playc and pausea/pausec in the JS code too:

//  button.querySelectorAll(".play, .pause, .playa, .pausea, .playc,  .pausec, .initial, .speaker").forEach(hide);
    button.querySelectorAll(".play, .pause, .initial, .speaker").forEach(hide);
...
//  return button.querySelector(".play, .playa, .playc");
    return button.querySelector(".play");
...
//  return button.querySelector(".pause, .pausea, .pausec");
    return button.querySelector(".pause");

And after making those improvements to all code sections in the JS code area, we can test things and find that the buttons all still continue to work. https://jsfiddle.net/u18t40xa/262/

1 Like
421

Removing playButtonX to use only playButton instead.

The playButton class doesn’t need to be unique anymore because wrap takes care of that responsibility, so we can rename playButtona to be just playButton

<div class="playButtona wrapa" data-audio="http://hi5.1980s.fm/;">
<div class="playButton wrapa" data-audio="http://hi5.1980s.fm/;">

and update the JS code to use just playButton instead of playButtona, or wrapa when it needs to be unique.

//  while (el.classList.contains("playButtona") === false) {
    while (el.classList.contains("playButton") === false) {
...
//  var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    var buttons = document.querySelectorAll(".playButton, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
...
  var playButton = document.querySelector(".wrapa");

That was easy, and leaves us with the code at https://jsfiddle.net/u18t40xa/263/

1 Like
422

Doing the rest of the playButtons

As these playButton improvements are easy to do, the rest of them can be done all at once.
The other playButton alphabet suffixes will reduce down to only just the one playButton class.

<!--<div class="playButtonb wrapb" data-audio="http://hi5.1980s.fm/;">-->
    <div class="playButton wrapb" data-audio="http://hi5.1980s.fm/;">
...
<!--<div class="playButtonsc wrapc">-->
    <div class="wrapc">
...
<!--  <div class="playButtonc svoefm" data-audio="http://163.172.187.253:8081/radio/svoefm/icecast.audio">-->
      <div class="playButton svoefm" data-audio="http://163.172.187.253:8081/radio/svoefm/icecast.audio">
...
<!--  <div class="playButtonc soundpark" data-audio="http://163.172.187.253:8081/radio/soundeep/icecast.audio">-->
      <div class="playButton soundpark" data-audio="http://163.172.187.253:8081/radio/soundeep/icecast.audio">
...
<!--  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">-->
      <div class="playButton cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">
...
<!--<div class="playButtond wrapd" data-audio="http://hi5.1980s.fm/;">-->
    <div class="playButton wrapd" data-audio="http://hi5.1980s.fm/;">
...
<!--<div class="playButtone" data-audio="http://hi5.1980s.fm/;">-->
      <div class="playButton" data-audio="http://hi5.1980s.fm/;">
...
<!--<div class="playButtonf wrapf" data-audio="http://hi5.1980s.fm/;">-->
    <div class="playButton wrapf" data-audio="http://hi5.1980s.fm/;">

Th JS code can now use that same consistent playButton class:

//  while (el.classList.contains("playButtonb") === false) {
    while (el.classList.contains("playButton") === false) {
...
//  var buttons = document.querySelectorAll(".playButton, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    var buttons = document.querySelectorAll(".playButton");
...
//var playButtons = document.querySelectorAll(".playButtonb");
  var playButtons = document.querySelectorAll(".wrap");

Those three changes can be made throughout all of the JavaScript code,

C-button adjustment

The C playbuttons have one other change, where the wrapc is used to help us find their play buttons:

//var playButtons = document.querySelectorAll("..playButtonc");
  var playButtons = document.querySelectorAll(".wrapc .playButton");

E-button adjustment

And, the E playbutton has a few other changes to make, which are easy ones to do:

//  var button = wrapper.querySelector(".playButtone");
    var button = wrapper.querySelector(".playButton");
}

And the CSS has a few other places where playButtone can be renamed to just playButton

/*.wrape.inactive .playButtone {*/
   .wrape.inactive .playButton {
...
/*.wrape.active .playButtone {*/
  .wrape.active .playButton {

All done

Using Ctrl+F to help me find all occurences of playButton on the page, no other alphabetical ones are left, and all of the buttons continue to work, leaving us with the code at https://jsfiddle.net/u18t40xa/265/

1 Like
423

This works:

.wrapc .playButton {
  float: left;
  width: 83px;
  height: 44px;
}

<div class="playButton wrapc">
424

A lot of that code is now looking very similar, so I want to see if there are ways of combining it all together into one set of code.

Using DiffChecker I can see that some code uses togglePlayButton() and other code called it just playButton(), so I’m going to have all of the different sets of code use the same consistent name of togglePlayButton()

Now the only difference between codeA and codeB is that codeB has some extra functions, and in how the button is initialised at the end of the code. To help remove that end of code difference, I’m going to place that init code in a separate function, and return that init function from the code. That way I can start each button with:

playButton.init(".wrapa.playButton");

With there being an eventual plan of being able to use only one set of code for all of the buttons, with:

playButton.init(".playButton");

It’s always helpful to have an idea of where you want to go, so that you can organise things to help you get there.

Updating codeA

Currently though, we can update codeA so that it uses that init technique:

var playButton = (function iife() {
  ...
  function initPlayButton(selector) {
    var playButton = document.querySelector(selector);
    playButton.addEventListener("click", playButtonClickHandler);
  }
  return {
    init: initPlayButton
  };
}());
playButton.init(".wrapa.playButton");

We can now have codeA use querySelectorAll, and move those missing functions from codeB over to codeA

  function initPlayButton(selector) {
    // var playButton = document.querySelector(selector);
    // playButton.addEventListener("click", playButtonClickHandler);
    var playButtons = document.querySelectorAll(selector);
    playButtons.forEach(function(button) {
      button.addEventListener("click", playButtonClickHandler);
    });
  }

which leaves the only differences between codeA and codeB being in name of the event handler, and the selector being given to the init code.

1193×233 11 KB

Making the init more flexible

Now that the the codes are near-identical, it’s easy to remove the remaining difference.

The init function can check to see if there is an “initial” element, and if there is it can use the initialOverlayClickHandler function.

      if (button.querySelector(".initial")) {
        button.addEventListener("click", initialOverlayClickHandler);
      } else {
        button.addEventListener("click", playButtonClickHandler);
      }

And the codeA and codeB code is now identical, all but for the init section at the end.
This means that the codeB section of code can now be removed, leaving us with two init sections of code below the codeA section of code.

var playButton = (function iife() {
  ...
}());
playButton.init(".wrapa.playButton");

// var playButton = (function iife() {
//   ...
// }());
playButton.init(".wrapb.playButton");

The code where the one section of code is used the buttonA and buttonB, is found at https://jsfiddle.net/u18t40xa/273/

The plan from here is to update the other sections of code, so that we only have one section of code to deal with, and several inits at the bottom. Then when the same init is being used for each button, we can replace that with just one init for all buttons.

425

I’m not up to that, I’m stuck on Player B being able to play.
And A

The addition of player C is causing it.

426

You can’t use querySelectorAll(“.playButton”) when your code needs to target only one button.

Instead of that, use document.querySelectorAll(“.wrapa”)

427

querySelectorAll(".playButton")

Works here?

Doesn’t it?