Add a back button – HTML & CSS – SitePoint Forums

0

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/


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

Share.

Comments are closed.