1/*############################################################# 2Name: Niceforms 3Version: 1.0 4Author: Lucian Slatineanu 5URL: http://www.badboy.ro/ 6 7Feel free to use and modify but please provide credits. 8#############################################################*/ 9 10//Global Variables 11var niceforms = document.getElementsByTagName('form'); var inputs = new Array(); var labels = new Array(); var radios = new Array(); var radioLabels = new Array(); var checkboxes = new Array(); var checkboxLabels = new Array(); var texts = new Array(); var textareas = new Array(); var selects = new Array(); var selectText = "please select"; var agt = navigator.userAgent.toLowerCase(); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); var hovers = new Array(); var buttons = new Array(); var isMac = new RegExp('(^|)'+'Apple'+'(|$)'); 12 13//Theme Variables - edit these to match your theme 14var selectRightSideWidth = 21; 15var selectLeftSideWidth = 8; 16var selectAreaHeight = 21; 17var selectAreaOptionsOverlap = 2; 18var imagesPath = "css/images/"; 19 20//Initialization function - if you have any other 'onload' functions, add them here 21function init() { 22 if(!document.getElementById) {return false;} 23 preloadImages(); 24 getElements(); 25 separateElements(); 26 replaceRadios(); 27 replaceCheckboxes(); 28 replaceSelects(); 29 if(!isMac.test(navigator.vendor)) { 30 replaceTexts(); 31 replaceTextareas(); 32 buttonHovers(); 33 } 34} 35 36 37//preloading required images 38function preloadImages() { 39 preloads = new Object(); 40 preloads[0] = new Image(); preloads[0].src = imagesPath + "button_left_xon.gif"; 41 preloads[1] = new Image(); preloads[1].src = imagesPath + "button_right_xon.gif"; 42 preloads[2] = new Image(); preloads[2].src = imagesPath + "input_left_xon.gif"; 43 preloads[3] = new Image(); preloads[3].src = imagesPath + "input_right_xon.gif"; 44 preloads[4] = new Image(); preloads[4].src = imagesPath + "txtarea_bl_xon.gif"; 45 preloads[5] = new Image(); preloads[5].src = imagesPath + "txtarea_br_xon.gif"; 46 preloads[6] = new Image(); preloads[6].src = imagesPath + "txtarea_cntr_xon.gif"; 47 preloads[7] = new Image(); preloads[7].src = imagesPath + "txtarea_l_xon.gif"; 48 preloads[8] = new Image(); preloads[8].src = imagesPath + "txtarea_tl_xon.gif"; 49 preloads[9] = new Image(); preloads[9].src = imagesPath + "txtarea_tr_xon.gif"; 50} 51//getting all the required elements 52function getElements() { 53 var re = new RegExp('(^| )'+'niceform'+'( |$)'); 54 for (var nf = 0; nf < document.getElementsByTagName('form').length; nf++) { 55 if(re.test(niceforms[nf].className)) { 56 for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName('input').length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName('input')[nfi]);} 57 for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName('label').length; nfl++) {labels.push(document.forms[nf].getElementsByTagName('label')[nfl]);} 58 for(var nft = 0; nft < document.forms[nf].getElementsByTagName('textarea').length; nft++) {textareas.push(document.forms[nf].getElementsByTagName('textarea')[nft]);} 59 for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName('select').length; nfs++) {selects.push(document.forms[nf].getElementsByTagName('select')[nfs]);} 60 } 61 } 62} 63//separating all the elements in their respective arrays 64function separateElements() { 65 var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0; 66 for (var q = 0; q < inputs.length; q++) { 67 if(inputs[q].type == 'radio') { 68 radios[r] = inputs[q]; ++r; 69 for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} radioLabels[rl] = labels[w]; ++rl;}} 70 } 71 if(inputs[q].type == 'checkbox') { 72 checkboxes[c] = inputs[q]; ++c; 73 for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} checkboxLabels[cl] = labels[w]; ++cl;}} 74 } 75 if((inputs[q].type == "text") || (inputs[q].type == "password")) {texts[t] = inputs[q]; ++t;} 76 if((inputs[q].type == "submit") || (inputs[q].type == "button")) {buttons[b] = input
76s[q]; ++b;} 77 } 78} 79function replaceRadios() { 80 for (var q = 0; q < radios.length; q++) { 81 //move radios out of the way 82 radios[q].className = "outtaHere"; 83 //create div 84 var radioArea = document.createElement('div'); 85 if(radios[q].checked) {radioArea.className = "radioAreaChecked";} else {radioArea.className = "radioArea";} 86 radioArea.style.left = findPosX(radios[q]) + 'px'; 87 radioArea.style.top = findPosY(radios[q]) + 'px'; 88 radioArea.style.margin = "1px"; 89 radioArea.id = "myRadio" + q; 90 //insert div 91 radios[q].parentNode.insertBefore(radioArea, radios[q]); 92 //assign actions 93 radioArea.onclick = new Function('rechangeRadios('+q+')'); 94 radioLabels[q].onclick = new Function('rechangeRadios('+q+')'); 95 if(!this.ie) {radios[q].onfocus = new Function('focusRadios('+q+')'); radios[q].onblur = new Function('blurRadios('+q+')');} 96 radios[q].onclick = radioEvent; 97 } 98 return true; 99} 100function focusRadios(who) { 101 var what = document.getElementById('myRadio'+who); 102 what.style.border = "1px dotted #333"; what.style.margin = "0"; 103 return false; 104} 105function blurRadios(who) { 106 var what = document.getElementById('myRadio'+who); 107 what.style.border = "0"; what.style.margin = "1px"; 108 return false; 109} 110function checkRadios(who) { 111 var what = document.getElementById('myRadio'+who); 112 others = document.getElementsByTagName('div'); 113 for(var q = 0; q < others.length; q++) {if((others[q].className == "radioAreaChecked")&&(others[q].nextSibling.name == radios[who].name)) {others[q].className = "radioArea";}} 114 what.className = "radioAreaChecked"; 115} 116function changeRadios(who) { 117 if(radios[who].checked) { 118 for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}} 119 radios[who].checked = true; radioLabels[who].className = "chosen"; 120 checkRadios(who); 121 } 122} 123function rechangeRadios(who) { 124 if(!radios[who].checked) { 125 for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}} 126 radios[who].checked = true; radioLabels[who].className = "chosen"; 127 checkRadios(who); 128 } 129} 130function radioEvent(e) { 131 if (!e) var e = window.event; 132 if(e.type == "click") {for (var q = 0; q < radios.length; q++) {if(this == radios[q]) {changeRadios(q); break;}}} 133} 134function replaceCheckboxes() { 135 for (var q = 0; q < checkboxes.length; q++) { 136 //move checkboxes out of the way 137 checkboxes[q].className = "outtaHere"; 138 //create div 139 var checkboxArea = document.createElement('div'); 140 if(checkboxes[q].checked) {checkboxArea.className = "checkboxAreaChecked";} else {checkboxArea.className = "checkboxArea";} 141 checkboxArea.style.left = findPosX(checkboxes[q]) + 'px'; 142 checkboxArea.style.top = findPosY(checkboxes[q]) + 'px'; 143 checkboxArea.style.margin = "1px"; 144 checkboxArea.id = "myCheckbox" + q; 145 //insert div 146 checkboxes[q].parentNode.insertBefore(checkboxArea, checkboxes[q]); 147 //asign actions 148 checkboxArea.onclick = new Function('rechangeCheckboxes('+q+')'); 149 if(!isMac.test(navigator.vendor)) {checkboxLabels[q].onclick = new Function('changeCheckboxes('+q+')');} 150 else {checkboxLabels[q].onclick = new Function('rechangeCheckboxes('+q+')');} 151 if(!this.ie) {checkboxes[q].onfocus = new Function('focusCheckboxes('+q+')'); checkboxes[q].onblur = new Function('blurCheckboxes('+q+')');} 152 checkboxes[q].onkeydown = checkEvent; 153 } 154 return true; 155} 156function focusCheckboxes(who) { 157 var what = document.getElementById('myCheckbox'+who); 158 what.style.border = "1px dotted #333"; what.style.margin = "0"; 159 return false; 160} 161function blurCheckboxes(who) { 162 var what = document.getElementById('myCheckbox'+who); 163 what.style.border = "0"; what.style.margin = "1px"; 164 return false; 165} 166function checkCheckboxes(who, action) { 167 var what = document.getElementById('myCheckbox'+who); 168 if(action == true) {what.className = "checkboxAreaChecked";} 169 if(action == false) {what.className = "checkboxArea";} 170} 171function changeCheckboxes(who) { 172 if(checkboxLabels[who].className == "chosen") { 173 checkboxes[who].checked = true; 174 checkboxLabels[who].className = ""; 175 checkCheckboxes(who, false); 176 } 177 else if(checkboxLabels[who].className == "") { 178 checkboxes[who].checked = false; 179 checkboxLabels[who].className = "chosen"; 180 checkCheckboxes(who, true); 181 } 182} 183function rechangeCheckboxes(who) { 184 var tester = false; 185 if(checkboxLabels[who].className == "chosen") { 186 tester = false; 187 checkboxLabels[who].className = ""; 188 } 189 else if(checkboxLabels[who].className == "") { 190 tester = true; 191 checkboxLabels[who].className = "chosen"; 192 } 193 checkboxes[who].checked = tester; 194 checkCheckboxes(who, tester); 195} 196function checkEvent(e) { 197 if (!e) var e = window.event; 198 if(e.keyCode == 32) {for (var q = 0; q < checkboxes.length; q++) {if(this == checkboxes[q]) {changeCheckboxes(q);}}} //check if space is pressed 199} 200function replaceSelects() { 201 for(var q = 0; q < selects.length; q++) { 202 //create and build div structure 203 var selectArea = document.createElement('div'); 204 var left = document.createElement('div'); 205 var right = document.createElement('div'); 206 var center = document.createElement('div'); 207 var button = document.createElement('a'); 208 var text = document.createTextNode(selectText); 209 center.id = "mySelectText"+q; 210 var selectWidth = parseInt(selects[q].className.replace(/width_/g, "")); 211 center.style.width = selectWidth - 10 + 'px'; 212 selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px'; 213 button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px'; 214 button.style.marginLeft = - selectWidth - selectLeftSideWidth + 'px'; 215 button.href = "javascript:showOptions("+q+")"; 216 button.onkeydown = selectEvent; 217 button.className = "selectButton"; //class used to check for mouseover 218 selectArea.className = "selectArea"; 219 selectArea.id = "sarea"+q; 220 left.className = "left"; 221 right.className = "right"; 222 center.className = "center"; 223 right.appendChild(button); 224 center.appendChild(text); 225 selectArea.appendChild(left); 226 selectArea.appendChild(right); 227 selectArea.appendChild(center); 228 //hide the select field 229 selects[q].style.display='none'; 230 //insert select div 231 selects[q].parentNode.insertBefore(selectArea, selects[q]);
232 //build & place options div 233 var optionsDiv = document.createElement('div'); 234 optionsDiv.style.width = selectWidth + 1 + 'px'; 235 optionsDiv.className = "optionsDivInvisible"; 236 optionsDiv.id = "optionsDiv"+q; 237 optionsDiv.style.left = findPosX(selectArea) + 'px'; 238 optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px'; 239 //get select's options and add to options div 240 for(var w = 0; w < selects[q].options.length; w++) { 241 var optionHolder = document.createElement('p'); 242 var optionLink = document.createElement('a'); 243 var optionTxt = document.createTextNode(selects[q].options[w].text); 244 optionLink.href = "javascript:showOptions("+q+"); selectMe('"+selects[q].id+"',"+w+","+q+");"; 245 optionLink.appendChild(optionTxt); 246 optionHolder.appendChild(optionLink); 247 optionsDiv.appendChild(optionHolder); 248 //check for pre-selected items 249 if(selects[q].options[w].selected) {selectMe(selects[q].id,w,q);} 250 } 251 //insert options div 252 document.getElementsByTagName("body")[0].appendChild(optionsDiv); 253 } 254} 255function showOptions(g) { 256 elem = document.getElementById("optionsDiv"+g); 257 if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";} 258 else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";} 259 elem.onmouseout = hideOptions; 260} 261function hideOptions(e) { //hiding the options on mouseout 262 if (!e) var e = window.event; 263 var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; 264 if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";}; 265 e.cancelBubble = true; 266 if (e.stopPropagation) e.stopPropagation(); 267} 268function selectMe(selectFieldId,linkNo,selectNo) { 269 //feed selected option to the actual select field 270 selectField = document.getElementById(selectFieldId); 271 for(var k = 0; k < selectField.options.length; k++) { 272 if(k==linkNo) {selectField.options[k].selected = "selected";} 273 else {selectField.options[k].selected = "";} 274 } 275 //show selected option 276 textVar = document.getElementById("mySelectText"+selectNo); 277 var newText = document.createTextNode(selectField.options[linkNo].text); 278 textVar.replaceChild(newText, textVar.childNodes[0]); 279} 280function selectEvent(e) { 281 if (!e) var e = window.event; 282 var thecode = e.keyCode; 283 switch(thecode){ 284 case 40: //down 285 var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, ""); 286 var linkNo = 0; 287 for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}} 288 ++linkNo; 289 if(linkNo >= selects[fieldId].options.length) {linkNo = 0;} 290 selectMe(selects[fieldId].id, linkNo, fieldId); 291 break; 292 case 38: //up 293 var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, ""); 294 var linkNo = 0; 295 for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}} 296 --linkNo; 297 if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;} 298 selectMe(selects[fieldId].id, linkNo, fieldId); 299 break; 300 default: 301 break; 302 } 303} 304function replaceTexts() { 305 for(var q = 0; q < texts.length; q++) { 306 texts[q].style.width = texts[q].size * 10 + 'px'; 307 txtLeft = document.createElement('img'); txtLeft.src = imagesPath + "input_left.gif"; txtLeft.className = "inputCorner"; 308 txtRight = document.createElement('img'); txtRight.src = imagesPath + "input_right.gif"; txtRight.className = "inputCorner"; 309 texts[q].parentNode.insertBefore(txtLeft, texts[q]); 310 texts[q].parentNode.insertBefore(txtRight, texts[q].nextSibling); 311 texts[q].className = "textinput"; 312 313 //create hovers 314 texts[q].onfocus = function() { 315 this.className = "textinputHovered"; 316 this.previousSibling.src = imagesPath + "input_left_xon.gif"; 317 this.nextSibling.src = imagesPath + "input_right_xon.gif"; 318 } 319 texts[q].onblur = function() { 320 this.className = "textinput"; 321 this.previousSibling.src = imagesPath + "input_left.gif"; 322 this.nextSibling.src = imagesPath + "input_right.gif"; 323 } 324 } 325} 326function replaceTextareas() { 327 for(var q = 0; q < textareas.length; q++) { 328 var where = textareas[q].parentNode; 329 var where2 = textareas[q].previousSibling; 330 textareas[q].style.width = textareas[q].cols * 10 + 'px'; 331 textareas[q].style.height = textareas[q].rows * 10 + 'px'; 332 //create divs 333 var container2 = document.createElement('div'); 334 container2.className = "txtarea"; 335 container2.style.width = textareas[q].cols * 10 + 20 + 'px'; 336 container2.style.height = textareas[q].rows * 10 + 20 + 'px'; 337 var topRight = document.createElement('div'); 338 topRight.className = "tr"; 339 var topLeft = document.createElement('img'); 340 topLeft.className = "txt_corner"; 341 topLeft.src = imagesPath + "txtarea_tl.gif"; 342 var centerRight = document.createElement('div'); 343 centerRight.className = "cntr"; 344 var centerLeft = document.createElement('div'); 345 centerLeft.className = "cntr_l"; 346 if(!this.ie) {centerLeft.style.height = textareas[q].rows * 10 + 10 + 'px';} 347 else {centerLeft.style.height = textareas[q].rows * 10 + 12 + 'px';} 348 var bottomRight = document.createElement('div'); 349 bottomRight.className = "br"; 350 var bottomLeft = document.createElement('img'); 351 bottomLeft.className = "txt_corner"; 352 bottomLeft.src = imagesPath + "txtarea_bl.gif"; 353 //assemble divs 354 container2.appendChild(topRight); 355 topRight.appendChild(topLeft); 356 container2.appendChild(centerRight); 357 centerRight.appendChild(centerLeft); 358 centerRight.appendChild(textareas[q]); 359 container2.appendChild(bottomRight); 360 bottomRight.appendChild(bottomLeft); 361 //insert structure 362 where.insertBefore(container2, where2); 363 //create hovers 364 textareas[q].onfocus = function() { 365 this.previousSibling.className = "cntr_l_xon"; 366 this.parentNode.className = "cntr_xon"; 367 this.parentNode.previousSibling.className = "tr_xon"; 368 this.parentNode.previousSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_tl_xon.gif"; 369 this.parentNode.nextSibling.className = "br_xon"; 370 this.parentNode.nextSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_bl_xon.gif"; 371 } 372 textareas[q].onblur = function() { 373 this.previousSibling.className = "cntr_l"; 374 this.parentNode.className = "cntr"; 375 this.parentNode.previousSibling.className = "tr"; 376 this.parentNode.previousSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_tl.gif"; 377 this.parentNode.nextSibling.className = "br"; 378 this.parentNode.nextSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_bl.gif"; 379 } 380 } 381} 382function buttonHovers() { 383 for (var i = 0; i < buttons.length; i++) { 384 buttons[i].className = "buttonSubmit"; 385 var buttonLeft = document.createElement('img'); 386 buttonLeft.src = imagesPath + "button_left.gif"; 387 buttonLeft.className = "buttonImg"; 388 buttons[i].parentNode.insertBefore(buttonLeft, buttons[i]); 389 var buttonRight = document.createElement('img'); 390 buttonRight.src = imagesPath + "button_right.gif"; 391 buttonRight.className = "buttonImg"; 392 if(buttons[i].nextSibling) {buttons[i].parentNode.insertBefore(buttonRight, buttons[i].nextSibling);} 393 else {buttons[i].parentNode.appendChild(buttonRight);} 394 buttons[i].onmouseover = function() { 395 this.className += "Hovered"; 396 this.previousSibling.src = imagesPath + "button_left_xon.gif"; 397 this.nextSibling.src = imagesPath + "button_right_xon.gif"; 398 } 399 buttons[i].onmouseout = function() { 400 this.className = this.className.replace(/Hovered/g, ""); 401 this.previousSibling.src = imagesPath + "button_left.gif"; 402 this.nextSibling.src = imagesPath + "button_right.gif"; 403 } 404 } 405} 406//Useful functions 407function findPosY(obj) { 408 var posTop = 0; 409 while (obj.offsetParent) {posTop += obj.offsetTop; obj = obj.offsetParent;} 410 return posTop; 411} 412function findPosX(obj) { 413 var posLeft = 0; 414 while (obj.offsetParent) {posLeft += obj.offsetLeft; obj = obj.offsetParent;} 415 return posLeft; 416} 417 418window.onload = init;
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.