Getting initial to work at the top of the code?

HTML & CSS
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.

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?

1231×403 39.5 KB

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.

3 Likes
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:

With it removed:

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

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.

3 Likes
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.

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;
}

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;

2 Likes
236

I was working on this:

Would this work?

.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

position: relative; hides the text, but if you give it a background color, it doesn’t show.

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
1 Like
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.

2 Likes