diff options
Diffstat (limited to 'vendors/jquery/custom-form-elements.js')
| -rw-r--r-- | vendors/jquery/custom-form-elements.js | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/vendors/jquery/custom-form-elements.js b/vendors/jquery/custom-form-elements.js new file mode 100644 index 000000000..eb48944b8 --- /dev/null +++ b/vendors/jquery/custom-form-elements.js @@ -0,0 +1,137 @@ +/* + +CUSTOM FORM ELEMENTS + +Created by Ryan Fait +Modified slightly by Curverider + +www.ryanfait.com + +The only thing you need to change in this file is the following +variables: checkboxHeight, radioHeight and selectWidth. + +Replace the first two numbers with the height of the checkbox and +radio button. The actual height of both the checkbox and radio +images should be 4 times the height of these two variables. The +selectWidth value should be the width of your select list image. + +You may need to adjust your images a bit if there is a slight +vertical movement during the different stages of the button +activation. + +Visit http://ryanfait.com/ for more information. + +*/ + +var checkboxHeight = "25"; +var radioHeight = "25"; +var selectWidth = "342"; + +/* No need to change anything after this */ + +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; }</style>'); + +var Custom = { + init: function() { + var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; + for(a = 0; a < inputs.length; a++) { + if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") { + span[a] = document.createElement("span"); + span[a].className = inputs[a].type; + + if(inputs[a].checked == true) { + if(inputs[a].type == "checkbox") { + position = "0 -" + (checkboxHeight*2) + "px"; + span[a].style.backgroundPosition = position; + } else { + position = "0 -" + (radioHeight*2) + "px"; + span[a].style.backgroundPosition = position; + } + } + inputs[a].parentNode.insertBefore(span[a], inputs[a]); + inputs[a].onchange = Custom.clear; + span[a].onmousedown = Custom.pushed; + span[a].onmouseup = Custom.check; + document.onmouseup = Custom.clear; + } + } + inputs = document.getElementsByTagName("select"); + for(a = 0; a < inputs.length; a++) { + if(inputs[a].className == "styled") { + option = inputs[a].getElementsByTagName("option"); + active = option[0].childNodes[0].nodeValue; + textnode = document.createTextNode(active); + for(b = 0; b < option.length; b++) { + if(option[b].selected == true) { + textnode = document.createTextNode(option[b].childNodes[0].nodeValue); + } + } + span[a] = document.createElement("span"); + span[a].className = "select"; + span[a].id = "select" + inputs[a].name; + span[a].appendChild(textnode); + inputs[a].parentNode.insertBefore(span[a], inputs[a]); + + /* modified behaviour by curverider */ + inputs[a].onmouseup = Custom.choose; + inputs[a].onchange = window.open(this.options[this.selectedIndex].value,'_top'); + } + } + }, + pushed: function() { + element = this.nextSibling; + if(element.checked == true && element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; + } else if(element.checked == true && element.type == "radio") { + this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; + } else if(element.checked != true && element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; + } else { + this.style.backgroundPosition = "0 -" + radioHeight + "px"; + } + }, + check: function() { + element = this.nextSibling; + if(element.checked == true && element.type == "checkbox") { + this.style.backgroundPosition = "0 0"; + element.checked = false; + } else { + if(element.type == "checkbox") { + this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; + } else { + this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; + group = this.nextSibling.name; + inputs = document.getElementsByTagName("input"); + for(a = 0; a < inputs.length; a++) { + if(inputs[a].name == group && inputs[a] != this.nextSibling) { + inputs[a].previousSibling.style.backgroundPosition = "0 0"; + } + } + } + element.checked = true; + } + }, + clear: function() { + inputs = document.getElementsByTagName("input"); + for(var b = 0; b < inputs.length; b++) { + if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; + } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 0"; + } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; + } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { + inputs[b].previousSibling.style.backgroundPosition = "0 0"; + } + } + }, + choose: function() { + option = this.getElementsByTagName("option"); + for(d = 0; d < option.length; d++) { + if(option[d].selected == true) { + document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; + } + } + } +} +window.onload = Custom.init;
\ No newline at end of file |