Bugfixes

css/grover-figures.css

@@ -52,23 +52,21 @@ div.svg-fig svg#fig2 .mean-line {
 	width: 600px;
 	display: block;
 	padding: 0;
-	padding-left: 35px;
+	padding-left: 2.4%;
 }
 
 #steps-container {
-	width: 110%;
+	width: 1300px;
 	position: relative;
 	overflow: hidden;
 	display: block;
 	padding: 0;
-	margin-top: 0;
-	margin-bottom: 0;
+	margin: 0;
 }
 
 #fig2-container {
-	float: left;
+	float: right;
 	width: 580px;
-	margin-left: 45px;
 	padding: 0;
 	opacity: 0;
 }
@@ -77,13 +75,12 @@ div.svg-fig svg#fig2 .mean-line {
 	position: fixed;
 	display: block;
 	top: 30%;
-	left: calc(600px - 150px + 45px + 35px + 12.5%);
 }
 
 #fig2-container.graph-scroll-below {
 	position: absolute;
 	bottom: 0px;
-	margin-left: calc(600px - 150px + 35px + 32px + 12.5%);
+	right: 0px;
 }
 
 .play-icon {

groverSearch.html

@@ -152,7 +152,7 @@ <h2 id="performing-the-search">Performing the search</h2>
   . Steps 1 and 2 are just to get the system in an appropriate starting state, and step 3 is where the “magic” happens.
 </p>
 
-<div class="list-container" id="steps-container" style="margin-left: -180px;">
+<div class="list-container" id="steps-container">
   <ol style="list-style-type: decimal" id="steps-list">
 
     <li>
@@ -185,11 +185,6 @@ <h2 id="performing-the-search">Performing the search</h2>
       <ol style="list-style-type: lower-roman; margin-top: 15px">
         <li>
           <em>Apply the oracle operator <span class="math">\(O\)</span>, defined above, to all the qubits.</em>
-
-          <a class="play-icon in-list" onclick="doOracle()" id="oracleBtn">
-            <i class="material-icons">play_circle_filled</i>
-          </a>
-
         </li>
         <li>
           <em>Apply the Hadamard transform <span class="math">\(H^{\otimes n}\)</span> to the haystack qubits.</em>
@@ -219,13 +214,27 @@ <h2 id="performing-the-search">Performing the search</h2>
         \[\ket{\phi} = \frac{1}{\sqrt{N}} \sum_{x=0}^{N-1} \ket{x}\]
       </span>
 
-      It is extremely useful to note that the part of this operation in the brackets (steps <span class="math">\(ii-iv\)</span>) can be seen geometrically as an <em>inversion about the mean</em>.
+      It is extremely useful to note that the part of this operation in the brackets (steps <span class="math">\(ii-iv\)</span>) can be seen geometrically as an <em>inversion about the mean</em>. This means that the whole Grover iteration can be seen as the repeated application of 2 operations:
 
-      <a class="play-icon in-list" onclick="doMean()" id="meanBtn">
-        <i class="material-icons">play_circle_filled</i>
-      </a>
+      <ol style="list-style-type: lower-roman; display: block; width: 45%; margin: 20px auto 5px auto;">
+        <div style="float: right; margin-left: -7px; margin-top: 11px;">
+          <img src="repeat.svg" alt="Repeat" style="margin: 0; opacity: 0.6"/>
+        </div>
+        <li>
+          <em>Oracle</em>
+          <a class="play-icon in-list" onclick="doOracle()" id="oracleBtn">
+            <i class="material-icons">play_circle_filled</i>
+          </a>
+        </li>
+        <li>
+          <em>Inversion about the Mean</em>
+          <a class="play-icon in-list" onclick="doMean()" id="meanBtn">
+            <i class="material-icons">play_circle_filled</i>
+          </a>
+        </li>
+      </ol>
 
-      <br/><br/>
+      <br/>
 
       Let’s consider why this is. The operator <span class="math">\(F = 2(\ket{\phi} \bra{\phi} - I)\)</span> leaves <span class="math">\(\ket{\phi}\)</span> invariant and flips the sign of any state orthogonal to <span class="math">\(\ket{\phi}\)</span>. As <span class="math">\(\ket{\phi}\)</span> is the uniform superposition over all <span class="math">\(n\)</span>-qubit states, the overlap of it and any other <span class="math">\(n\)</span>-qubit state expressed in the computational basis, <span class="math">\(\ket{\psi} = \sum_x a_x \ket{x}\)</span>, is simply the sum of <span class="math">\(\ket{\psi}\)</span>’s eigenvalues multiplied by <span class="math">\(\ket{\phi}\)</span>’s normalisation factor, <span class="math">\(1/\sqrt{N}\)</span>:
 

js/graph-scroll.js

@@ -10,6 +10,7 @@ function graphScroll() {
       isBelow = null,
       container = d3.select('body'),
       containerStart = 0,
+      slideOffset = -1,
       belowStart,
       eventId = Math.random()
 
@@ -27,34 +28,41 @@ function graphScroll() {
       i = i1
     }
 
-    var isBelow1 = pageYOffset > (belowStart - 0.3*window.innerHeight)
+    var isBelow1 = pageYOffset > (belowStart - 0.3*window.innerHeight);
     if (isBelow != isBelow1){
       isBelow = isBelow1
       graph.classed('graph-scroll-below', isBelow)
+      if (isBelow) {
+        graph.style("right", null);
+      }
     }
     var isFixed1 = !isBelow && pageYOffset > (containerStart - 0.3*window.innerHeight)
     if (isFixed != isFixed1){
-      isFixed = isFixed1
-      graph.classed('graph-scroll-fixed', isFixed)
+      isFixed = isFixed1      
+      graph.classed('graph-scroll-fixed', isFixed);
+      if (isFixed) {
+        graph.style("right", 0.5*(window.innerWidth - 1300) - 14.5  + "px");
+      }
     }
 
     // My additions to move the <ol> of algorithm steps
     var containerTopMovey = pageYOffset - containerStart + 0.8*window.innerHeight;
-
-    var moveLeft = 150;
+    
+    var moveLeft = slideOffset;
     var moveVelocity = 0.8;
 
     if (containerTopMovey > 0 && moveVelocity*containerTopMovey < moveLeft) {
-      container.style("margin-left", "-" + moveVelocity*containerTopMovey + "px");
+      container.style("left", "-" + moveVelocity*containerTopMovey + "px");
       resize();
       graph.style("opacity", Math.min(moveVelocity*containerTopMovey/(0.75*moveLeft), 1));
     } else if (containerTopMovey > 0) {
       graph.style("opacity", 1);
-      container.style("margin-left", "-" + moveLeft + "px");
+      container.style("left", "-" + moveLeft + "px");
     } else if (containerTopMovey < 0) {
-      container.style("margin-left", null);
+      container.style("left", null);
       graph.style("opacity", 0);
     }
+
   }
 
   function resize(){
@@ -69,6 +77,9 @@ function graphScroll() {
 
     containerStart = containerBB.top + pageYOffset
     belowStart = containerBB.bottom - graphBB.height  + pageYOffset
+    if (slideOffset == -1) { 
+      slideOffset = container.node().getBoundingClientRect().left - 0.5*(window.innerWidth - 1300);
+    }
   }
 
   function keydown() {
@@ -137,7 +148,7 @@ function graphScroll() {
     d3.select(window)
         .on('scroll.gscroll'  + eventId, reposition)
         .on('resize.gscroll'  + eventId, resize)
-        .on('keydown.gscroll' + eventId, keydown)
+        //.on('keydown.gscroll' + eventId, keydown) Disabled for my purposes
 
     resize()
     d3.timer(function() {