| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 div.columns { | 3 div.columns { |
| 4 direction: rtl; | 4 direction: rtl; |
| 5 height: 50px; | 5 height: 50px; |
| 6 width: 110px; | 6 width: 110px; |
| 7 margin: 10px 0; | 7 margin: 10px 0; |
| 8 padding: 10px; | 8 padding: 10px; |
| 9 border: solid black; | 9 border: solid black; |
| 10 font-family: Ahem; | 10 font-family: Ahem; |
| 11 font-size: 25px; | 11 font-size: 25px; |
| 12 color: lightblue; | 12 color: lightblue; |
| 13 -webkit-columns: 2; | 13 -webkit-columns: 2; |
| 14 -webkit-column-gap: 10px; | 14 -webkit-column-gap: 10px; |
| 15 columns: 2; | 15 columns: 2; |
| 16 column-gap: 10px; | 16 column-gap: 10px; |
| 17 column-fill: auto; | 17 column-fill: auto; |
| 18 display: inline-block; | 18 display: inline-block; |
| 19 vertical-align: bottom; | 19 vertical-align: bottom; |
| 20 orphans: 1; |
| 21 widows: 1; |
| 20 } | 22 } |
| 21 | 23 |
| 22 div.marker { | 24 div.marker { |
| 23 position: absolute; | 25 position: absolute; |
| 24 border: solid dodgerblue; | 26 border: solid dodgerblue; |
| 25 -webkit-box-sizing: border-box; | 27 -webkit-box-sizing: border-box; |
| 26 } | 28 } |
| 27 | 29 |
| 28 input[type="range"] { | 30 input[type="range"] { |
| 29 -webkit-appearance: none; | 31 -webkit-appearance: none; |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 124 placeMarkersForRange(range); | 126 placeMarkersForRange(range); |
| 125 | 127 |
| 126 var image = document.getElementById("t6"); | 128 var image = document.getElementById("t6"); |
| 127 range.selectNode(image); | 129 range.selectNode(image); |
| 128 placeMarkersForRange(range); | 130 placeMarkersForRange(range); |
| 129 | 131 |
| 130 var div = document.getElementById("t7"); | 132 var div = document.getElementById("t7"); |
| 131 range.selectNode(div); | 133 range.selectNode(div); |
| 132 placeMarkersForRange(div); | 134 placeMarkersForRange(div); |
| 133 </script> | 135 </script> |
| OLD | NEW |