Wednesday, October 15, 2014

Some useful jQuery Extentions


  • Extended ':contains'-selector that ignores case while comparing text
$.expr[':'].containsIgnoreCase = function (n, i, m) {
    /// <summary>
    /// This is an overridden selector of Jquery selector - ":contains".
    /// This selector works as it is alike ":contains" with additional ability of case insensitivity.
    /// </summary>
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

Update:

In jQuery 1.8 the API for this changed, the jQuery 1.8+ version of this would be:
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {      return function( elem ) {            return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;      };});
Reference: http://stackoverflow.com/a/2196683
  • Extended 'attr'-function that appends value, instead replace
/*
 * .attrExtend(attrName, attrValue)
 * Adds the specified attrValue for specified attrName to each of the set of matched HTML elements.
 */
$.fn.attrExtend = function (attrName, attrValue) {
    /// <summary>
    /// Adds the specified attrValue for specified attrName to each of the set of matched HTML elements.
    /// </summary>
    /// <param name="attrName" type="string">Attribute name, e.g. class</param>
    /// <param name="attrValue" type="string">Attribute value, e.g. Testclass</param>
    $(this).attr(attrName, function (index, existingAttrValues) {
        var re = new RegExp(attrValue, 'g');
        if (existingAttrValues
            && typeof (existingAttrValues) == 'string') {
            if (existingAttrValues.match(re) != null
            && existingAttrValues.match(re).length > 0) {
                return existingAttrValues;
            }
            else {
                return existingAttrValues + ' ' + attrValue;
            }
        }
        else {
            return attrValue;
        }
    });
    return this;
};
  • Extended 'removeAttr'-function that removes value, instead remove whole attribute
/*
 * .removeAttrExtend(attrName, attrValue)
 * Removes the specified attrValue for specified attrName to each of the set of matched HTML elements.
 */
$.fn.removeAttrExtend = function (attrName, attrValue) {
    /// <summary>
    /// Removes the specified attrValue for specified attrName to each of the set of matched HTML elements.
    /// </summary>
    /// <param name="attrName" type="string">Attribute name, e.g. class</param>
    /// <param name="attrValue" type="string">Attribute value, e.g. Testclass</param>
    $(this).attr(attrName, function (index, existingAttrValues) {
        var re = new RegExp(attrValue, 'g');
        if (existingAttrValues
            && typeof (existingAttrValues) == 'string') {
            return existingAttrValues.replace(re, '');
        }
        else {
            return existingAttrValues;
        }
    });
    return this;
};

Update:

  • Extended version of JavaScript method - "hasOwnProperty", that checks if JavaScript object has property that contains string specified by "likeString".
$.hasOwnPropertyLike = function (obj, likeString) {
    /// <summary>
    /// This is an extended version of JavaScript method - "hasOwnProperty".
    /// This method checks if JavaScript object has property that contains string specified by "likeString"
    /// </summary>
    /// <remarks>
    /// Creator:    Vihang Shah
    /// Created on: 21-Apr-2015
    /// Modification History:
    /// Modified by     |       Date        |   Description
    ///
    /// </remarks>
    return ($.propertiesLike(obj, likeString).length > 0);
}

  •  Method enlists property, JavaScript object has and those contains string specified by "likeString",  and returns the list of property-names.
$.propertiesLike = function (obj, likeString) {
    /// <summary>
    /// This method enlists property, JavaScript object has and those contains string specified by "likeString",
    /// and returns the list of property-names
    /// </summary>
    /// <remarks>
    /// Creator:    Vihang Shah
    /// Created on: 21-Apr-2015
    /// Modification History:
    /// Modified by     |       Date        |   Description
    ///
    /// </remarks>
    var properties = [];
    $.each(obj, function (propertyKey, property) {
        if (obj.hasOwnProperty(property)
            && propertyKey.toLowerCase().indexOf(likeString.toLowerCase()) >= 0) {
            properties.push(propertyKey);
        }
    });
    return properties;
}

  •  Javascript : Getting and Setting Caret Position in Textarea
$.fn.getCaret = function () { // adapted from http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
    var ctrl = this[0];
    var CaretPos = 0; // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { // Firefox support
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
};

  •  priceField

$.fn.priceField = function () {
    $(this).keydown(function (e) {
        var val = $(this).val();
        var code = (e.keyCode ? e.keyCode : e.which);
        var nums = ((code >= 96) && (code <= 105)) || ((code >= 48) && (code <= 57)); //keypad || regular
        var backspace = (code == 8);
        var specialkey = (e.metaKey || e.altKey || e.shiftKey);
        var arrowkey = ((code >= 37) && (code <= 40));
        if (specialkey && !arrowkey)
            return false;
        var Fkey = ((code >= 112) && (code <= 123));
        var decimal = ((code == 110 || code == 190) && val.indexOf('.') == -1);
        // UGLY!!
        var misckey = (code == 9) || (code == 144) || (code == 145) || (code == 45) || (code == 46) || (code == 33) || (code == 34) || (code == 35) || (code == 36) || (code == 19) || (code == 20) || (code == 92) || (code == 93) || (code == 27);
        var properKey = (nums || decimal || backspace || specialkey || arrowkey || Fkey || misckey);
        var properFormatting = backspace || specialkey || arrowkey || Fkey || misckey || ((val.indexOf('.') == -1) || (val.length - val.indexOf('.') < 3) || ($(this).getCaret() < val.length - 2));
        if (!(properKey && properFormatting)) {
            return false;
        }
    });
    $(this).blur(function () {
        var val = $(this).val();
        if (val === '') {
            $(this).val('0.00');
        } else if (val.indexOf('.') == -1) {
            $(this).val(val + '.00');
        } else if (val.length - val.indexOf('.') == 1) {
            $(this).val(val + '00');
        } else if (val.length - val.indexOf('.') == 2) {
            $(this).val(val + '0');
        }
    });
    return $(this);
};

Find a cool free stuff everyday

Giveaway of the Day

Hiren Bharadwa's Posts

DotNetJalps