Adding additional play buttons

JavaScript
104

It’s already not working, for you can’t see the background color. Do you know how to fix that?

105

What exactly do you mean?

106

Do you see how after you removed the button borders, that the green background border cannot be seen?

Do you know how to fix that?

107

Converting all div to span didn’t help.

108

No, I don’t.

109

Add the player class to the preventWrapping div.

<div class="player preventWrapping">

What is the next problem that needs to be dealt with?

110

Adding middle borders.

111

Div elements are for vertically separated elements, and span elements are for horizontally separated ones.

Rename the three playButton sections from div to span.

For example:

Before:

<div class="playButton fm1980s" ...>

After:

<span class="playButton fm1980s" ...>
112

it messed everything up?

113

I got it.

114

Don’t forget to change the closing div tag to an appropriate closing span tag as well.

<span class="playButton fm1980s" ...>
  ...
</span> <!-- was a closing div tag -->

The jsfiddle editor should show the bad ones in red, to get your attention that they need to be fixed.

1 Like
115

I fixed it.

116

Good one. Rename .button to .playButton and you should be done.

/* .button { */
.playButton {

The “separation of concerns” that started to occur to the code, has had its benefits already.

117

It messed everything up.

Click on the buttons.

118

The “clicked” class is being added to the surrounding player element, which looks to be a side-effect of how the event handling works. It seems that span elements cannot easily be the target of events.

No matter, I’ve renamed the spans back to divs, hit the Tidy button to clean up the code, and it’s good to go.

119

After further investigation, the scripting code was too restrictive.

  function getButton(el) {
    while (el.nodeName !== "HTML" && !el.nodeName !== "DIV")) {

Having it check for the playButton class name instead, has it find the correct place.

  function getButton(el) {
    while (el.nodeName !== "HTML" && !el.classList.contains("playButton")) {

And it’s fixed. https://jsfiddle.net/m2c91vpo/14/

1 Like
120

How would I add


  .player {
    font-size: 0;
    background: green;
    display: inline-block;
    padding: 1.5px;
  }
  
  .playButton {
    cursor: pointer;
    background: black;
    display: inline-block;
    margin: 1.5px;
  }

to this code, if I were to remove the linear-gradient?

121

This is what I have so far.

122

Is it easily transferable?

It doesn’t seem like it is.

Without changing the entire markup of the code.

123

The first line is an empty div section. You need to:

  • move the closing div tag to the end of the page, so that the div surrounds everything on there.
  • The negative margin is the next problem, so remove that negative margin
  • instead just use margin-left

And it’s done?

If you want a top and button border:

  • remove the height from the outer div
  • set the outer div padding to be 1.5px (according to the lessons learned earlier)
  • and the inner div to a vertical margin of 1.5px.

And that’s done.