After I hit tidy in jsfiddle, the 3 div player broke apart

JavaScript
1

Before tidy is pressed

After tidy is pressed

<style>
  .playButton3 {
    display: inline-block;
  }
  
  .playButton3.sboefm svg {
    fill: #AAFF00;
  }
  
  .playButton3.soundpark svg {
    fill: #FFAA00;
  }
  
  .playButton3.radiorecord svg {
    fill: #FF00AA;
  }
  
  .preventWrapping {
    white-space: nowrap;
  }

</style>

<div class="preventWrapping">
  <div class="playButton3 sboefm" style="width: 83px; height:44px;border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;cursor: pointer;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" 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" style="display: none;margin:15px 37px;" 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 style="display:none;">
      <source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />
      </source>
    </audio>
  </div>
  <div class="playButton3 soundpark" style="width: 88px; height:44px;border-left: 3px solid #0059dd;border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000; cursor: pointer;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 39px;" 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" style="display: none;margin:15px 40px;" 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 style="display:none;">
      <source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />
      </source>
    </audio>
  </div>
  <div class="playButton3 radiorecord" style="width: 83px; height:44px;border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000; cursor: pointer;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" 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" style="display: none;margin:15px 37px;" 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 style="display:none;">
      <source src='http://air.radiorecord.ru:8101/rr_320' />
      </source>
    </audio>
  </div>
</div>
<script>
  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('.play');
    var pause = button.querySelector('.pause');
    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();
    }
  }

  function showPause(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    }
    if (player.isPlaying()) {

      button.querySelector('.pause').style.display = 'inline-block';
    }
  }

  function showSpeaker(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    }
    if (player.isPlaying()) {
      button.querySelector('.pause').style.display = 'none';

    }
  }

</script>
2

The temporary solution of removing white space between the SVG elements is now seen to be ineffective once the code is cleaned up.

Better technique is to set the font size to 0,so that spaces between the SVG elements won’t make cause the gap.

The preventWrapping class can be renamed to a more appropriate name, and the font size can be added to it.

Appropriate class names don’t say what it does, it instead provide semantic information about what the element is. In this case, we can rename preventWrapping to playButtons instead.

/* .preventWrapping */
  .playButtons {
    white-space: none;
    font-size: 0;
  }

<div class="playButtons">
  <div class="playButton3 ...">
    ...
  </div>
</div>
1 Like
3

But now it wraps again.

4

It should be then:

white-space: nowrap;

not


white-space: none;

Correct?

5

Looking better.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.