Table of Contents
Lingid
- http://www.softcomplex.com/ - palju lahedaid ja hästi tehtud JS tükke (puu, color-picker, hints, scrolling, slider jne)
Funktsioonid
addLoadEvent()
Võimaldab lisada 1..n uut onLoad handlerit ilma eelmisi ülekirjutamata.
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad); addLoadEvent(function() { /* more code to run on page load */ });
Run function when object loaded
Käivitab etteantud funktsiooni alles siis, kui vastav element on laetu. Võimaldab faili alguses elemendile evente või midaiganes külge panna, kuigi tegelikult element pole veel loodud…
Kõige lihtsam näide. Käivitab funktsiooni do_something kohe kui on olemas ligipääs body elementidele:
function sgx_run_init(){ if (document.body) eval("do_something()\;"); else setTimeout("sgx_run_init()", 1); }
sgx_run_init();
Natuke rohkem advanced näide:
function schedule(objectID, functionCall) { if (document.getElementById(objectID)) { eval(functionCall); } else { setTimeout("schedule('" + objectID + "', '" + functionCall + "')", 1); } return true; }
schedule("table5", "showTable()\;");
Refresh page every minute
<script language="JavaScript"> <!-- if (document.images) setTimeout('location.reload(true)',1000*60); // forces a reload from the server else setTimeout('location.href = location.href',1000*60); // just reloads the page //--> </script>
Multiple select without ctrl
Multiple select boxis väärtuste liigutamine üles/alla
function field_move_up(box_id) { var box = document.getElementById(box_id); var o_length = box.options.length; if(o_length < 2) return false; if(box.options[0].selected) return false; for(var i=0;i<o_length;i++) { var o = box.options[i]; if(o.selected && o.value) { // switch with upper option var v = o.value; var t = o.text; var uopt = box.options[i-1]; // upper option if(uopt.value) { o.value = uopt.value; o.text = uopt.text; o.selected = false; uopt.value = v; uopt.text = t; uopt.selected = true; } } } } function field_move_down(box_id) { var box = document.getElementById(box_id); var o_length = box.options.length; if(o_length < 2) return false; var last_index = o_length-1; // skip empty if(box.options[last_index].selected) return false; for(var i=(last_index-1);i>=0;i--) { var o = box.options[i]; if(o.selected && o.value) { // switch with upper option var v = o.value; var t = o.text; var dopt = box.options[i+1]; // upper option if(dopt.value) { o.value = dopt.value; o.text = dopt.text; o.selected = false; dopt.value = v; dopt.text = t; dopt.selected = true; } } } }
HTML elementide array-sse uue elemendi lisamine
function add_into_HTML_array(name, i, val) { var arr = document.getElementsByName(name); var cloned = arr[i].cloneNode(true); cloned.value = val; arr[i].parentNode.insertBefore(cloned, arr[i]); }
<input name="kala[]" value="kala333"> <input name="kala[]" value="kala0"> <input name="kala[]" value="kala1"> <input name="kala[]" value="kala2"> <a href="#" onclick="add_into_HTML_array('kala[]', 2, 'new value!!!');">add to array</a>
Ajatatud peitmine (setTimeout)
function set_timeout(msec) { setTimeout(function(){document.getElementById('xajax_msg').style.display = 'none';}, msec); }
Kursori & lehe asukoha määramine
Lehe scrollingu leidmine
function get_scrollTop() { if (document.documentElement && document.documentElement.scrollTop) // IE 6 theTop = document.documentElement.scrollTop; else if (document.body) // DOM theTop = document.body.scrollTop; else // Netscape theTop = window.pageYOffset; return theTop; }
Hiire asukoht (absoluutne, st. ei arvesta scrollingut!)
if(browser_IE) { var cX = window.event.clientX; var cY = window.event.clientY; } else { var cX = last_mouse_X; var cY = last_mouse_Y; }
Detecting IE
function detect_IE(){ var detect = navigator.userAgent.toLowerCase(); // if it is Opera then it can not be IE if (detect.indexOf('opera') > -1) return false; if (detect.indexOf('compatible') > -1 && detect.indexOf('msie') > -1) return true; else return false; }
get_radio_button_value
function get_radio_button_value(radio, name_given) { if (name_given) var rb = document.getElementsByName(radio); else var rb = document.getElementById(radio); for (counter = 0; counter < rb.length; counter++) if (rb[counter].checked) return rb[counter].value; return false; }
select_all_options
Märgib combobox-s kõik väärtused valituks
function select_all_options(eid) { var elem = document.getElementById(eid); for(var i=0;i<elem.options.length;i++) { elem.options[i].selected = true; } }
Handling HTML elements
Select box
Uue väärtuse lisamine:
new Option(text, value, defaultSelected, selected) document.myform.box.options[0] = new Option("Sports", "sportsvalue", true, false); // asendamine document.myform.box.options[document.myform.box.options.length]=new Option(...); // lisamine lõppu
Väärtuse kustutamine:
document.myform.box.options[1] = null; // üks kindel väärtus document.myform.box.options.length = 0; // kustuta kõik
document.test.test2.options[0].selected //returns true, since first option is selected document.test.test2.options[2].text //returns "Option 3"
Unset/remove array element
If you know the index of the element to remove, you could use the splice method, like this:
var a=['one','two','three','four']; a.splice(1,1); // Removes 1 element from index 1 alert(a); // Results in 'one','three','four'
If you don’t know the index, but the value of the element, you could add a little method to the Array class like this:
Array.prototype.remove=function(s){ for(i=0;i<this .length;i++){ if(s==this[i]) this.splice(i, 1); } } var a=['one','two','three','four']; a.remove('three'); alert(a); // Results in 'one','two','four'
Manipulate HTML array
HTML array:
<input name="kala[]" value="kala0"> <input name="kala[]" value="kala1111"> <input name="kala[]" value="kala2"> <input name="kala[]" value="kalaKolm">
Kindla array elemendi accessimine:
var inpt = document.getElementsByName('kala[]'); alert(inpt[2].value); // väljund: 'kala2'
HTML array-st kindla elemendi kustutamine (NB! Indeksitesse ei jää auku!!! S.t. et järgmine element saab endale uueks ID-ks eelmise jne.):
inpt[2].parentNode.removeChild(inpt[2]); // kustutatakse element id-ga 2
Check & uncheck all checkboxes
function apply_selection(f,name,state) { if(f[name]) { if(f[name].value) f[name].checked = state; else { for(var i=0;i<f[name].length;i++) f[name][i].checked = state; } return true; } }
<input type="checkbox" name="select_all" value="1" onClick="apply_selection(this.form,'selrows[users_listing][]',this.checked)"> <input type="checkbox" name="selrows[users_listing][]" value="181"> <input type="checkbox" name="selrows[users_listing][]" value="451"> <input type="checkbox" name="selrows[users_listing][]" value="11"> <input type="checkbox" name="selrows[users_listing][]" value="81">
Add elements dynamically
var newEl = document.createElement('input'); newEl.setAttribute('id','test'); newEl.setAttribute('name','test'); document.getElementById('q123').appendChild(newEl);
Fading
//browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" browserdetect="mozilla"; //XXX var fobj = pic1; function fading(fobj, way){ if (way == "in") highlighting=setInterval("fadein(fobj)",50) else highlighting=setInterval("fadeout(fobj)",50) } function fadein(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) } function fadeout(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity>0) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity>0) cur2.filters.alpha.opacity-=10 else if (window.highlighting) clearInterval(highlighting) }
Select radio button
<script> window.onload = function () { var a = document.getElementsByName('root_net'); a[0].checked = 1; }
Select option by value
function selectByValue(id, selVal) { var selbox = document.getElementById(id); for(var i=0; i < selbox.length; i++) { if(selbox.options[i].value == selVal ) { selbox.selectedIndex = i; break; } } }
