Posted By

msstar on 12/07/12

Tagged

javascript jquery

Versions (?)

jQuery/JavaScript

/ Published in: jQuery

jQuery

Highlighted TextExpand

//selected element if it's value equals to 0
$("select option").filter(function(){
	if($(this).val() == "0") return $(this);
}).attr('selected',true);

//difference between $(document).ready() and $(function(){});
//they are both same, $(function(){}); is the short way of document ready

//double not operators (!!) changes a value into boolean type
return !!isUTC //result is a boolean value

//double tilde operators (~~) used as a faster substitute for Math.floor()
return ~~(3.4) //result is 3

//absolute round function
function absRound(number) {
    if (number < 0) {
        return Math.ceil(number); //round upwards so -5.9 round to -5
    } else {
        return Math.floor(number); //round downwards so 5.9 round to 5
    }
}

//to detect the type of object
Object.prototype.toString.call(input) === '[object Array]'
Object.prototype.toString.call(input) === '[object Number]'
Object.prototype.toString.call(input) === '[object Math]'
Object.prototype.toString.call(input) === '[object Date]'
Object.prototype.toString.call(input) === '[object String]'

//=== vs. ==
The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.
The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. It's this case where === will be faster, and may return a different result than ==. In all other cases performance will be the same.

// compare two arrays, return the number of differences
function compareArrays(array1, array2) {
    var len = Math.min(array1.length, array2.length),
        lengthDiff = Math.abs(array1.length - array2.length),
        diffs = 0,
        i;
    for (i = 0; i < len; i++) {
        if (~~array1[i] !== ~~array2[i]) {
            diffs++;
        }
    }
    return diffs + lengthDiff;
}

//expand-collapse text area
<table>
    <tr>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
    </tr>
    <tr>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>
        <td><div style="height:20px;"><textarea name="box" style="width: 100px; height:20px; background-color:white; position: relative; resize:none"></textarea></div></td>        
    </tr>
</table>

$('textarea[name=box]').focus(function()
{
    /*to make this flexible, I'm storing the current width in an attribute*/
    $(this).attr('data-default', $(this).width());
    $(this).attr('height',$(this).height());
    $(this).animate({ width: 300,height:300}, 'slow').css("z-index",1);
    //$(this).height(300).width(300).css("z-index",1);
}).blur(function()
{
    /* lookup the original width */
    var w = $(this).attr('data-default');
    var h = $(this).attr('height');
    $(this).animate({ width: w, height:h }, 'slow').css("z-index",0);
    //$(this).height(h).width(w).css("z-index",0);
});

//add date picker for all date fields dynamically
$('body').on('focus','.date', function(){
	$(this).datepicker({dateFormat: "dd/mm/yy",changeMonth: true,changeYear: true});
});

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

jQuery/JavaScript

Related snippets

Choose a language for easy browsing: