====== Lingid ======
  * [[http://www.quirksmode.org/dom/inputfile.html|file upload kasti modimine]]
  * [[http://dev2dev.bea.com/pub/a/2005/04/portal_menus.html|How to hide windowed elements]]
  * //[[http://www.dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx|How to hide windowed elements]]//
  * [[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.
<code javascript>
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
</code>
<code javascript>
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */ 
});
</code>



===== 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:
<code javascript>
function sgx_run_init(){
    if (document.body)
        eval("do_something()\;");
    else
        setTimeout("sgx_run_init()", 1);
}
</code>
<code javascript>
sgx_run_init();
</code>

Natuke rohkem advanced näide:
<code javascript>
function schedule(objectID, functionCall)
{
    if (document.getElementById(objectID))
    {
        eval(functionCall);
    }
    else
    {
        setTimeout("schedule('" + objectID + "', '" + functionCall + "')", 1);
    }

    return true;
}
</code>
<code javascript>
schedule("table5", "showTable()\;");
</code>

===== Refresh page every minute =====
<code javascript>
<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>
</code>

===== Multiple select without ctrl =====
[[http://www.apriori-it.co.uk/MultipleSelect.asp]]


===== Multiple select boxis väärtuste liigutamine üles/alla =====
<code javascript>
  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;
              }
          }
      }
  }
</code>

===== HTML elementide array-sse uue elemendi lisamine =====
<code javascript>
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]);
}
</code>
<code html>
<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>
</code>

===== Ajatatud peitmine (setTimeout) =====
<code javascript>
function set_timeout(msec)
{
    setTimeout(function(){document.getElementById('xajax_msg').style.display = 'none';}, msec);
}
</code>

===== Kursori & lehe asukoha määramine =====
Lehe scrollingu leidmine
<code javascript>
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;
}
</code>

Hiire asukoht (absoluutne, st. ei arvesta scrollingut!)
<code javascript>
        if(browser_IE)
        {
            var cX = window.event.clientX;
            var cY = window.event.clientY;
        }
        else
        {
            var cX = last_mouse_X;
            var cY = last_mouse_Y;
        }
</code>

===== Detecting IE =====
<code javascript>
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;
}
</code>



===== get_radio_button_value =====
<code javascript>
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;
}
</code>
===== select_all_options  =====
Märgib combobox-s kõik väärtused valituks
<code javascript>
function select_all_options(eid)
{
    var elem = document.getElementById(eid);

    for(var i=0;i<elem.options.length;i++)
    {
      elem.options[i].selected = true;
    }
}
</code>

====== Handling HTML elements ======


===== Select box =====
Uue väärtuse lisamine:
<code javascript>
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
</code>
Väärtuse kustutamine:
<code javascript>
document.myform.box.options[1] = null; // üks kindel väärtus
document.myform.box.options.length = 0; // kustuta kõik
</code>
<code javascript>
document.test.test2.options[0].selected //returns true, since first option is selected
document.test.test2.options[2].text //returns "Option 3"
</code>


===== Unset/remove array element =====
If you know the index of the element to remove, you could use the splice method, like this:
<code javascript>
var a=['one','two','three','four'];
a.splice(1,1); // Removes 1 element from index 1
alert(a); // Results in 'one','three','four'
</code>
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:
<code javascript>
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'
</code>



===== Manipulate HTML array =====
HTML array:
<code html>
<input name="kala[]" value="kala0">
<input name="kala[]" value="kala1111">
<input name="kala[]" value="kala2">
<input name="kala[]" value="kalaKolm">
</code>

Kindla array elemendi accessimine:
<code javascript>
var inpt = document.getElementsByName('kala[]');
alert(inpt[2].value); // väljund: 'kala2'
</code>

HTML array-st kindla elemendi kustutamine (**NB! Indeksitesse ei jää auku!!!** S.t. et järgmine element saab endale uueks ID-ks eelmise jne.):
<code javascript>
inpt[2].parentNode.removeChild(inpt[2]); // kustutatakse element id-ga 2 
</code>

===== Check & uncheck all checkboxes =====
<code javascript>
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;
    }
}
</code>
<code html>
<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">
</code>

===== Add elements dynamically =====
<code javascript>
var newEl = document.createElement('input');
newEl.setAttribute('id','test');                                                                                                      newEl.setAttribute('name','test');

document.getElementById('q123').appendChild(newEl);
</code>

===== Fading =====
<code javascript>
//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)
}
</code>

===== Select radio button =====
<code javascript>
<script>
  window.onload = function () {
    var a = document.getElementsByName('root_net');
    a[0].checked = 1;
  }
</code>



===== Select option by value ======
<code javascript>
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;
    }
  }
}

</code>

====== Examples ======
  * [[prog:js.picture_changer|Picture changer]]