Not seeing the square links with javascript disabled

[asasass]

Code 2 fixed

Edit fiddle - JSFiddle - Code Playground

Cover was supposed to be under wrap.

<div class="wrap">
<div class="cover"></div>

[asasass]

I now need to figure out how to get this to work

.cover {
  display: none;
}
.inactive .cover {
  display: block;
}

I think this needs to be added too:

.hidee,
.wrap.inactive a {
  display: none;
}

Because this above code goes with this:

.inactive .cover {
  display: block;
}

In these:

Code 1

javascript disabled

Edit fiddle - JSFiddle - Code Playground

javascript enabled

Edit fiddle - JSFiddle - Code Playground

This is the working version of that code, but cover needs to be under wrap, which it is not here.
https://jsfiddle.net/ffvkbLjw/538/

This working version which is different, can be used as a template to figure out how to get the above code working.
https://jsfiddle.net/ffvkbLjw/545/

In this code is this, which would be the markup code structure I’m trying to implement in the code not working.

.cover {
  display: none;
}

.inactive .cover {
  display: block;
}

.hidee,
.wrap.inactive a {
  display: none;
}

<div class="wrap">
<div class="cover"></div>
<ul class="nav">
<div class="playButtone" data-audio="">

---

To know that Code 1 is working as it should.

Remove inactive from the rule-set with the javascript removed.

.inactive .cover {
  display: block;
}

When you do that, the cover should be showing, and not the links.

  .cover {
  display: block;
}

[asasass]

Code 1

When I remove .inactive from here, the cover now shows.

Edit fiddle - JSFiddle - Code Playground

.inactive .cover {
  display: block;
}

When I add the javascript back in, the cover is now not showing.

Edit fiddle - JSFiddle - Code Playground

[asasass]

Code 1

I added this rule-set:
document.querySelector(".wrap").classList.add("inactive");

To this:

  document.querySelector(".wrap").classList.add("inactive");
  var playButton = document.querySelector(".wrap");
  playButton.addEventListener("click", initialOverlayClickHandler);
}());

And I added this rule-set :

link.classList.remove("inactive");

to this

  function hideInitialOverlay(button) {
    var link = upTo(button, ".wrap");
    link.classList.remove("activee");
    link.classList.remove("inactive");
    hide(button.querySelector(".cover"));
    button.classList.add("activee");
  }

And now the cover is showing.

Edit fiddle - JSFiddle - Code Playground

But the audio isn’t playing after you click on the cover, so I did something wrong.

[asasass]

Code 1

I just removed this rule-set
link.classList.remove("activee");

from here:

  function hideInitialOverlay(button) {
    var link = upTo(button, ".wrap");
    link.classList.remove("inactive");
    hide(button.querySelector(".cover"));
    button.classList.add("activee");
  }

or was that supposed to stay?

I almost have this working. @Paul_Wilkins

I just have a few questions, and I got it.

[asasass]

Code 2

Question:
@Paul_Wilkins

Do you think I should change rule-set 1:

Keep in mind, both codes work.

Is the code below this one better to use?
or would it be unnecessary, and not needed here.

rule-set 1

Edit fiddle - JSFiddle - Code Playground

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

To rule-set 2?

When starting from the title, it has two siblings, nav and playButtone. The title has no children, and its parent is wrap.

To get from the title to playButtone, the most reliable way is to go up to its parent called wrap, and then from there to playButtone

rule-set 2

Edit fiddle - JSFiddle - Code Playground

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

[PaulOB]

@Paul_Wilkins

The usual process is to not use CSS to hide things by default,

In the original code I used display none to hide the cover by default as it was only decorative thus leaving all the links usable by default when js is off.

It was a simple solution that works fine in my original code. The html also displayed well with css and js off and was the reason that it was structured that way using lists etc.

It’s rather annoying that at 1000 post later the op starts pulling out the things that made it work and were discussed at the time.

At some point there needs to be a process of learning or we just turn into ground hog day and live the same day over and over again

[TechnoBear]

@Paul_Wilkins

You’re approaching this all backwards. You don’t start with the finished product and then try and make it work in different situations.

Instead, you create it with the HTML only first, making sure that the HTML all by itself works in different situations. Then when that HTML is working you add on the CSS to make it look better in a wide variety of situations.

Then, when all of that is working, that is when you start working on the JavaScript.

