Site Tools


Hotfix release available: 2025-05-14b "Librarian". upgrade now! [56.2] (what's this?)
Hotfix release available: 2025-05-14a "Librarian". upgrade now! [56.1] (what's this?)
New release available: 2025-05-14 "Librarian". upgrade now! [56] (what's this?)
prog:js

Lingid

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;
    }
  }
}

Examples

prog/js.txt · Last modified: 2019/09/20 15:52 by 127.0.0.1