diff options
| -rw-r--r-- | src/templates/templates/question-slider.ftl | 2 | ||||
| -rw-r--r-- | web/scripts/growth.js | 10 | ||||
| -rw-r--r-- | web/style.css | 14 |
3 files changed, 25 insertions, 1 deletions
diff --git a/src/templates/templates/question-slider.ftl b/src/templates/templates/question-slider.ftl index 818511d..08b6bd0 100644 --- a/src/templates/templates/question-slider.ftl +++ b/src/templates/templates/question-slider.ftl @@ -8,7 +8,7 @@ <p>Slide the slider to answer the question.</p> <div class="sliderQuestion question"> - <div class="sliderbar"><img src="${staticRoot}/images/slider.png" class="slider" /></div> + <div class="sliderbar"><div class="slider noselect"></div></div> <div class="answers"> <#list question.answers?keys as answerid> <div id="${answerid}" class="label">${question.answers[answerid].text}</div> diff --git a/web/scripts/growth.js b/web/scripts/growth.js index d4cee5b..5f5b273 100644 --- a/web/scripts/growth.js +++ b/web/scripts/growth.js @@ -10,6 +10,16 @@ $(document).ready(function() $("#answerField").val(value); } }); + $('.sliderbar').mousedown(function(e) { + var left = $(this).offset().left; + var width = $(this).width(); + proposed = Math.max(left, Math.min(e.pageX - 23, left + width - 46)); + $(this).children('.slider').offset({left: proposed}); + + var range = width - 46; + var value = (proposed - left) / range; + $("#answerField").val(value); + }); $('.quad .selector').draggable({ containment:"parent", diff --git a/web/style.css b/web/style.css index 548fea9..ecad037 100644 --- a/web/style.css +++ b/web/style.css @@ -32,6 +32,15 @@ blockquote { font-style: italic; } +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + #notfooter { min-height: 100%; height: auto !important; @@ -449,10 +458,15 @@ footer a:hover { .sliderbar { background: #E1E1E1; + height: 24px; } .sliderbar .slider { cursor: pointer; + background: url('/images/slider.png') no-repeat center center; + width: 46px; + height: 24px; + display: inline-block; } .quadQuestion { |