While I agree with all of that, @Paul_Wilkins, you haven’t mentioned the most important step. That’s probably because it comes so naturally to most of us that we don’t even think of it as a step, but I suspect asasass has never been introduced to the idea, as he seems to skip this stage.

The very first step is planning. I don’t mean getting an idea and immediately flinging code at it. I mean sitting down and thinking about the project. What is it for? What content does it require? How should it look? How should it behave? Think through the entire project carefully. Don’t just think about one single aspect, but about the page / project as a whole. How do the parts relate to each other? Does the behaviour of one affect the behaviour of another?

In the real world, doing the first thing which occurs to you without considering the consequences is seldom a good idea. “My shoes keep falling off. I know! I’ll superglue them to my feet!” For all I know, that might work brilliantly - but you’re likely to regret the decision when you want to take them off again. Tying your laces would have been a simpler solution. As with life, so with code: simpler is often better.

Once you have a clear idea of the finished project, then you can start with the content and add the HTML markup, then progress to the CSS and finally the JS.

[asasass]

@Paul_Wilkins I have 1 other question, and I think that will do it, unless you say otherwise.

I need to address this question first though, before I can ask my other question that concerns Code 1.

#46

[Paul_Wilkins]

@asasass

@Paul_Wilkins I have 1 other question, and I think that will do it, unless you say otherwise.

I need to address this question first though, before I can ask my other question that concerns Code 1.

#46

I’m working on something right now, and I’ll come back to this question as soon as I’ve completed that.

[asasass]

ok. Thank you.

[asasass]

I also have another question that deals with the same code that I don’t think I have implemented in it yet, that would be added to the javascript part.

[Paul_Wilkins]

@asasass

@Paul_Wilkins I have 1 other question, and I think that will do it, unless you say otherwise.

I need to address this question first though, before I can ask my other question that concerns Code 1.

#46

The second set of code is not better or worse, it is just required based on the structure of the HTML code that you are using.

[asasass]

Would you say that it’s more appropriate to use this:

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

Rather than this?

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

Based on the markup of the html?

[Paul_Wilkins]

@asasass

Would you say that it’s more appropriate to use this:

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

Rather than this?

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

Based on the markup of the html?

What is the markup of the html that you plan to use with either of those codes?

[asasass]

Edit fiddle - JSFiddle - Code Playground

<audio></audio>

<div class="wrap">
<div class="cover"></div>
  <ul class="nav">
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li><a> Audio Player</a></li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
    </li>
  </ul>

  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">
   
   
    <svg class="playe" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <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">
        <title>PLAY</title>
      </path>
    </svg>
    <svg class="pausee hidee" focusable="false" width="36" height="40" viewbox="0 0 60 100">
      <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">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>

[Paul_Wilkins]

Well assuming that the playButton click event will always be coming from inside of the playButton (from either the play or pause button), then the second set of code is better.

[asasass]

My 2nd question is, how would I hide the playbutton using the javascript?

Edit fiddle - JSFiddle - Code Playground

[Paul_Wilkins]

@asasass

My 2nd question is, how would I hide the playbutton using the javascript?
https://jsfiddle.net/ffvkbLjw/809/

You would do it from the end of the code.

  document.querySelector(".wrap").classList.add("inactive");
  var playButton = document.querySelector(".wrap");
  playButton.addEventListener("click", initialOverlayClickHandler);

But first, an improvement need to happen to that code.
That playButton variable isn’t the play button, it’s the wrapper.

  var wrapper = document.querySelector(".wrap");
  wrapper.classList.add("inactive");
  wrapper.addEventListener("click", initialOverlayClickHandler);

Then, you can get the play button from the wrapper, and hide it.
In fact, you have a hideAllButtons() function, which can be used instead.

  var wrapper = document.querySelector(".wrap");
  var playButton = wrapper.querySelector(".playButtone");
  wrapper.classList.add("inactive");
  wrapper.addEventListener("click", initialOverlayClickHandler);
  hideAllButtons(playButton);

[asasass]

From this:

  function initialOverlayClickHandler(evt) {
    var button = upTo(evt.target, ".wrap");
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }

to this?

 function initialOverlayClickHandler(evt) {
  var wrapper = document.querySelector(".wrap");
  var playButton = wrapper.querySelector(".playButtone");
  wrapper.classList.add("inactive");
  wrapper.addEventListener("click", initialOverlayClickHandler);
  hideAllButtons(playButton);
  }