1- /*
21
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 ] . 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- try {
66- fb . log ( $ ( inputs [ a ] ) . hasClass ( "styled" ) ) ;
67- if ( $ ( inputs [ a ] ) . hasClass ( "styled" ) ) {
68- option = inputs [ a ] . getElementsByTagName ( "option" ) ;
69- active = option [ 0 ] . childNodes [ 0 ] . nodeValue ;
70- textnode = document . createTextNode ( active ) ;
71- for ( b = 0 ; b < option . length ; b ++ ) {
72- if ( option [ b ] . selected == true ) {
73- textnode = document . createTextNode ( option [ b ] . childNodes [ 0 ] . nodeValue ) ;
74- }
75- }
76- span [ a ] = document . createElement ( "span" ) ;
77- span [ a ] . className = "select" ;
78- span [ a ] . id = "select-" + inputs [ a ] . name + a ;
79- span [ a ] . appendChild ( textnode ) ;
80- inputs [ a ] . parentNode . insertBefore ( span [ a ] , inputs [ a ] ) ;
81- inputs [ a ] . id = inputs [ a ] . name + a ;
82- if ( ! inputs [ a ] . getAttribute ( "disabled" ) ) {
83- inputs [ a ] . onchange = Custom . choose ;
84- } else {
85- inputs [ a ] . previousSibling . className = inputs [ a ] . previousSibling . className += " disabled" ;
86- }
87- }
88- } catch ( e ) { fb . error ( e ) ; }
89- }
90- document . onmouseup = Custom . clear ;
91- } ,
92- pushed : function ( ) {
93- element = this . nextSibling ;
94- if ( element . checked == true && element . type == "checkbox" ) {
95- this . style . backgroundPosition = "0 -" + checkboxHeight * 3 + "px" ;
96- } else if ( element . checked == true && element . type == "radio" ) {
97- this . style . backgroundPosition = "0 -" + radioHeight * 3 + "px" ;
98- } else if ( element . checked != true && element . type == "checkbox" ) {
99- this . style . backgroundPosition = "0 -" + checkboxHeight + "px" ;
100- } else {
101- this . style . backgroundPosition = "0 -" + radioHeight + "px" ;
102- }
103- } ,
104- check : function ( ) {
105- element = this . nextSibling ;
106- if ( element . checked == true && element . type == "checkbox" ) {
107- this . style . backgroundPosition = "0 0" ;
108- element . checked = false ;
109- } else {
110- if ( element . type == "checkbox" ) {
111- this . style . backgroundPosition = "0 -" + checkboxHeight * 2 + "px" ;
112- } else {
113- this . style . backgroundPosition = "0 -" + radioHeight * 2 + "px" ;
114- group = this . nextSibling . name ;
115- inputs = document . getElementsByTagName ( "input" ) ;
116- for ( a = 0 ; a < inputs . length ; a ++ ) {
117- if ( inputs [ a ] . name == group && inputs [ a ] != this . nextSibling ) {
118- inputs [ a ] . previousSibling . style . backgroundPosition = "0 0" ;
119- }
120- }
121- }
122- element . checked = true ;
123- }
124- } ,
125- clear : function ( ) {
126- inputs = document . getElementsByTagName ( "input" ) ;
127- for ( var b = 0 ; b < inputs . length ; b ++ ) {
128- if ( inputs [ b ] . type == "checkbox" && inputs [ b ] . checked == true && inputs [ b ] . className == "styled" ) {
129- inputs [ b ] . previousSibling . style . backgroundPosition = "0 -" + checkboxHeight * 2 + "px" ;
130- } else if ( inputs [ b ] . type == "checkbox" && inputs [ b ] . className == "styled" ) {
131- inputs [ b ] . previousSibling . style . backgroundPosition = "0 0" ;
132- } else if ( inputs [ b ] . type == "radio" && inputs [ b ] . checked == true && inputs [ b ] . className == "styled" ) {
133- inputs [ b ] . previousSibling . style . backgroundPosition = "0 -" + radioHeight * 2 + "px" ;
134- } else if ( inputs [ b ] . type == "radio" && inputs [ b ] . className == "styled" ) {
135- inputs [ b ] . previousSibling . style . backgroundPosition = "0 0" ;
136- }
137- }
138- } ,
139- choose : function ( ) {
140- option = this . getElementsByTagName ( "option" ) ;
141- for ( d = 0 ; d < option . length ; d ++ ) {
142- if ( option [ d ] . selected == true ) {
143- //
144- var expr = '#select-' + this . id ;
145- fb . log ( expr ) ;
146- $ ( expr ) . text ( option [ d ] . childNodes [ 0 ] . nodeValue ) ;
147- // bad!
148- //document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
149- }
150- }
151- }
152- }
153- window . onload = Custom . init ;
0 commit comments