Accessing the button-container from the exit button inside it's container

I think you need to remove the slide class from the curtain once you exit.

e.g.

  function resetPage() {
    resetVideos(".embed-youtube, .panel");
    document.querySelector(".remove.slide").classList.remove("slide");
  }

Otherwise it will start again.

Edit: Actually you will need to loop through all the videos that have the slide class attached as on other pages you may have multiple videos open. I just tested n the first page where there was only one video but I notice you have multiple videos on the other pages.

**You need to put my code above in a forEach loop and remove all the slide classes. **

Something like this.

  function resetSlide(slideSelector) {
    const allSlides = document.querySelectorAll(slideSelector);

    function removeSlides(slide) {
      slide.classList.remove("slide");
    }
    allSlides.forEach(removeSlides);
  }

  function resetPage() {
    resetVideos(".embed-youtube, .panel");
    resetSlide(".slide");
    //document.querySelector(".remove.slide").classList.remove("slide");
  }
1 Like

I have a question.

If I put a button on Page 1 .container1

When clicked on would take you directly to a div that is on Page 3. .container3

Meaning, it would take you to the div without user input, other than clicking on the button that would take you to the div. Meaning, the user isn’t scrolling to the location, it just happens on its own.

Is that something that is able to be done?

Would that be done using this?

window.scrollTo(0, 0);

or a different way?

Yes that’s possible and commonly done with a fragment identifier in the html.

e.g.

<a href="#mydiv">Go to my Div</a>

...

<div id="mydiv">My Div </div>

However as your container is hidden you would still need js to open the container first to allow the anchor to navigate. Therefore it may be better to stick with your button and let js open the container and then navigate to the div via its id.

e.g. document.getElementById("mydiv").scrollIntoView({ behavior: "smooth" });

Basic codepen.

(Of course that codepen could be done without JS as we don’t need to open the container but was just for example.)

1 Like

I am going to use the updated button on here to use as an example of how to send someone to a div on the page.

https://jsfiddle.net/qe7109ku/1/

What ways would work to do this?

Is there one best way, different ways.

I think by reading into what you said, it may be easier to do it this way, using a button.

Written like this, or close to it maybe.

<button id="mydiv" class="exit updated" type="button"><span>Updated</span></button>

document.getElementById("mydiv").scrollIntoView({ behavior: "smooth" });

Where is the js that you had on your main pages that opens the associated container and does all the housekeeping on the videos etc? The exit button code needs to be working first and then you would tap into that routine and go to a specific div.

What you have doesn’t make a lot of sense in respect of you say go to page3 but it seems like you want to go to a specific div on page3? Is this correct? If so why not just go to the first one on that page and don’t confuse anyone?

Unless you can be clear on what you want to happen first then there’s not much point in posting code as a guess.

I don’t understand why the buttons on that demo aren’t doing what they already did. Are you going to add more buttons to go to a specific div?

Too many variables to work out.

I wasn’t able to figure that part out: See Here

Those could say, Backwards / Forwards, if that makes better sense.

or, Maybe there is only a Forwards/ or Next Page button on the first page.

We already solved those buttons in various posts so I’m a bit lost. You would just use your new buttons css and html code instead of the original buttons. The js would have remained the same. Find a page with working buttons and then use the new buttons!

I still fail to see what that has to do with your new question of going to a specific div?

I added new buttons, the other ones used different css code than these.

I don’t know why they are not unhiding the div’s when they are clicked on.

Ok, It’s because you added a span to the button and it’s the span that is being clicked. The span has no class so the routine fails.

It might be easier to add a class to the span (<span class="p3">)

<button class="exit exitPage3" type="button"><span class="p3">Page 3</span></button>

Then the js could check that class:

e.g. if (e.target.classList.contains("p3"))

Full JS.

