Hide refreshing

Use two iframes, and display the one that is in the process of 
refreshing below the other. Alternate between showing the two.
This commit is contained in:
Matthew Grove
2019-03-06 12:02:52 +00:00
parent 45a34fc124
commit 6b27c4f6d4
2 changed files with 42 additions and 14 deletions

View File

@@ -1,13 +1,19 @@
<script src="/js/jquery.min.js"></script>
<iframe id="articles" src="/"></iframe>
<iframe id="articles-1" class="articles" src="/"></iframe>
<iframe id="articles-2" class="articles" src="/"></iframe>
<p><a class="twitter-timeline" data-dnt="true" href="https://twitter.com/BBCYoungReport?ref_src=twsrc%5Etfw">Tweets by BBCYoungReport</a> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<script>
window.setInterval(function() {
document.getElementById('articles').contentWindow.location.reload();
document.getElementById('articles-1').style.zIndex = "2";
document.getElementById('articles-2').style.zIndex = "1";
document.getElementById('articles-2').contentWindow.location.reload();
document.getElementsByClass('twitter-timeline')[0].contentWindow.location.reload();
}, 10000);
setTimeout(function() {
document.getElementById('articles-2').style.zIndex = "2";
document.getElementById('articles-1').style.zIndex = "1";
document.getElementById('articles-1').contentWindow.location.reload();
}, 10000)
}, 20000);
</script>
<style>
@@ -20,9 +26,17 @@
padding: 0;
border: none;
}
#articles {
.articles {
width: 70%;
float: left;
position: absolute;
top: 0;
left: 0;
}
#articles-1 {
z-index: 2;
}
#articles-2 {
z-index: 1;
}
.twitter-timeline {
width: 30% !important;