From 6b27c4f6d4d5ae152d126b374a378ca0d277350d Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Wed, 6 Mar 2019 12:02:52 +0000
Subject: [PATCH] Hide refreshing Use two iframes, and display the one that is
 in the process of refreshing below the other. Alternate between showing the
 two.

---
 _site/auto-refresh.html | 28 +++++++++++++++++++++-------
 auto-refresh.md         | 28 +++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/_site/auto-refresh.html b/_site/auto-refresh.html
index 11f5317..5229d6c 100644
--- a/_site/auto-refresh.html
+++ b/_site/auto-refresh.html
@@ -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;
diff --git a/auto-refresh.md b/auto-refresh.md
index 3abbe9c..283db4c 100644
--- a/auto-refresh.md
+++ b/auto-refresh.md
@@ -4,16 +4,22 @@ description: News articles written by Reading School students in year 8
 layout: none
 ---
 
-<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>
 <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>
     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>
@@ -26,9 +32,17 @@ layout: none
         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;