mirror of
https://github.com/mgrove36/bbc-young-reporter.git
synced 2026-05-15 16:51:28 +01:00
Matthew Grove
6b27c4f6d4
Use two iframes, and display the one that is in the process of refreshing below the other. Alternate between showing the two.
47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
<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-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();
|
|
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>
|
|
html, body {
|
|
width: 100%;
|
|
}
|
|
html, body, iframe {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
.articles {
|
|
width: 70%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
#articles-1 {
|
|
z-index: 2;
|
|
}
|
|
#articles-2 {
|
|
z-index: 1;
|
|
}
|
|
.twitter-timeline {
|
|
width: 30% !important;
|
|
float: right;
|
|
}
|
|
</style>
|
|
|