{"id":2213,"date":"2024-07-05T21:06:16","date_gmt":"2024-07-05T21:06:16","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=2213"},"modified":"2024-07-05T21:45:10","modified_gmt":"2024-07-05T21:45:10","slug":"drejeknap","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/drejeknap\/","title":{"rendered":"drejeknap"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2213\" class=\"elementor elementor-2213\">\n\t\t\t\t<div class=\"elementor-element elementor-element-852d7da e-flex e-con-boxed e-con e-parent\" data-id=\"852d7da\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-feeb015 elementor-widget elementor-widget-html\" data-id=\"feeb015\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"knob-container\">\n  <div class=\"knob\" id=\"knob\"><\/div>\n  <div class=\"value-box\" id=\"valueBox\">0<\/div>\n<\/div>\n\n<style>\n.knob-container {\n  width: 300px;\n  height: 300px; \/* \u00d8get h\u00f8jden for at give plads til v\u00e6rdiboksen under knappen *\/\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n}\n\n.knob {\n  width: 200px;\n  height: 200px;\n  background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/knob_vol2x.png');\n  background-size: 200px 6200px;\n  background-position: 0 0;\n  cursor: pointer;\n  transform: scale(0.5);\n  transform-origin: center;\n}\n\n.value-box {\n  width: 50px;\n  height: 30px;\n  text-align: center;\n  font-size: 13px; \/* 60% af standard fontst\u00f8rrelse *\/\n  color: #fff;\n  background-color: #000;\n  border: 1px solid #fff;\n  border-radius: 3px;\n  padding: 4px;\n  margin-top: 0px; \/* Afstand mellem knap og v\u00e6rdiboks *\/\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  const knob = document.getElementById('knob');\n  const valueBox = document.getElementById('valueBox');\n  let isDragging = false;\n  let startY = 0;\n  let currentStep = 0;\n  const totalSteps = 31;\n  const stepHeight = 200;\n  const sensitivity = 3; \/\/ 75% of the previous sensitivity (4 * 0.75 = 3)\n\n  knob.addEventListener('mousedown', function (e) {\n    isDragging = true;\n    startY = e.clientY;\n  });\n\n  document.addEventListener('mousemove', function (e) {\n    if (isDragging) {\n      const deltaY = (startY - e.clientY) * sensitivity;\n      const steps = Math.floor(deltaY \/ (stepHeight \/ totalSteps));\n      currentStep = Math.max(0, Math.min(totalSteps - 1, currentStep + steps));\n      knob.style.backgroundPosition = `0px -${currentStep * stepHeight}px`;\n      startY = e.clientY;\n      const value = Math.round((currentStep \/ (totalSteps - 1)) * 100);\n      valueBox.innerText = value;\n    }\n  });\n\n  document.addEventListener('mouseup', function () {\n    isDragging = false;\n  });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-2213","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=2213"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2213\/revisions"}],"predecessor-version":[{"id":2257,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/2213\/revisions\/2257"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}