Skip to content

Commit 9ab2787

Browse files
larszlarsz
committed
fixed width of custom select dropdown elements (issue hestiacp#29)
1 parent a0b61f6 commit 9ab2787

File tree

1 file changed

+164
-161
lines changed

1 file changed

+164
-161
lines changed

‎web/js/lib/custom-form-elements.js‎

Lines changed: 164 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,164 @@
1-
/*
2-
3-
CUSTOM FORM ELEMENTS
4-
5-
Created by Ryan Fait
6-
www.ryanfait.com
7-
8-
The only things you may need to change in this file are the following
9-
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
10-
11-
The numbers you set for checkboxHeight and radioHeight should be one quarter
12-
of the total height of the image want to use for checkboxes and radio
13-
buttons. Both images should contain the four stages of both inputs stacked
14-
on top of each other in this order: unchecked, unchecked-clicked, checked,
15-
checked-clicked.
16-
17-
You may need to adjust your images a bit if there is a slight vertical
18-
movement during the different stages of the button activation.
19-
20-
The value of selectWidth should be the width of your select list image.
21-
22-
Visit http://ryanfait.com/ for more information.
23-
24-
*/
25-
26-
var checkboxHeight = "25";
27-
var radioHeight = "25";
28-
var selectWidth = "210";
29-
30-
31-
/* No need to change anything after this */
32-
33-
34-
document.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-
36-
var 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]).hasClass("styled") && !$(inputs[a]).hasClass("style-applied")) {
41-
$(inputs[a]).addClass('style-applied');
42-
span[a] = document.createElement("span");
43-
span[a].className = inputs[a].type;
44-
if ($(inputs[a]).attr('class').indexOf('do_action_toggle_suspend') != -1) {
45-
span[a].className += ' do_action_toggle_suspend'; // save toggle functionality
46-
}
47-
if ($(inputs[a]).attr('class').indexOf('do_action_toggle_batch_selector') != -1) {
48-
span[a].className += ' do_action_toggle_batch_selector'; // save toggle functionality
49-
}
50-
51-
52-
if(inputs[a].checked == true) {
53-
if(inputs[a].type == "checkbox") {
54-
position = "0 -" + (checkboxHeight*2) + "px";
55-
span[a].style.backgroundPosition = position;
56-
} else {
57-
position = "0 -" + (radioHeight*2) + "px";
58-
span[a].style.backgroundPosition = position;
59-
}
60-
}
61-
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
62-
inputs[a].onchange = Custom.clear;
63-
if(!inputs[a].getAttribute("disabled")) {
64-
span[a].onmousedown = Custom.pushed;
65-
span[a].onmouseup = Custom.check;
66-
} else {
67-
span[a].className = span[a].className += " disabled";
68-
}
69-
}
70-
}
71-
inputs = document.getElementsByTagName("select");
72-
try {
73-
for(a = 0; a < inputs.length; a++) {
74-
if($(inputs[a]).hasClass("styled")) {
75-
option = inputs[a].getElementsByTagName("option");
76-
active = option[0].childNodes[0].nodeValue;
77-
textnode = document.createTextNode(active);
78-
for(b = 0; b < option.length; b++) {
79-
if(option[b].selected == true) {
80-
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
81-
}
82-
}
83-
span[a] = document.createElement("span");
84-
span[a].className = "select";
85-
span[a].id = "select-" + inputs[a].name + a;
86-
span[a].appendChild(textnode);
87-
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
88-
inputs[a].id = inputs[a].name + a;
89-
if(!inputs[a].getAttribute("disabled")) {
90-
inputs[a].onchange = Custom.choose;
91-
} else {
92-
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
93-
}
94-
}
95-
}
96-
document.onmouseup = Custom.clear;
97-
}
98-
catch(e){ /* */ }
99-
},
100-
pushed: function() {
101-
element = this.nextSibling;
102-
if(element.checked == true && element.type == "checkbox") {
103-
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
104-
} else if(element.checked == true && element.type == "radio") {
105-
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
106-
} else if(element.checked != true && element.type == "checkbox") {
107-
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
108-
} else {
109-
this.style.backgroundPosition = "0 -" + radioHeight + "px";
110-
}
111-
},
112-
check: function() {
113-
element = this.nextSibling;
114-
if(element.checked == true && element.type == "checkbox") {
115-
this.style.backgroundPosition = "0 0";
116-
element.checked = false;
117-
} else {
118-
if(element.type == "checkbox") {
119-
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
120-
} else {
121-
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
122-
group = this.nextSibling.name;
123-
inputs = document.getElementsByTagName("input");
124-
for(a = 0; a < inputs.length; a++) {
125-
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
126-
inputs[a].previousSibling.style.backgroundPosition = "0 0";
127-
}
128-
}
129-
}
130-
element.checked = true;
131-
}
132-
},
133-
clear: function() {
134-
inputs = document.getElementsByTagName("input");
135-
for(var b = 0; b < inputs.length; b++) {
136-
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
137-
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
138-
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
139-
inputs[b].previousSibling.style.backgroundPosition = "0 0";
140-
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
141-
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
142-
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
143-
inputs[b].previousSibling.style.backgroundPosition = "0 0";
144-
}
145-
}
146-
},
147-
choose: function() {
148-
option = this.getElementsByTagName("option");
149-
for(d = 0; d < option.length; d++) {
150-
if(option[d].selected == true) {
151-
//
152-
var expr = '#select-' + this.id;
153-
fb.log(expr);
154-
$(expr).text(option[d].childNodes[0].nodeValue);
155-
// bad!
156-
//document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
157-
}
158-
}
159-
}
160-
}
161-
window.onload = Custom.init;
1+
/*
2+
3+
CUSTOM FORM ELEMENTS
4+
5+
Created by Ryan Fait
6+
www.ryanfait.com
7+
8+
The only things you may need to change in this file are the following
9+
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
10+
11+
The numbers you set for checkboxHeight and radioHeight should be one quarter
12+
of the total height of the image want to use for checkboxes and radio
13+
buttons. Both images should contain the four stages of both inputs stacked
14+
on top of each other in this order: unchecked, unchecked-clicked, checked,
15+
checked-clicked.
16+
17+
You may need to adjust your images a bit if there is a slight vertical
18+
movement during the different stages of the button activation.
19+
20+
The value of selectWidth should be the width of your select list image.
21+
22+
Visit http://ryanfait.com/ for more information.
23+
24+
*/
25+
26+
var checkboxHeight = "25";
27+
var radioHeight = "25";
28+
var selectWidth = "230";
29+
30+
31+
/* No need to change anything after this */
32+
33+
34+
document.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+
36+
var 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]).hasClass("styled") && !$(inputs[a]).hasClass("style-applied")) {
41+
$(inputs[a]).addClass('style-applied');
42+
span[a] = document.createElement("span");
43+
span[a].className = inputs[a].type;
44+
if ($(inputs[a]).attr('class').indexOf('do_action_toggle_suspend') != -1) {
45+
span[a].className += ' do_action_toggle_suspend'; // save toggle functionality
46+
}
47+
if ($(inputs[a]).attr('class').indexOf('do_action_toggle_batch_selector') != -1) {
48+
span[a].className += ' do_action_toggle_batch_selector'; // save toggle functionality
49+
}
50+
if ($(inputs[a]).attr('class').indexOf('do_action_toggle_ssl_support') != -1) {
51+
span[a].className += ' do_action_toggle_ssl_support'; // save toggle functionality
52+
}
53+
54+
55+
if(inputs[a].checked == true) {
56+
if(inputs[a].type == "checkbox") {
57+
position = "0 -" + (checkboxHeight*2) + "px";
58+
span[a].style.backgroundPosition = position;
59+
} else {
60+
position = "0 -" + (radioHeight*2) + "px";
61+
span[a].style.backgroundPosition = position;
62+
}
63+
}
64+
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
65+
inputs[a].onchange = Custom.clear;
66+
if(!inputs[a].getAttribute("disabled")) {
67+
span[a].onmousedown = Custom.pushed;
68+
span[a].onmouseup = Custom.check;
69+
} else {
70+
span[a].className = span[a].className += " disabled";
71+
}
72+
}
73+
}
74+
inputs = document.getElementsByTagName("select");
75+
try {
76+
for(a = 0; a < inputs.length; a++) {
77+
if($(inputs[a]).hasClass("styled")) {
78+
option = inputs[a].getElementsByTagName("option");
79+
active = option[0].childNodes[0].nodeValue;
80+
textnode = document.createTextNode(active);
81+
for(b = 0; b < option.length; b++) {
82+
if(option[b].selected == true) {
83+
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
84+
}
85+
}
86+
span[a] = document.createElement("span");
87+
span[a].className = "select";
88+
span[a].id = "select-" + inputs[a].name + a;
89+
span[a].appendChild(textnode);
90+
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
91+
inputs[a].id = inputs[a].name + a;
92+
if(!inputs[a].getAttribute("disabled")) {
93+
inputs[a].onchange = Custom.choose;
94+
} else {
95+
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
96+
}
97+
}
98+
}
99+
document.onmouseup = Custom.clear;
100+
}
101+
catch(e){ /* */ }
102+
},
103+
pushed: function() {
104+
element = this.nextSibling;
105+
if(element.checked == true && element.type == "checkbox") {
106+
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
107+
} else if(element.checked == true && element.type == "radio") {
108+
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
109+
} else if(element.checked != true && element.type == "checkbox") {
110+
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
111+
} else {
112+
this.style.backgroundPosition = "0 -" + radioHeight + "px";
113+
}
114+
},
115+
check: function() {
116+
element = this.nextSibling;
117+
if(element.checked == true && element.type == "checkbox") {
118+
this.style.backgroundPosition = "0 0";
119+
element.checked = false;
120+
} else {
121+
if(element.type == "checkbox") {
122+
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
123+
} else {
124+
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
125+
group = this.nextSibling.name;
126+
inputs = document.getElementsByTagName("input");
127+
for(a = 0; a < inputs.length; a++) {
128+
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
129+
inputs[a].previousSibling.style.backgroundPosition = "0 0";
130+
}
131+
}
132+
}
133+
element.checked = true;
134+
}
135+
},
136+
clear: function() {
137+
inputs = document.getElementsByTagName("input");
138+
for(var b = 0; b < inputs.length; b++) {
139+
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
140+
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
141+
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
142+
inputs[b].previousSibling.style.backgroundPosition = "0 0";
143+
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
144+
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
145+
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
146+
inputs[b].previousSibling.style.backgroundPosition = "0 0";
147+
}
148+
}
149+
},
150+
choose: function() {
151+
option = this.getElementsByTagName("option");
152+
for(d = 0; d < option.length; d++) {
153+
if(option[d].selected == true) {
154+
//
155+
var expr = '#select-' + this.id;
156+
fb.log(expr);
157+
$(expr).text(option[d].childNodes[0].nodeValue);
158+
// bad!
159+
//document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
160+
}
161+
}
162+
}
163+
}
164+
window.onload = Custom.init;

0 commit comments

Comments
 (0)