Friday, 12 August 2011

General Javascript functions

Clear the content of an div or span after a specific time:


function clrDiv(div2clr){
document.getElementById(div2clr).innerHTML = "";

}


Input: div or span id from which content has to be removed

Usage Example:
var resultDiv = 'mydivID';
var clr = setTimeout("clrDiv('"+resultDiv+"')", 2000);

 Insert Text at Cursor

function addText( input, insText ) {
        input.focus();
        if( input.createTextRange ) {
            document.selection.createRange().text += insText;
        } else if( input.setSelectionRange ) {
            var len = input.selectionEnd;
            input.value = input.value.substr( 0, len )
            + insText + input.value.substr( len );
            input.setSelectionRange(len+insText.length,len+insText.length);
        } else { input.value += insText; }
    }
 
 
PHP Equivalent in_array function in javascript: 

Array.prototype.in_array = function(p_val) {
 for(var i = 0, l = this.length; i < l; i++) {
  if(this[i] == p_val) {
   return true;
  }
 }
 return false;
}

Usage:

var weekdays ="sunday,monday,tuesday,wednesday,thursday,friday,saturday";
weekDayArr = weekdays.split(",");
 
if(weekDayArr.in_array('sunday'))
{
   alert("Sunday found");
}else{
 alert("sunday not found");
}
 
 
 
// Deafault input text swap



    function clearbox(box,defaulttxt) {





        if(defaulttxt.toLowerCase() == box.value.toLowerCase()) {

            box.value = "";

        }



        box.onblur = function() { unclearbox(box,defaulttxt);}



    }



    function unclearbox(box,defaulttxt) {

        if(box.value == "") {

        box.value = defaulttxt;

        }

    }
 

Select a drop down value using like search

<form name="myform" action="" method="POST">
<div>
    <select name="country">
        <option value="india_91">India</option>
        <option value="australia_23">Australia</option>
        <option value="china_56">China</option>
    </select>
</div>
<div>
    <input type="text" value="" onblur="setSelectedIndex(country, this.value)">
</div>
</form>
<script language="javascript">
    
function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        var found = s.options[i].value.indexOf(v);
        if(found != "-1") {
           s.options[i].selected = true;
         return;
        }
    }
}

</script>


SMS counter with block and text counter:


function smsTextCounter(fieldID,resultID,maxlimit) {
  var smsBlock;
  var currentLength = document.getElementById(fieldID).value.length;
  smsBlock = Math.ceil(currentLength/maxlimit);
  document.getElementById(resultID).innerHTML = (maxlimit*smsBlock) - currentLength+"/"+smsBlock;
  if(currentLength==""){
      document.getElementById(resultID).innerHTML = maxlimit+"/"+1;
  }
}

Usage:
<tr class="form-row-1">
        <td width="40%" align="right" valign="middle" class="form-txt-no-border" <?php echo $tbl_row_hght;?>>Message:</td>
        <td width="60%" align="left" valign="middle">
        <textarea name="message" id="message" class="input" rows="10" cols="50" onkeyup= smsTextCounter('message','msgCounter','160') ></textarea></td>
      </tr>
      <tr>
      <td align="right" valign="middle" <?php echo $tbl_row_hght;?>></td>
      <td align="left" valign="middle" id="msgCounter" class="form-txt-no-border">160/1</td>
      </tr>

Inserting serial number in a table list:

function addSerial(tableID,serialStartFrom) {
    
    var rows = document.getElementById(tableID).rows, // get the rows in the table
    len = rows.length,    // get the quantity of rows
    cell = 1,             // index of the column (zero based index)
    count = serialStartFrom;            // keep score

    for(var i=0;i<len; i++){
       rows[i].cells[cell].innerHTML=count;
        count++;
       
    }    
}
setInterval("addSerial('voiceFiles',1)",500);


Giving alternate color to table listing:

function alternate(id){
  if(document.getElementsByTagName){
    var table = document.getElementById(id);
    var rows = table.getElementsByTagName("tr");
    var rowCounter=0;
    for(i = 0; i < rows.length; i++){
       if(rows[i].style.display !="none"){
      if(rowCounter % 2 == 0){
       rows[i].className = "form-row";
       }else{
       rows[i].className = "form-row-1";
            }
            rowCounter++;
          }
        }
         }
        }

usage:
document.onload=alternate("tableID");





No comments:

Post a Comment