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 |