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

asasass · November 17, 2017, 9:54am

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?

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>

coothead · November 17, 2017, 10:06am

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

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

coothead

asasass · November 17, 2017, 10:09am

Wait a second.

<div class="playButton2">

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

0_0Nathan · November 17, 2017, 10:20am

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.

asasass · November 17, 2017, 10:26am

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>

coothead · November 17, 2017, 10:28am

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

asasass · November 17, 2017, 10:30am

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

asasass · November 17, 2017, 10:32am

That was only necessary when it was in wrap.

coothead · November 17, 2017, 10:49am

yes, the CSS that you mentioned…

``display: table;

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

_coothead_

PaulOB · November 17, 2017, 10:51am

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.

system · February 16, 2018, 5:51pm

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

Topic		Replies	Views
Class name active/activated placement HTML & CSS	57	9014	March 21, 2018
Using backgroundColor on a button JavaScript	2	1478	January 3, 2018
Creating a play button HTML & CSS	3	8702	May 23, 2015
If I were to put 2 of these on a page, it would look like JavaScript	114	4396	February 20, 2018
Would I need to create a new class to change the color of the 1st play button? JavaScript	2	1237	January 18, 2018

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

Related topics