Fix redraw flashes at the JavaScript example roulette

index.dd

@@ -28,8 +28,7 @@ $(DIVC intro, $(DIV, $(DIV,
                 $(P Upon approval it will be showcased here on a random schedule.)
             )
         )
-        $(DIVID your-code-here-default,
-$(RUNNABLE_EXAMPLE
+$(EXTRA_EXAMPLE
 $(RUNNABLE_EXAMPLE_STDIN
 The D programming language
 Modern convenience.
@@ -50,7 +49,6 @@ void main()
 }
 ----
 )
-)
 $(EXTRA_EXAMPLE
 $(RUNNABLE_EXAMPLE_STDIN 2.4 plus 2.4 equals 5 for sufficiently large values of 2.)
 ----
@@ -98,8 +96,31 @@ void main()
 ----
 )
 
+) $(COMMENT your-code-here)
+))) $(COMMENT intro, div, div)
+
+$(COMMENT
+Picking the frontpage example after the page has loaded leads to reflows
+and re-rendering. Hence, we pick the example as soon as possible
+)
+$(SCRIPT
+    // Searches any object for the first hit.
+    function findFirst(el, fn) {
+        return Array.prototype.filter.call(el, fn)[0];
+    }
+    (function() {
+    // randomly pick one example and bootstrap the runnable editor
+    var examples = document.getElementsByClassName('your-code-here-extra');
+    var rouletteIndex = Math.floor(Math.random() * examples.length);
+    var rouletteChild = examples[rouletteIndex];
+
+    // step 1: select the .runnable-example <div>
+    var rouletteChildNode = findFirst(rouletteChild.children, function(e) { return e.className.indexOf("runnable-example") != -1; });
+    // step 2: select the first <pre> element (of the .runnable-example <div>)
+    var el = findFirst(rouletteChildNode.children, function(e) { return e.nodeName == "PRE";});
+    rouletteChild.style.display = "block";
+    })();
 )
-)))
 
 $(DIVC more,
 

js/dlang.js

@@ -58,14 +58,6 @@
             $('#search-query input').focus();
         });
 
-        // [your code here] rotation for index.html
-        var $examples = $('.your-code-here-extra .d_code');
-        if ($examples.length) {
-            var n = Math.floor(Math.random() * ($examples.length+1));
-            if (n)
-                $('#your-code-here-default .d_code').replaceWith($examples[n-1]);
-        }
-
         // Insert the show/hide button if the contents section exists
         $('.page-contents-header').append('<span><a href="javascript:void(0);">[hide]</a></span>');