Not seeing the square links with javascript disabled

Code 1

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

.inactive .cover {
  display: block;
}

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

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.

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

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.

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

  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

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

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 :slight_smile:

5 Likes

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.

6 Likes

@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.

1 Like

ok. Thank you.

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.

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.

1 Like

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?

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

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.

1 Like

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

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

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

But now it’s not working.

No - not that. Look below the functions.