me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide refreshing

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
_site/auto-refresh.html
View File

@@ -1,13 +1,19 @@
<script src="/js/jquery.min.js"></script> <iframe id="articles-1" class="articles" src="/"></iframe>
<iframe id="articles-2" class="articles" src="/"></iframe>
<iframe id="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> <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> <script>
window.setInterval(function() { 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(); 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> </script>
<style> <style>
@@ -20,9 +26,17 @@
padding: 0; padding: 0;
border: none; border: none;
} }
#articles { .articles {
width: 70%; width: 70%;
float: left; position: absolute;
top: 0;
left: 0;
}
#articles-1 {
z-index: 2;
}
#articles-2 {
z-index: 1;
} }
.twitter-timeline { .twitter-timeline {
width: 30% !important; width: 30% !important;

28
auto-refresh.md
View File

@@ -4,16 +4,22 @@ description: News articles written by Reading School students in year 8
layout: none layout: none
--- ---
<script src="/js/jquery.min.js"></script> <iframe id="articles-1" class="articles" src="/"></iframe>
<iframe id="articles-2" class="articles" src="/"></iframe>
<iframe id="articles" src="/"></iframe>
<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> <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>
<script> <script>
window.setInterval(function() { 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(); 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> </script>
<style> <style>
@@ -26,9 +32,17 @@ layout: none
padding: 0; padding: 0;
border: none; border: none;
} }
#articles { .articles {
width: 70%; width: 70%;
float: left; position: absolute;
top: 0;
left: 0;
}
#articles-1 {
z-index: 2;
}
#articles-2 {
z-index: 1;
} }
.twitter-timeline { .twitter-timeline {
width: 30% !important; width: 30% !important;