Css style

Add a back button – HTML & CSS – SitePoint Forums

If I wanted to add one to page 2 or 3, how would that work in code?

For instance.

How would this functionality be added?

https://jsfiddle.net/rswjq81g/




1 like

I would do it the same way I did the exit buttons in my demo. You can use the same buttons but just add a different destination. Easy!!

That’s why my version is easier to modify because you can have as many containers as you need and just link them accordingly.

In your version, you would need to configure two new return buttons and then call the same code as for exit, but in reverse.

Something like this for the first:

function backClickHandler() {
    const thewrap = document.querySelector(".container2");
    hide(thewrap);
    const cover = document.querySelector(".container1");
    show(cover);
  }

  const backButton = document.querySelector(".back");
  backButton.addEventListener("click", backClickHandler);

The HTML code would be this, but you’ll need to style it and position it the way you want.

Then you will need to do the same (css, js and html) for back button 2 but modify the container references.

In my example, no js were changed at all.



1 like

Relevant code from your demo.

(function showContainer2() {

  function hide(el) {
    el.classList.add("hide");
  }

  function show(el) {
    el.classList.remove("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);

  }
  const cover = document.querySelector(".exit");
  cover.addEventListener("click", exitClickHandler);

  function backClickHandler() {
    const thewrap = document.querySelector(".container2");
    hide(thewrap);
    const cover = document.querySelector(".container1");
    show(cover);
  }

  const backButton = document.querySelector(".back");
  backButton.addEventListener("click", backClickHandler);

  function back2ClickHandler() {
    const thewrap = document.querySelector(".container3");
    hide(thewrap);
    const cover = document.querySelector(".container2");
    show(cover);
  }

  const backButton2 = document.querySelector(".back2");
  backButton2.addEventListener("click", back2ClickHandler);

})();
.back,.back2{
  position:absolute;
  z-index:2;
  top:-40px;
  left:50%;
  transform:translateX(-50%)
}



1 like

I would like the exit/return buttons to both delete players if executed, currently they do now.

Back button functionality has not yet been added to the blue exit button.

The removePlayers now work, meaning that after clicking on a video and then clicking the red exit/next button or the blue exit/previous button, the videos are removed if run.

How do I attach the back button to the blue exit button without breaking it?

https://jsfiddle.net/xu7ajzbk/

  function removePlayerHandler(evt) {
    const el = evt.target;
    let container = el.closest(".container");
    let wrappers;
    if (container) { //if multiple players
      wrappers = container.querySelectorAll(".remove .wrap");
    } else { //if single player
      container = el.closest(".remove");
      wrappers = container.querySelectorAll(".wrap");
    }
    wrappers.forEach(function(wrapper) {
      if (wrapper.player) {
        removePlayer(wrapper);
      }
    });
  }

I think my example at the top uses the same exit routine for the back button, so it should already have the same function, but since the videos don’t work, I can’t verify.

With your multi-container approach, I’m afraid you need a js guru to sort it out because the code jumps around too much for me. I can’t follow the flow at all :frowning:

What do you mean by the videos not playing, they continue when you press the play button.

Can you get one of the blue play buttons to go back to the previous page?

Not on the version I based my example on.

It says video unavailable on the first and nothing on the next page. I just assumed it was either a codepen issue with your videos or it just wasn’t in place when testing the fade out and fade in function and the back button .

On my code, when the play button is clicked, the videos can be seen. https://jsfiddle.net/xu7ajzbk/

It says video is not available.

Why are the videos visible to me?


Yes, in your code, in codepen, videos cannot be seen.

That’s what I see from your violin.

I am on Chrome browser. desk.

Yes me too. I still don’t work.

I can see the video in Firefox, so maybe something is blocking it in my Chrome. Probably a security setting somewhere.

No one has ever mentioned this to me about this code, and I’m sure they would if they couldn’t see any videos showing up.

I can’t help anyone figure out how to delete a player without being able to see the video.