Getting initial to work at the top of the code?

javascript

#222

In the javascript.

button.classList.add("activated");

    function playButtonClickHandler(evt) {
        var button = upTo(evt.target, ".playButtone");
        togglePlayButton(button);
    }

#223

Since activated comes first in the javascript.
https://jsfiddle.net/293yht25/1/

button.classList.add("activated");

Then you put .activated first, then .playButton 2nd?

.activated .playButtone

Do I have this correct?


#224

What am I suppose to look for?


#225

The order of the js has no relation to the CSS?

The class called activated is added here to .wrap and playButtone is inside .wrap so a descendant selector is required to target it.

<div class="wrap activated">
etc..
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" width="38" height="40" viewBox="0 0 85 100">
   etc..
   </div>
</div>

You know how css works by now so just think about what you are doing.


#226

I now see that here, thanks for pointing that out to me.


#227

I have a different question:

What was the reason why you added this?

.nav li{float:left;}

With it:
https://jsfiddle.net/293yht25/6/

With it removed:
https://jsfiddle.net/293yht25/7/


#228

I'm going to take a leap of faith and assume that although you have neglected investing adequate time to learn a bit about prerequisite basic CSS knowledge that you at least understand that CSS selectors are written in order of parents to descendants. So that selector is for HTML like

<sometag class="activated"> 
...
    <othertag class="playButtone">

and not the other way around.

One of those is hard coded into the HTML. The other is being added by JavaScript.


#229

I didn't know activated was attached to the first class, therefore I didn't know it came first.

.activated .playButton


#230

This one is like this, so then,

It would stay as this, right?
.playButtona.active

and not this?
.active.playButtona

https://jsfiddle.net/mcf5zbmx/


#231

Although there may be no visual difference the problem is that because the anchor is floated the list element will have zero height and should you at sometime want a border or background colour to the list element it would not work as you expect.

Floats are removed from the flow and a parent that only contains floats behaves as if it is empty. Floating the list element fixes this and makes the code more robust.


#232

If there was no wrap, then it would be,

.playButtone.activated

Because there's a wrap, .activated comes first.


#233

Because this code has no wrap, as I understand it.
https://jsfiddle.net/dth0nro9/

It would stay as this:
.playButtone.activated

Correct me if I'm wrong.


#234

background: white;

Hides the audio player text. here.

Audio Player

.playButtone.activated {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  fill: #aaff00;
  background: white;
}

https://jsfiddle.net/yre2uxcL/86/

background: white;

Doesn't hide the blank text here, how come?

.blank{
  position: absolute;
  left:108px;
  top: 124px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  cursor: pointer;
 background:white;
 z-index:-1;
}

If I wanted to hide the blank text with a color, like I did with audio player, how would I do that here?


#235

The one that works (audio player) does not have a negative z-index:-1 on your .activated class

The one that does not work still has it's bg layered underneath with z-index:-1 on .activated

Remember what I said earlier...

text-indent:-99em;


#236

I was working on this:

Would this work?
https://jsfiddle.net/yre2uxcL/142/

.linkse a:nth-of-type(14) {
  position: relative;
  text-align: center;
  line-height: 50px;
  left: 108px;
  top: 124px;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border: none;
  background: red;
}

#237

position: absolute; doesn't work on that
https://jsfiddle.net/yre2uxcL/154/

position: relative; hides the text, but if you give it a background color, it doesn't show.
https://jsfiddle.net/yre2uxcL/142/


#238

All you need is ...

`
.linkse a:nth-of-type(14) {
text-indent:-99em;
}

Or just add text-indent:-99em; into your existing selector and don't depend on bg colors to hide it


#239

My question is, how does adding position relative, hide the text?

Never mind about that.

left: 108px;
top: 124px;

Was pushing the block off the screen.


#240

What's the difference between using these, as a placeholder?

<a>Blank</a>

and this?

<a href="#"></a>


#241

post #203

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.