How do you know when a parent is necessary and vice versa?


#1

I just redid all my playbuttons and gave them all parents. But now I see it's not always necessary. How do you know when to use a parent, and when not to use one?

Relative can just be put on .playButton2, and it doesn't need to be put inside a parent, correct?

https://jsfiddle.net/2atng9km/2/

Example:

<style>
  .wrap {
    position: relative;

    display: table;
  }
  
  .playButton2 {
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
    border: 3px solid #0059dd;
  }
  
  .playButton2.playing {
    border: 3px solid #e77d19;
    background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
  }
  
  .initial2,
  .pause2,
  .play2,
  .speaker2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .initial2 {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
  }
  
  .pause2,
  .play2 {
    stroke: #e77d19;
    stroke-width: 3px;
    fill: transparent;
    display: none;
  }
  
  .speaker2 {
    fill: #1ed760;
    fill-rule: evenodd;
    display: none;
  }

</style>


<div class="wrap">

  <div class="playButton2">
    <svg class="initial2" width="90" height="108" viewbox="0 -10 85 120">
      <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="pause2" width="90" height="108" viewbox="-13 -10 85 120">
      <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>

    <svg class="speaker2" width="60" height="72" viewbox="0 0 16 14">
      <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"></path>
    </svg>

    <svg class="play2" width="90" height="108" viewbox="0 -10 85 120">
      <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>
  </div>
</div>

<audio id="player2" preload="none">
  <source src="" type="audio/mpeg">
  </source>
</audio>

<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial2").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .pause2").style.display = "none";
        document.querySelector(".playButton2 .play2").style.display = "inline-block";
        player.pause();
      }
    }

    function playButtonMouseoverHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .speaker2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
      }
    }

    function playButtonMouseoutHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .pause2").style.display = "none";
        document.querySelector(".playButton2 .speaker2").style.display = "inline-block";
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

</script>

#2

If the code renders as required without a parent,
don't bloat the code with one. :rolleyes:

If the code does not render as required without a
parent, then use one. :winky:

coothead


#3

Wait a second.

<div class="playButton2">

That would be the parent, then a wrap is totally unnecessary here, correct?


#4

well it does look like .warp only has 2 properties so it understandable but if the warp is meant to be able to contain everything than use it because .playbutton2 has a fixed size and changing that will change the size of something else.

Don't be afraid to have extra DIV's and SPAN's in your code as long as it can serve it's purpose than that is fine. at the moment .warp is acting as a container for position:absolute elements.


#5

playButton2 is the parent, and inside are it's children.

<div class="wrap">

  <div class="playButton2">
    <svg class="initial2" width="90" height="108" viewbox="0 -10 85 120">
      <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="pause2" width="90" height="108" viewbox="-13 -10 85 120">
      <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>

    <svg class="speaker2" width="60" height="72" viewbox="0 0 16 14">
      <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"></path>
    </svg>

    <svg class="play2" width="90" height="108" viewbox="0 -10 85 120">
      <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>
  </div>
</div>

#6

Hi there asasass,

The parent that is superfluous to requirements is...

<div class="wrap">

So remove it and use this modified CSS...

.playButton2 {
    position: relative;
    display: table;          /* not needed */
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
    border: 3px solid #0059dd;
  }

coothead


#7

I don't believe I need:
display: table;


#8

That was only necessary when it was in wrap.


#9

yes, the CSS that you mentioned...

display: table;
`
... is also superfluous to requirements and
I should have removed it in my post. :unhappy:

coothead


#10

That was only necessary in the other thread to provide a tightly hugging red background as in the original blogger demo you showed. Without display:table the red would have gone full width of the viewport. You do not need it here in this latest version.

As others have said you can use a suitable parent if one exists to act as the stacking context (position:relative). A wrap was used in the other demo to provide the red background to match your blogger layout as it was the red you were complaining about that had been shortened by the incorrect use of negative margins.

To simplify the question why you need a wrap when putting something on top of something else here are the 2 simplest demos to explain that.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test2{
	position :absolute;
	top:0;
	left:0;
	background:red;
}

</style>


</head>

<body>
<h1>testing</h1>
<div class="test1">Test 1</div>
<div class="test2">Test 2</div>
</body>
</html>

In the above example if you absolutely position test2 on top of test1 it does not work because test2 has no stacking context (nearest positioned ancestor oher than static) and is placed at top of the viewport.

In example 2 below we add a wrap with position:relative and everything works as expected.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test2 {
	position :absolute;
	top:0;
	left:0;
	background:red;
}
.wrap{position:relative;}
</style>
</head>

<body>
<h1>testing</h1>
<div class="wrap">
  <div class="test1">Test 1</div>
  <div class="test2">Test 2</div>
</div>
</body>
</html>

Please study the above 2 and understand why they work and why the structure is important.


#11

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