function exitClickHandler(e) {
    
    if (e.target.classList.contains("p1")) {
      hideContainers(".container2, .container3");
      showContainers(".container1");
      resetPage();
      console.log('Page1');
    }
    if (e.target.classList.contains("p2")) {
      hideContainers(".container1, .container3");
      showContainers(".container2");
      resetPage();
      console.log('Page2');
    }
    if (e.target.classList.contains("p3")) {
      hideContainers(".container2, .container1");
      showContainers(".container3");
      resetPage();
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }

Remember to add the class to the spans in each button.

1 Like

They all now work execept for the updated button, which is meant to scroll to a predetermined div on some container. https://jsfiddle.net/oehdvnz0/

You don’t seem to have added any code in order to do this. I gave you basic working examples which should have been easy for you to implement into the existing js?

You need to add the updated class to the span in the updated button.


 <div class="button-container">
      <button class="exit exitPage3" type="button"><span class="p3">Page 3</span></button>
      <button class="exit updated" type="button"><span class="updated">Updated</span></button>
      <button class="exit exitPage2" type="button"><span class="p2">Page 2</span></button>
  </div>

Then you need to detect that class and act accordingly.

  function exitClickHandler(e) {
    if (e.target.classList.contains("p1")) {
      hideContainers(".container2, .container3");
      showContainers(".container1");
      resetPage();
      console.log('Page1');
    }
    if (e.target.classList.contains("p2")) {
      hideContainers(".container1, .container3");
      showContainers(".container2");
      resetPage();
      console.log('Page2');
    }
    if (e.target.classList.contains("p3")) {
      hideContainers(".container2, .container1");
      showContainers(".container3");
      resetPage();
      console.log('Page3');
    }
     if (e.target.classList.contains("updated")) {
     // get the id of the target div
     const myDiv = document.getElementById("mydiv");
     // I'm assuming this div is on page3 
     hideContainers(".container2, .container1");
      showContainers(".container3");
      resetPage();
     myDiv.scrollIntoView({ behavior: "smooth" });
      console.log('updated');
    } else {
   // we don't want the last function to read this otherwise it scrolls back to the top which is why its in an else statement.
    window.scrollTo(0, 0);
    }
  }

If the div isn’t on page three then use the appropriate hide/show structures.

Then you need to put the id on the element you want to scroll to.

<div id="mydiv" class="curtain remove">

When I click on the updated button, nothing is happening.
https://jsfiddle.net/x2au3bL8/3/

 <div id="mydiv" class="curtain remove">
      <div class="ratio-keeper">
        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="fan">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>
        <div class="cross"></div>

        <div class="panel"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playk cover embed-youtube-play" type="button"></button>
        </div>
      </div>

      <div class="button-container">
        <button class="exit exitPage2" type="button"><span class="p2">Page 2</span></button>
        <button class="exit" type="button"><span class="p1">Page 1</span></button>
      </div>
    </div>
  </div>
</div>

Then go back to my last post and see what you missed out :slight_smile:

There are 3 things you should have done but you only did 2 of them!!

It’s all in my post in black and white.

<span class="updated">Updated</span>

1 Like

Am I allowed to put an svg in here like this? https://jsfiddle.net/usfym8hg/1/

  <div class="button-container">

      <button class="exit exitPage3" type="button"><span class="p3"><svg viewBox="-100.9 99.1 61.9 105.9" width="14" height="14">
            <path d="M-98.2 158.8l43.5 43.5c1.7 1.7 4 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.7-6.5l-37.2-37.2 37.2-37.2c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.6-6.5c-1.8-1.9-4.2-2.8-6.6-2.8-2.3 0-4.6.9-6.5 2.6-11.5 11.4-41.2 41-43.3 43l-.2.2c-3.6 3.6-3.6 10.3 0 13.9z"></path>
          </svg></span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span class="p2"><svg viewBox="-100.9 99.1 61.9 105.9" width="14" height="14">
            <path d="M-41.7 145.3l-43.5-43.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.7c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.7 6.5L-61 152l-37.2 37.2c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.6 6.5c1.8 1.9 4.2 2.8 6.6 2.8 2.3 0 4.6-.9 6.5-2.6 11.5-11.4 41.2-41 43.3-43l.2-.2c3.6-3.6 3.6-10.4 0-13.9z"></path>
          </svg></span></button>
    </div>

I’m trying to add button-container2 to put the updated buttons in, but I’m stuck.

https://jsfiddle.net/usfym8hg/2/

I’m confused on how this would be done.

.button-container .button-container2 {
top: 480px;
}
    <div class="button-container2">
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
    </div>
.button-container .button-container2.exit.updated::before,
.button-container .button-container2.exit.updated::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

I did it: https://jsfiddle.net/7nojxp5m/

.button-container {
  position: absolute;
  top: 480px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 50px auto 0;
  justify-content: center;
  align-content: center;
  max-width: 385px;
  gap: 200px;
  font-family: 'Roboto', sans-serif;
  padding-bottom:100px;
}

.button-container2{
  position: absolute;
  top: 580px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
   margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 80px auto 0;
  justify-content: center;
  align-content: center;
  max-width: 300px;
  gap: 40px;
  font-family: 'Roboto', sans-serif;
  padding-bottom:100px;
}


.button-container .exit {
  position: relative;
  width: 25px;
  height: 50px;
 /* margin: 20px;*/
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor: pointer;
}



.button-container2 .exit.updated {
  position: relative;
  width: 100px;
  height: 50px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor: pointer;
}

.button-container .exit span,
.button-container2 .exit.updated span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: #fff;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.button-container .exit:hover span,
.button-container2 .exit.updated:hover span{
  letter-spacing: 3px;
}

.button-container .exit span::before,
.button-container2 .exit.updated span::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.button-container .exit.exitPage2:hover span::before,
.button-container2 .exit.updated:hover span::before{
  transform: skewX(45deg) translateX(200%);
}

.button-container .exit::before,
.button-container2 .exit.updated::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::before,
.button-container2 .exit.updated:hover::before{
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::after,
.button-container2 .exit.updated::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::after,
.button-container2 .exit.updated:hover::after{
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::before,
.button-container .exit::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.button-container .exit.exitPage2::before,
.button-container .exit.exitPage2::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.button-container2 .exit.updated::before,
.button-container2 .exit.updated::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

You can’t really do that in a fluid layout. Try something like bottom:auto and top:80%; It won’t be perfect but you could tweak it at small widths with media queries.

As I said earlier the structure you have doesn’t allow for precise positioning of those buttons because they need to be related to how the fan resizes so they must be controlled from that element somehow or by a parent with the same characteristics.

The page would need restructuring so that the buttons can follow the fan in the normal flow of the page and just sit underneath. However that is awkward because you also have videos appearing and disappearing at different sizes and probably resizing at different rates.

That’s why I keep saying that “absolute elements are removed from the flow and don’t care about other content”. You either have to compromise or restructure (and probably still copmpromise).

Yes that is allowed.