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