| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 div.columns { | 3 div.columns { |
| 4 direction: rtl; |
| 4 height: 50px; | 5 height: 50px; |
| 5 width: 110px; | 6 width: 110px; |
| 6 margin: 10px 0; | 7 margin: 10px 0; |
| 7 padding: 10px; | 8 padding: 10px; |
| 8 border: solid black; | 9 border: solid black; |
| 9 font-family: Ahem; | 10 font-family: Ahem; |
| 10 font-size: 25px; | 11 font-size: 25px; |
| 11 color: lightblue; | 12 color: lightblue; |
| 12 -webkit-columns: 2; | 13 -webkit-columns: 2; |
| 13 -webkit-column-gap: 10px; | 14 -webkit-column-gap: 10px; |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 62 | 63 |
| 63 <div class="columns"> | 64 <div class="columns"> |
| 64 <br><div><br><input id="t5" type="range"></div> | 65 <br><div><br><input id="t5" type="range"></div> |
| 65 </div> | 66 </div> |
| 66 | 67 |
| 67 <div class="columns"> | 68 <div class="columns"> |
| 68 <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color
: lightblue;"></div> | 69 <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color
: lightblue;"></div> |
| 69 </div> | 70 </div> |
| 70 | 71 |
| 71 <p> | 72 <p> |
| 72 Except here, where the blue border should be around the bigger slice of the
blue square, on the right. | 73 Except here, where the blue border should be around the bigger slice of the
blue square, on the left. |
| 73 </p> | 74 </p> |
| 74 | 75 |
| 75 <div class="columns"> | 76 <div class="columns"> |
| 76 <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background
-color: lightblue;"></div> | 77 <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background
-color: lightblue;"></div> |
| 77 </div> | 78 </div> |
| 78 | 79 |
| 79 <script> | 80 <script> |
| 80 function placeMarker(clientRect) | 81 function placeMarker(clientRect) |
| 81 { | 82 { |
| 82 var marker = document.body.appendChild(document.createElement("div")); | 83 var marker = document.body.appendChild(document.createElement("div")); |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 123 placeMarkersForRange(range); | 124 placeMarkersForRange(range); |
| 124 | 125 |
| 125 var image = document.getElementById("t6"); | 126 var image = document.getElementById("t6"); |
| 126 range.selectNode(image); | 127 range.selectNode(image); |
| 127 placeMarkersForRange(range); | 128 placeMarkersForRange(range); |
| 128 | 129 |
| 129 var div = document.getElementById("t7"); | 130 var div = document.getElementById("t7"); |
| 130 range.selectNode(div); | 131 range.selectNode(div); |
| 131 placeMarkersForRange(div); | 132 placeMarkersForRange(div); |
| 132 </script> | 133 </script> |
| OLD | NEW |