I have 2 divs on the webpage, the flipbook that is created using turnjs and another div containing the buttons. When I load the page, the divs are in the center of the page: https://imgur.com/a/lLb2g2l . After I refresh the page, the divs will shift up and stay there even after refreshing the page. This is how the page looks after refreshing: https://imgur.com/a/guwW0RT .
This is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/turn.min.js"></script> <link rel="stylesheet" href="css/test.css" /> </head> <body> <div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div style="background-image:url(brochure/Brochure_Main.jpeg)"></div> <div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div> <div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div> </div> </div> </div> <div class="buttons"> <button type="button" onclick="thePreviousPage()" class="button">Previous</button> <button type="button" onclick="theHomePage()" class="button">Home</button> <button type="button" onclick="theNextPage()" class="button">Next</button> </div> <script type="text/javascript"> theWindowHeight = $(window).height(); theWindowWidth = $(window).width(); // Create the flipbook $('.flipbook').turn({ // Width width: theWindowWidth*0.9, // Height height:theWindowHeight*0.7, // Elevation elevation: 50, // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true }); console.log($('.flipbook').turn('size')); function thePreviousPage() { $('.flipbook').turn('previous'); } function theHomePage() { $('.flipbook').turn('page',1); } function theNextPage() { $('.flipbook').turn('next'); } </script> </body> </html>
This is the css:
body{ overflow:hidden; background-color:#fcfcfc; margin:0; padding:0; } .flipbook-viewport{ overflow:hidden; width:100%; height:100% !important; overflow-anchor: none; } .flipbook-viewport .container{ position: absolute; margin: auto; top: 45%; left: 37%; height: 100%; width: 100%; } .flipbook-viewport .flipbook{ top: -30%; left: -32%; } .flipbook { transform: translate(-50%, -50%); } .flipbook-viewport .page{ background-color:white; background-repeat:no-repeat; background-size:100% 100%; } .flipbook .page{ -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); -moz-box-shadow:0 0 20px rgba(0,0,0,0.2); -ms-box-shadow:0 0 20px rgba(0,0,0,0.2); -o-box-shadow:0 0 20px rgba(0,0,0,0.2); box-shadow:0 0 20px rgba(0,0,0,0.2); } .flipbook-viewport .page img{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin:0; } .flipbook-viewport .shadow{ -webkit-transition: -webkit-box-shadow 0.5s; -moz-transition: -moz-box-shadow 0.5s; -o-transition: -webkit-box-shadow 0.5s; -ms-transition: -ms-box-shadow 0.5s; -webkit-box-shadow:0 0 20px #ccc; -moz-box-shadow:0 0 20px #ccc; -o-box-shadow:0 0 20px #ccc; -ms-box-shadow:0 0 20px #ccc; box-shadow:0 0 20px #ccc; } .button{ position: absolute; align-items: center; left: 50%; bottom: 10%; }
How do I ensure that the contents will not shift up after the page refreshes?
Advertisement
Answer
You just need to do some css updates, here are the few css classes are updated,
.flipbook-viewport { overflow: hidden; width: 100%; height: 100% !important; overflow-anchor: none; top: 100px; position: relative; } .flipbook-viewport .container { position: relative; margin: auto; top: 45%; left: 37%; height: 100%; width: 100%; } .flipbook-viewport .flipbook { left: auto; top: auto; }