Div will always shift up after refreshing the page

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>

JavaScript
​x
 
<!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%;
}

JavaScript
 
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?

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;
}

JavaScript
 
.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;
}
​

Advertisement

Answer