dodgeitorelse3 Posted August 28, 2022 Share Posted August 28, 2022 I have found some code online to make flip pages (a book if you will). I am trying to hide the previous button before the book is opened or the next button when end of book is reached. index.html is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Book</title> <link rel="stylesheet" href="./style.css"> <script src="./main.js" defer></script> <script src="https://kit.fontawesome.com/b0f29e9bfe.js" crossorigin="anonymous"></script> </head> <body> <!-- Previous Button --> <button id="prev-btn"> <i class="fas fa-arrow-circle-left"></i> </button> <!-- Book --> <div id="book" class="book"> <!-- Paper 1 --> <div id="p1" class="paper"> <div class="front"> <div id="f1" class="front-content"> <h1>Front 1</h1> </div> </div> <div class="back"> <div id="b1" class="back-content"> <h1>Back 1</h1> </div> </div> </div> <!-- Paper 2 --> <div id="p2" class="paper"> <div class="front"> <div id="f2" class="front-content"> <h1>Front 2</h1> </div> </div> <div class="back"> <div id="b2" class="back-content"> <h1>Back 2</h1> </div> </div> </div> <!-- Paper 3 --> <div id="p3" class="paper"> <div class="front"> <div id="f3" class="front-content"> <h1>Front 3</h1> </div> </div> <div class="back"> <div id="b3" class="back-content"> <h1>Back 3</h1> </div> </div> </div> </div> <!-- Next Button --> <button id="next-btn"> <i class="fas fa-arrow-circle-right"></i> </button> </body> </html> main.js is as follows: // References to DOM Elements const prevBtn = document.querySelector("#prev-btn"); const nextBtn = document.querySelector("#next-btn"); const book = document.querySelector("#book"); const paper1 = document.querySelector("#p1"); const paper2 = document.querySelector("#p2"); const paper3 = document.querySelector("#p3"); // Event Listener prevBtn.addEventListener("click", goPrevPage); nextBtn.addEventListener("click", goNextPage); // Business Logic let currentLocation = 1; let numOfPapers = 3; let maxLocation = numOfPapers + 1; //start hide or show previous and next buttons if(currentState == 1){ prevBtn.style.display = "none"; nextBtn.style.display = "inline"; }else if(currentState == 4){ prevBtn.style.display = "inline"; nextBtn.style.display = "none"; }else{ prevBtn.style.display = "inline"; nextBtn.style.display = "inline"; } //end hide or show previous and next buttons function openBook() { book.style.transform = "translateX(50%)"; prevBtn.style.transform = "translateX(-180px)"; nextBtn.style.transform = "translateX(180px)"; } function closeBook(isAtBeginning) { if(isAtBeginning) { book.style.transform = "translateX(0%)"; } else { book.style.transform = "translateX(100%)"; } prevBtn.style.transform = "translateX(0px)"; nextBtn.style.transform = "translateX(0px)"; } function goNextPage() { if(currentLocation < maxLocation) { switch(currentLocation) { case 1: openBook(); paper1.classList.add("flipped"); paper1.style.zIndex = 1; break; case 2: paper2.classList.add("flipped"); paper2.style.zIndex = 2; break; case 3: paper3.classList.add("flipped"); paper3.style.zIndex = 3; closeBook(false); break; default: throw new Error("unkown state"); } currentLocation++; } } function goPrevPage() { if(currentLocation > 1) { switch(currentLocation) { case 2: closeBook(true); paper1.classList.remove("flipped"); paper1.style.zIndex = 3; break; case 3: paper2.classList.remove("flipped"); paper2.style.zIndex = 2; break; case 4: openBook(); paper3.classList.remove("flipped"); paper3.style.zIndex = 1; break; default: throw new Error("unkown state"); } currentLocation--; } } My attempt is in the main.js file starting at line #19. Any help would be greatly appreciated. Quote Link to comment Share on other sites More sharing options...
Solution dodgeitorelse3 Posted August 29, 2022 Author Solution Share Posted August 29, 2022 I have solved my issue. In index.html I changed the previous button to display:none <!-- Previous Button --> <button id="prev-btn" style="display:none;"> <i class="fas fa-arrow-circle-left"></i> </button> And then in main.js I added if(currentState == 1){ prevBtn.style.display = "none"; } underneath the Business Logic section. I also add the display inline or none in 2 places in each of the goNextPage function and the goPrevPage function so they now look like this: function goNextPage() { if(currentLocation < maxLocation) { switch(currentLocation) { case 1: openBook(); prevBtn.style.display = "inline"; paper1.classList.add("flipped"); paper1.style.zIndex = 1; break; case 2: paper2.classList.add("flipped"); paper2.style.zIndex = 2; break; case 3: nextBtn.style.display = "none"; paper3.classList.add("flipped"); paper3.style.zIndex = 3; closeBook(false); break; default: throw new Error("unkown state"); } currentLocation++; } } function goPrevPage() { if(currentLocation > 1) { switch(currentLocation) { case 2: closeBook(true); prevBtn.style.display = "none"; paper1.classList.remove("flipped"); paper1.style.zIndex = 3; break; case 3: paper2.classList.remove("flipped"); paper2.style.zIndex = 2; break; case 4: openBook(); nextBtn.style.display = "inline"; paper3.classList.remove("flipped"); paper3.style.zIndex = 1; break; default: throw new Error("unkown state"); } currentLocation--; } } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.