{"id":305,"date":"2017-09-09T23:07:06","date_gmt":"2017-09-09T21:07:06","guid":{"rendered":"https:\/\/asdw.de\/?p=305"},"modified":"2017-09-09T23:09:10","modified_gmt":"2017-09-09T21:09:10","slug":"toggle-slider-as-select-or-radio-buttons-in-scriptcase","status":"publish","type":"post","link":"https:\/\/asdw.de\/en\/toggle-slider-as-select-or-radio-buttons-in-scriptcase\/","title":{"rendered":"Toggle slider as select- or radio-buttons in Scriptcase"},"content":{"rendered":"

Show graphical on\/off-switches in select or radio-elements of Scriptcase Forms<\/h2>\n

Usually Scriptcase Form-Applications use the HTML elements to show Select- and Radio-elements:<\/p>\n

\"select<\/a><\/p>\n

This can be changed by using a CSS and a ‘replace’-code:<\/p>\n

\"select<\/p>\n

 <\/p>\n

1. Load the new CSS definition in the onLoad-Event of the form application.<\/h3>\n

This defines the ‘look’ and the ‘animation’ of the new ‘sliders’:<\/p>\n

?>\r\n<style>\r\n.scFormLabelOdd{\r\n font-size: 19px;   \/\/ label\r\n}\r\n.scFormDataFontOdd{\r\n font-size: 19px;   \/\/ label\r\n}\r\n.slider-label {\r\n  position: relative;\r\n  display: inline-block;\r\n  width: 50px;\t\t\/\/ background of the slider\r\n  height: 20px;\r\n}\r\n.slider-label input {display:none;}\r\n.slider {\r\n  position: absolute;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: #ccc;\r\n  -webkit-transition: .4s;\r\n  transition: .4s;\r\n}\r\n.slider:before {\r\n  position: absolute;\r\n  content: \"\";\r\n  height: 19px;\t\t\/\/ round button of the slider\r\n  width: 19px;\t\t\/\/       \"-\"\r\n  left: 1px;\r\n  bottom: 1px;\r\n  background-color: white;\r\n  -webkit-transition: .4s;\r\n  transition: .4s;\r\n}\r\ninput:checked + .slider {\r\n  background-color: #2196F3;\r\n}\r\ninput:focus + .slider {\r\n  box-shadow: 0 0 1px #2196F3;\r\n}\r\ninput:checked + .slider:before {\r\n  -webkit-transform: translateX(25px);\r\n  -ms-transform: translateX(25px);\r\n  transform: translateX(25px);\r\n}\r\n\/* Rounded sliders *\/\r\n.slider.round {\r\n  border-radius: 34px;\r\n  margin-right: 4px;\t\r\n}\r\n.slider.round:before {\r\n  border-radius: 50%;\r\n}\r\n<\/style>\r\n<?php<\/pre>\n
These is HTMP\/CSS code. Therefore the PHP-code of the Scriptcase-form has to be stopped with\u00a0\u00a0?><\/span>\u00a0 and started again \u00a0<?php<\/span>\u00a0after the new code.<\/p>\n
This definiton was used in a presentation done by Marcia\u00a0(Scriptcase<\/a>) on Youtube\u00a0https:\/\/www.youtube.com\/watch?v=qoEDNKAxa_Y<\/a>
\nAny other CSS-definition can be used. For example – this is a website with a generation for such a definition:\u00a0https:\/\/proto.io\/freebies\/onoff\/<\/span>
\nAnd there are much more on the Web…<\/p>\n
If you find nice ones, please leave the URLs as comment to this article \ud83d\ude09<\/p>\n
<\/em><\/p>\n
2. The form has to have some Select- and\/or Radio-Fields:<\/h3>\n
This sample uses:<\/p>\n
\"Definition<\/a>
Click to enlarge<\/p><\/div>\n
 <\/p>\n
\"Definition<\/a>
Click to enlarge<\/p><\/div>\n
 <\/p>\n
3. Define, which fields (select\/radio) will show the new form:<\/h3>\n
To do this, you can add a jQuery code in the onLoad-event of the form.<\/p>\n
Sample 1 – ALL select and radio-fields:<\/p>\n
<script>\r\n$(document).ready(function(){\r\n\t\r\n\t$(\"input:checkbox,:radio\").each(function(i) { \r\n\t\tconsole.log('index:' + i + this.value); \r\n\t\t$(this).replaceWith('<label class=\"slider-label\"> <input  onclick = \"\" type=\"' + this.type + '\"  name=\"' + this.name + '\" value = \"' + this.value + '\"> <span class=\"slider round\"><\/span> <\/label>');\r\n\t\t} );\r\n\r\n});\r\n<\/script><\/pre>\n
Sample 2 – Only the select fields on the form:<\/p>\n
<script>\r\n$(document).ready(function(){\r\n\r\n\t$(\"input:checkbox\").each(function(i) { \r\n\t\tconsole.log('index:' + i + this.value); \r\n\t\t$(this).replaceWith('<label class=\"slider-label\"> <input  onclick = \"\" type=\"' + this.type + '\"  name=\"' + this.name + '\" value = \"' + this.value + '\"> <span class=\"slider round\"><\/span> <\/label>');\r\n\t\t} );\r\n\r\n});\r\n<\/script><\/pre>\n
Sample 3 – Only the radio field with the name radio_1:<\/p>\n
<script>\r\n$(document).ready(function(){\r\n\r\n\t$(\"input[name*='radio_1']\").each(function(i) { \r\n\t\tconsole.log('index:' + i + this.value); \r\n\t\t$(this).replaceWith('<label class=\"switch\"> <input  onclick = \"\" type=\"radio\"  name=\"radio_1\" value = \"' + this.value + '\"> <span class=\"slider round\"><\/span> <\/label>');\r\n\t\t} );\r\n\t\/\/ oder k\u00fcrzer:\r\n\t$(\"input[name*='radio_1']\").replaceWith('<label class=\"switch\"> <input  onclick = \"\" type=\"radio\"  name=\"radio_1\" value = \"123\"> <span class=\"slider round\"><\/span> <\/label>');\r\n\r\n});\r\n<\/script>\r\n<\/pre>\n
Hint:<\/strong> This is JQuery-code, which has to be enclosed by\u00a0?><\/span>\u00a0 and\u00a0<?php<\/span>\u00a0 too.<\/p>\n
Hint:<\/strong> Scriptcase contains the jQuery libraries in development and deployed applications. Thus the jQuery libraries have not to be loaded.<\/p>\n
Such a form could look like:<\/p>\n
\"Scriptcase<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Show graphical on\/off-switches in select or radio-elements of Scriptcase Forms Usually Scriptcase Form-Applications use the HTML elements to show Select- and Radio-elements: This can be changed by using a CSS and a ‘replace’-code:   1. Load the new CSS definition…<\/span><\/p>\n
Read more ›<\/a><\/div>\n
<\/p>\n","protected":false},"author":2,"featured_media":303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[55],"tags":[96,95,50,94,92],"_links":{"self":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/305"}],"collection":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":3,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/305\/revisions\/308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/media\/303"}],"wp:attachment":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}