function exitClickHandler(e) {
if (e.target.classList.contains("exit")) {
// show exitpPage2 and do all the stuff you need here.
// e.g. show container2 and hide container 2 and 3
// hide / reset running videos etc.
console.log('Page1');
}
if (e.target.classList.contains("exit")) {
// show page2 and do all the stuff you need here.
// e.g. show container2 and hide container 1 and 3
// hide / reset running videos etc.
console.log('Page2');
}
if (e.target.classList.contains("exit")) {
// show page3 and do all the stuff you need here.
// e.g. show container3 and hide container 2 and 1
// hide / reset running videos etc.
console.log('Page3');
}
window.scrollTo(0, 0);
}
I had first tried using transition on the curtains, the curtains stayed removed when I went back to the same page.
Then I tried using animation, where I found, when going back to the previous page, you can see the curtains going up on their own without a button click.
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");
}
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.
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.)
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?
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?
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.
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.