https://foodtechconnect.com/wp-content/themes/bangkokpress/javascript/custom-form-elements.js

1/*
2
3CUSTOM FORM ELEMENTS
4
5Created by Ryan Fait
6www.ryanfait.com
7
8The only things you may need to change in this file are the following
9variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
10
11The numbers you set for checkboxHeight and radioHeight should be one quarter
12of the total height of the image want to use for checkboxes and radio
13buttons. Both images should contain the four stages of both inputs stacked
14on top of each other in this order: unchecked, unchecked-clicked, checked,
15checked-clicked.
16
17You may need to adjust your images a bit if there is a slight vertical
18movement during the different stages of the button activation.
19
20The value of selectWidth should be the width of your select list image.
21
22Visit http://ryanfait.com/ for more information.
23
24*/
25
26var checkboxHeight = "25";
27var radioHeight = "25";
28var selectWidth = "190";
29
30
31/* No need to change anything after this */
32
33
34document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
35
36var Custom = {
37	init: function() {
38		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
39		for(a = 0; a < inputs.length; a++) {
40			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
41				span[a] = document.createElement("span");
42				span[a].className = inputs[a].type;
43
44				if(inputs[a].checked == true) {
45					if(inputs[a].type == "checkbox") {
46						position = "0 -" + (checkboxHeight*2) + "px";
47						span[a].style.backgroundPosition = position;
48					} else {
49						position = "0 -" + (radioHeight*2) + "px";
50						span[a].style.backgroundPosition = position;
51					}
52				}
53				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
54				inputs[a].onchange = Custom.clear;
55				if(!inputs[a].getAttribute("disabled")) {
56					span[a].onmousedown = Custom.pushed;
57					span[a].onmouseup = Custom.check;
58				} else {
59					span[a].className = span[a].className += " disabled";
60				}
61			}
62		}
63		inputs = document.getElementsByTagName("select");
64		for(a = 0; a < inputs.length; a++) {
65			if(inputs[a].className == "styled") {
66				option = inputs[a].getElementsByTagName("option");
67				active = option[0].childNodes[0].nodeValue;
68				textnode = document.createTextNode(active);
69				for(b = 0; b < option.length; b++) {
70					if(option[b].selected == true) {
71						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
72					}
73				}
74				span[a] = document.createElement("span");
75				span[a].className = "select";

76				span[a].id = "select" + inputs[a].name;
77				span[a].appendChild(textnode);
78				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
79				if(!inputs[a].getAttribute("disabled")) {
80					inputs[a].onchange = Custom.choose;
81				} else {
82					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
83				}
84			}
85		}
86		document.onmouseup = Custom.clear;
87	},
88	pushed: function() {
89		element = this.nextSibling;
90		if(element.checked == true && element.type == "checkbox") {
91			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
92		} else if(element.checked == true && element.type == "radio") {
93			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
94		} else if(element.checked != true && element.type == "checkbox") {
95			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
96		} else {
97			this.style.backgroundPosition = "0 -" + radioHeight + "px";
98		}
99	},
100	check: function() {
101		element = this.nextSibling;
102		if(element.checked == true && element.type == "checkbox") {
103			this.style.backgroundPosition = "0 0";
104			element.checked = false;
105		} else {
106			if(element.type == "checkbox") {
107				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
108			} else {
109				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
110				group = this.nextSibling.name;
111				inputs = document.getElementsByTagName("input");
112				for(a = 0; a < inputs.length; a++) {
113					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
114						inputs[a].previousSibling.style.backgroundPosition = "0 0";
115					}
116				}
117			}
118			element.checked = true;
119		}
120	},
121	clear: function() {
122		inputs = document.getElementsByTagName("input");
123		for(var b = 0; b < inputs.length; b++) {
124			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
125				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
126			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
127				inputs[b].previousSibling.style.backgroundPosition = "0 0";
128			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
129				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
130			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
131				inputs[b].previousSibling.style.backgroundPosition = "0 0";
132			}
133		}
134	},
135	choose: function() {
136		option = this.getElementsByTagName("option");
137		for(d = 0; d < option.length; d++) {
138			if(option[d].selected == true) {
139				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
140			}
141		}
142	}
143}
144window.onload = Custom.init;