while the code I wrote works, because the page have couple of these absolute elements. it takes a couple milliseconds to hide them, so users who have low-end hardware will sometimes see the absolute elements of page x, on page y.
Is there any way to make absolute elements stick to their own page without jumping on screen for couple milliseconds?
var dummy = document.getElementById('dummy');
new Pageable("#container", {
onInit: function(data){
adjustItems(data.index)
},
onScroll: function(data){
adjustItems(data.index)
}
});
function adjustItems(i){
if(i === 1)
dummy.style.display = 'block';
else
dummy.style.display = 'none';
}img{
position:absolute;
bottom:0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pageable/0.6.8/pageable.min.js"></script>
<div id="container">
<div data-anchor="Page 1">I don't want to see the dummy on this page</div>
<div data-anchor="Page 2">I want to see dummy on this page
<img id="dummy" src="https://i.postimg.cc/XYgDXZPs/dummiesplanet-bg.png"></div>
</div>Have you considered flipping this around? Have the absolute position elements set to display: none; in CSS. Then in your JS, toggle them to display: block; when you want to show them.
This would remove the 'flash' of these elements for users on old hardware, at the cost of possibly having a delay of the elements showing up. This might be the lesser of the two evils.
var dummy = document.getElementById('dummy');
new Pageable("#container", {
onInit: function(data){
adjustItems(data.index)
},
onScroll: function(data){
adjustItems(data.index)
}
});
function adjustItems(i){
if(i === 1)
dummy.style.display = 'block';
else
dummy.style.display = 'none';
}img{
display: none;
position:absolute;
bottom:0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pageable/0.6.8/pageable.min.js"></script>
<div id="container">
<div data-anchor="Page 1">I don't want to see the dummy on this page. It is not visible and you won't get a flash of it.</div>
<div data-anchor="Page 2">I want to see dummy on this page
<img id="dummy" src="https://i.postimg.cc/XYgDXZPs/dummiesplanet-bg.png"></div>
</div>