/*############################################################# Name: Niceforms Version: 2.0 Author: Lucian Slatineanu URL: http://www.emblematiq.com/projects/niceforms/ Feel free to use and modify but please keep this copyright intact. #################################################################*/ //Theme Variables - edit these to match your theme var imagesPath = "images/niceforms/"; var selectRightWidthSimple = 19; var selectRightWidthScroll = 2; var selectMaxHeight = 200; var textareaTopPadding = 10; var textareaSidePadding = 10; //Global Variables var NF = new Array(); var isIE = false; var resizeTest = 1; //Initialization function function NFInit() { try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} if(!document.getElementById) {return false;} //alert("click me first"); NFDo('start'); } function NFDo(what) { var niceforms = document.getElementsByTagName('form'); var identifier = new RegExp('(^| )'+'niceform'+'( |$)'); if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { var ieversion=new Number(RegExp.$1); if(ieversion < 7) {return false;} //exit script if IE6 isIE = true; } for(var q = 0; q < niceforms.length; q++) {if(identifier.test(niceforms[q].className)) { if(what == "start") { //Load Niceforms NF[q] = new niceform(niceforms[q]); niceforms[q].start(); } else { //Unload Niceforms niceforms[q].unload(); NF[q] = ""; } }} } function NFFix() { NFDo('stop'); NFDo('start'); } function niceform(nf) { nf._inputText = new Array(); nf._inputRadio = new Array(); nf._inputCheck = new Array(); nf._inputSubmit = new Array(); nf._inputFile = new Array(); nf._textarea = new Array(); nf._select = new Array(); nf._multiselect = new Array(); nf.add_inputText = function(obj) {this._inputText[this._inputText.length] = obj; inputText(obj);} nf.add_inputRadio = function(obj) {this._inputRadio[this._inputRadio.length] = obj; inputRadio(obj);} nf.add_inputCheck = function(obj) {this._inputCheck[this._inputCheck.length] = obj; inputCheck(obj);} nf.add_inputSubmit = function(obj) {this._inputSubmit[this._inputSubmit.length] = obj; inputSubmit(obj);} nf.add_inputFile = function(obj) {this._inputFile[this._inputFile.length] = obj; inputFile(obj);} nf.add_textarea = function(obj) {this._textarea[this._textarea.length] = obj; textarea(obj);} nf.add_select = function(obj) {this._select[this._select.length] = obj; selects(obj);} nf.add_multiselect = function(obj) {this._multiselect[this._multiselect.length] = obj; multiSelects(obj);} nf.start = function() { //Separate and assign elements var allInputs = this.getElementsByTagName('input'); for(var w = 0; w < allInputs.length; w++) { switch(allInputs[w].type) { case "text": case "password": {this.add_inputText(allInputs[w]); break;} case "radio": {this.add_inputRadio(allInputs[w]); break;} case "checkbox": {this.add_inputCheck(allInputs[w]); break;} case "submit": case "reset": case "button": {this.add_inputSubmit(allInputs[w]); break;} case "file": {this.add_inputFile(allInputs[w]); break;} } } var allButtons = this.getElementsByTagName('button'); for(var w = 0; w < allButtons.length; w++) { this.add_inputSubmit(allButtons[w]); } var allTextareas = this.getElementsByTagName('textarea'); for(var w = 0; w < allTextareas.length; w++) { this.add_textarea(allTextareas[w]); } var allSelects = this.getElementsByTagName('select'); for(var w = 0; w < allSelects.length; w++) { if(allSelects[w].size == "1") {this.add_select(allSelects[w]);} else {this.add_multiselect(allSelects[w]);} } //Start for(w = 0; w < this._inputText.length; w++) {this._inputText[w].init();} for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].init();} for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].init();} for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].init();} for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].init();} for(w = 0; w < this._textarea.length; w++) {this._textarea[w].init();} for(w = 0; w < this._select.length; w++) {this._select[w].init(w);} for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].init(w);} } nf.unload = function() { //Stop for(w = 0; w < this._inputText.length; w++) {this._inputText[w].unload();} for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].unload();} for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].unload();} for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].unload();} for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].unload();} for(w = 0; w < this._textarea.length; w++) {this._textarea[w].unload();} for(w = 0; w < this._select.length; w++) {this._select[w].unload();} for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].unload();} } } function inputText(el) { //extent Text inputs el.oldClassName = el.className; el.left = document.createElement('img'); el.left.src = imagesPath + "0.png"; el.left.className = "NFTextLeft"; el.right = document.createElement('img'); el.right.src = imagesPath + "0.png"; el.right.className = "NFTextRight"; el.dummy = document.createElement('div'); el.dummy.className = "NFTextCenter"; el.onfocus = function() { this.dummy.className = "NFTextCenter NFh"; this.left.className = "NFTextLeft NFh"; this.right.className = "NFTextRight NFh"; } el.onblur = function() { this.dummy.className = "NFTextCenter"; this.left.className = "NFTextLeft"; this.right.className = "NFTextRight"; } el.init = function() { this.parentNode.insertBefore(this.left, this); this.parentNode.insertBefore(this.right, this.nextSibling); this.dummy.appendChild(this); this.right.parentNode.insertBefore(this.dummy, this.right); this.className = "NFText"; } el.unload = function() { this.parentNode.parentNode.appendChild(this); this.parentNode.removeChild(this.left); this.parentNode.removeChild(this.right); this.parentNode.removeChild(this.dummy); this.className = this.oldClassName; } } function inputRadio(el) { //extent Radio buttons el.oldClassName = el.className; el.dummy = document.createElement('div'); if(el.checked) {el.dummy.className = "NFRadio NFh";} else {el.dummy.className = "NFRadio";} el.dummy.ref = el; if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';} else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';} el.dummy.onclick = function() { if(!this.ref.checked) { var siblings = getInputsByName(this.ref.name); for(var q = 0; q < siblings.length; q++) { siblings[q].checked = false; siblings[q].dummy.className = "NFRadio"; } this.ref.checked = true; this.className = "NFRadio NFh"; } } el.onclick = function() { if(this.checked) { var siblings = getInputsByName(this.name); for(var q = 0; q < siblings.length; q++) { siblings[q].dummy.className = "NFRadio"; } this.dummy.className = "NFRadio NFh"; } } el.onfocus = function() {this.dummy.className += " NFfocused";} el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} el.init = function() { this.parentNode.insertBefore(this.dummy, this); el.className = "NFhidden"; } el.unload = function() { this.parentNode.removeChild(this.dummy); this.className = this.oldClassName; } } function inputCheck(el) { //extend Checkboxes el.oldClassName = el.className; el.dummy = document.createElement('img'); el.dummy.src = imagesPath + "0.png"; if(el.checked) {el.dummy.className = "NFCheck NFh";} else {el.dummy.className = "NFCheck";} el.dummy.ref = el; if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';} else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';} el.dummy.onclick = function() { if(!this.ref.checked) { this.ref.checked = true; this.className = "NFCheck NFh"; } else { this.ref.checked = false; this.className = "NFCheck"; } } el.onclick = function() { if(this.checked) {this.dummy.className = "NFCheck NFh";} else {this.dummy.className = "NFCheck";} } el.onfocus = function() {this.dummy.className += " NFfocused";} el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} el.init = function() { this.parentNode.insertBefore(this.dummy, this); el.className = "NFhidden"; } el.unload = function() { this.parentNode.removeChild(this.dummy); this.className = this.oldClassName; } } function inputSubmit(el) { //extend Buttons el.oldClassName = el.className; el.left = document.createElement('img'); el.left.className = "NFButtonLeft"; el.left.src = imagesPath + "0.png"; el.right = document.createElement('img'); el.right.src = imagesPath + "0.png"; el.right.className = "NFButtonRight"; el.onmouseover = function() { this.className = "NFButton NFh"; this.left.className = "NFButtonLeft NFh"; this.right.className = "NFButtonRight NFh"; } el.onmouseout = function() { this.className = "NFButton"; this.left.className = "NFButtonLeft"; this.right.className = "NFButtonRight"; } el.init = function() { this.parentNode.insertBefore(this.left, this); this.parentNode.insertBefore(this.right, this.nextSibling); this.className = "NFButton"; } el.unload = function() { this.parentNode.removeChild(this.left); this.parentNode.removeChild(this.right); this.className = this.oldClassName; } } function inputFile(el) { //extend File inputs el.oldClassName = el.className; el.dummy = document.createElement('div'); el.dummy.className = "NFFile"; el.file = document.createElement('div'); el.file.className = "NFFileNew"; el.center = document.createElement('div'); el.center.className = "NFTextCenter"; el.clone = document.createElement('input'); el.clone.type = "text"; el.clone.className = "NFText"; el.clone.ref = el; el.left = document.createElement('img'); el.left.src = imagesPath + "0.png"; el.left.className = "NFTextLeft"; el.button = document.createElement('img'); el.button.src = imagesPath + "0.png"; el.button.className = "NFFileButton"; el.button.ref = el; el.button.onclick = function() {this.ref.click();} el.init = function() { var top = this.parentNode; if(this.previousSibling) {var where = this.previousSibling;} else {var where = top.childNodes[0];} top.insertBefore(this.dummy, where); this.dummy.appendChild(this); this.center.appendChild(this.clone); this.file.appendChild(this.center); this.file.insertBefore(this.left, this.center); this.file.appendChild(this.button); this.dummy.appendChild(this.file); this.className = "NFhidden"; this.relatedElement = this.clone; } el.unload = function() { this.parentNode.parentNode.appendChild(this); this.parentNode.removeChild(this.dummy); this.className = this.oldClassName; } el.onchange = el.onmouseout = function() {this.relatedElement.value = this.value;} el.onfocus = function() { this.left.className = "NFTextLeft NFh"; this.center.className = "NFTextCenter NFh"; this.button.className = "NFFileButton NFh"; } el.onblur = function() { this.left.className = "NFTextLeft"; this.center.className = "NFTextCenter"; this.button.className = "NFFileButton"; } el.onselect = function() { this.relatedElement.select(); this.value = ''; } } function textarea(el) { //extend Textareas el.oldClassName = el.className; el.height = el.offsetHeight - textareaTopPadding; el.width = el.offsetWidth - textareaSidePadding; el.topLeft = document.createElement('img'); el.topLeft.src = imagesPath + "0.png"; el.topLeft.className = "NFTextareaTopLeft"; el.topRight = document.createElement('div'); el.topRight.className = "NFTextareaTop"; el.bottomLeft = document.createElement('img'); el.bottomLeft.src = imagesPath + "0.png"; el.bottomLeft.className = "NFTextareaBottomLeft"; el.bottomRight = document.createElement('div'); el.bottomRight.className = "NFTextareaBottom"; el.left = document.createElement('div'); el.left.className = "NFTextareaLeft"; el.right = document.createElement('div'); el.right.className = "NFTextareaRight"; el.init = function() { var top = this.parentNode; if(this.previousSibling) {var where = this.previousSibling;} else {var where = top.childNodes[0];} top.insertBefore(el.topRight, where); top.insertBefore(el.right, where); top.insertBefore(el.bottomRight, where); this.topRight.appendChild(this.topLeft); this.right.appendChild(this.left); this.right.appendChild(this); this.bottomRight.appendChild(this.bottomLeft); el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px'; el.style.height = el.left.style.height = el.right.style.height = el.height + 'px'; this.className = "NFTextarea"; } el.unload = function() { this.parentNode.parentNode.appendChild(this); this.parentNode.removeChild(this.topRight); this.parentNode.removeChild(this.bottomRight); this.parentNode.removeChild(this.right); this.className = this.oldClassName; this.style.width = this.style.height = ""; } el.onfocus = function() { this.topLeft.className = "NFTextareaTopLeft NFh"; this.topRight.className = "NFTextareaTop NFhr"; this.left.className = "NFTextareaLeftH"; this.right.className = "NFTextareaRightH"; this.bottomLeft.className = "NFTextareaBottomLeft NFh"; this.bottomRight.className = "NFTextareaBottom NFhr"; } el.onblur = function() { this.topLeft.className = "NFTextareaTopLeft"; this.topRight.className = "NFTextareaTop"; this.left.className = "NFTextareaLeft"; this.right.className = "NFTextareaRight"; this.bottomLeft.className = "NFTextareaBottomLeft"; this.bottomRight.className = "NFTextareaBottom"; } } function selects(el) { //extend Selects el.oldClassName = el.className; el.dummy = document.createElement('div'); el.dummy.className = "NFSelect"; el.dummy.style.width = el.offsetWidth + 'px'; el.dummy.ref = el; el.left = document.createElement('img'); el.left.src = imagesPath + "0.png"; el.left.className = "NFSelectLeft"; el.right = document.createElement('div'); el.right.className = "NFSelectRight"; el.txt = document.createTextNode(el.options[0].text); el.bg = document.createElement('div'); el.bg.className = "NFSelectTarget"; el.bg.style.display = "none"; el.opt = document.createElement('ul'); el.opt.className = "NFSelectOptions"; el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px'; el.opts = new Array(el.options.length); el.init = function(pos) { this.dummy.appendChild(this.left); this.right.appendChild(this.txt); this.dummy.appendChild(this.right); this.bg.appendChild(this.opt); this.dummy.appendChild(this.bg); for(var q = 0; q < this.options.length; q++) { this.opts[q] = new option(this.options[q], q); this.opt.appendChild(this.options[q].li); this.options[q].lnk.onclick = function() { this._onclick(); this.ref.dummy.getElementsByTagName('div')[0].innerHTML = this.ref.options[this.pos].text; this.ref.options[this.pos].selected = "selected"; for(var w = 0; w < this.ref.options.length; w++) {this.ref.options[w].lnk.className = "";} this.ref.options[this.pos].lnk.className = "NFOptionActive"; } } if(this.options.selectedIndex) { this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[this.options.selectedIndex].text; this.options[this.options.selectedIndex].lnk.className = "NFOptionActive"; } this.dummy.style.zIndex = 999 - pos; this.parentNode.insertBefore(this.dummy, this); this.className = "NFhidden"; } el.unload = function() { this.parentNode.removeChild(this.dummy); this.className = this.oldClassName; } el.dummy.onclick = function() { var allDivs = document.getElementsByTagName('div'); for(var q = 0; q < allDivs.length; q++) {if((allDivs[q].className == "NFSelectTarget") && (allDivs[q] != this.ref.bg)) {allDivs[q].style.display = "none";}} if(this.ref.bg.style.display == "none") {this.ref.bg.style.display = "block";} else {this.ref.bg.style.display = "none";} if(this.ref.opt.offsetHeight > selectMaxHeight) { this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthScroll + 33 + 'px'; this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthScroll + 'px'; } else { this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthSimple + 33 + 'px'; this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthSimple + 'px'; } } el.bg.onmouseout = function(e) { if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return; if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return; else{this.style.display = "none";} } el.dummy.onmouseout = function(e) { if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return; if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return; else{this.ref.bg.style.display = "none";} } el.onfocus = function() {this.dummy.className += " NFfocused";} el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} el.onkeydown = function(e) { if (!e) var e = window.event; var thecode = e.keyCode; var active = this.selectedIndex; switch(thecode){ case 40: //down if(active < this.options.length - 1) { for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";} var newOne = active + 1; this.options[newOne].selected = "selected"; this.options[newOne].lnk.className = "NFOptionActive"; this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text; } return false; break; case 38: //up if(active > 0) { for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";} var newOne = active - 1; this.options[newOne].selected = "selected"; this.options[newOne].lnk.className = "NFOptionActive"; this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text; } return false; break; default: break; } } } function multiSelects(el) { //extend Multiple Selects el.oldClassName = el.className; el.height = el.offsetHeight; el.width = el.offsetWidth; el.topLeft = document.createElement('img'); el.topLeft.src = imagesPath + "0.png"; el.topLeft.className = "NFMultiSelectTopLeft"; el.topRight = document.createElement('div'); el.topRight.className = "NFMultiSelectTop"; el.bottomLeft = document.createElement('img'); el.bottomLeft.src = imagesPath + "0.png"; el.bottomLeft.className = "NFMultiSelectBottomLeft"; el.bottomRight = document.createElement('div'); el.bottomRight.className = "NFMultiSelectBottom"; el.left = document.createElement('div'); el.left.className = "NFMultiSelectLeft"; el.right = document.createElement('div'); el.right.className = "NFMultiSelectRight"; el.init = function() { var top = this.parentNode; if(this.previousSibling) {var where = this.previousSibling;} else {var where = top.childNodes[0];} top.insertBefore(el.topRight, where); top.insertBefore(el.right, where); top.insertBefore(el.bottomRight, where); this.topRight.appendChild(this.topLeft); this.right.appendChild(this.left); this.right.appendChild(this); this.bottomRight.appendChild(this.bottomLeft); el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px'; el.style.height = el.left.style.height = el.right.style.height = el.height + 'px'; el.className = "NFMultiSelect"; } el.unload = function() { this.parentNode.parentNode.appendChild(this); this.parentNode.removeChild(this.topRight); this.parentNode.removeChild(this.bottomRight); this.parentNode.removeChild(this.right); this.className = this.oldClassName; this.style.width = this.style.height = ""; } el.onfocus = function() { this.topLeft.className = "NFMultiSelectTopLeft NFh"; this.topRight.className = "NFMultiSelectTop NFhr"; this.left.className = "NFMultiSelectLeftH"; this.right.className = "NFMultiSelectRightH"; this.bottomLeft.className = "NFMultiSelectBottomLeft NFh"; this.bottomRight.className = "NFMultiSelectBottom NFhr"; } el.onblur = function() { this.topLeft.className = "NFMultiSelectTopLeft"; this.topRight.className = "NFMultiSelectTop"; this.left.className = "NFMultiSelectLeft"; this.right.className = "NFMultiSelectRight"; this.bottomLeft.className = "NFMultiSelectBottomLeft"; this.bottomRight.className = "NFMultiSelectBottom"; } } function option(el, no) { //extend Options el.li = document.createElement('li'); el.lnk = document.createElement('a'); el.lnk.href = "javascript:;"; el.lnk.ref = el.parentNode; el.lnk.pos = no; el.lnk._onclick = el.onclick || function () {}; el.txt = document.createTextNode(el.text); el.lnk.appendChild(el.txt); el.li.appendChild(el.lnk); } //Get Position function findPosY(obj) { var posTop = 0; do {posTop += obj.offsetTop;} while (obj = obj.offsetParent); return posTop; } function findPosX(obj) { var posLeft = 0; do {posLeft += obj.offsetLeft;} while (obj = obj.offsetParent); return posLeft; } //Get Siblings function getInputsByName(name) { var inputs = document.getElementsByTagName("input"); var w = 0; var results = new Array(); for(var q = 0; q < inputs.length; q++) {if(inputs[q].name == name) {results[w] = inputs[q]; ++w;}} return results; } //Add events var existingLoadEvent = window.onload || function () {}; var existingResizeEvent = window.onresize || function() {}; window.onload = function () { existingLoadEvent(); NFInit(); } window.onresize = function() { if(resizeTest != document.documentElement.clientHeight) { existingResizeEvent(); NFFix(); } resizeTest = document.documentElement.clientHeight; }