Monday, April 23, 2012

Custom Selectors for Between , Between And Equals , Not Between , Not Between And Equals

for live demo see this link : http://jsfiddle.net/nanoquantumtech/XBcrv/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.extend($.expr[':'], {
                bt: function (elem, i, match) {
                    return ((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
                },

                nbt: function (elem, i, match) {
                    return !((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
                },

                bte: function (elem, i, match) {
                    return ((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
                },

                nbte: function (elem, i, match) {
                    return !((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
                }
            });
        })(jQuery);


        $(document).ready(function () {
            $("#test1 td:bt(3,5)").css("color", "red");

            $("#test2 td:bte(3,5)").css("color", "red");

            $("#test3 td:nbt(3,5)").css("color", "red");

            $("#test4 td:nbte(3,5)").css("color", "red");

        });
    </script>
    <style type="text/css">
        table
        {
            margin: 25px 0px;
        }
      
        h1
        {
            font-weight: bolder;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>
        Between ( $("#test1 td:bt(3,5)").css("color", "red"); )</h1>
    <table id="test1" border="1">
        <tr>
            <td>
                TD #0
            </td>
            <td>
                TD #1
            </td>
            <td>
                TD #2
            </td>
        </tr>
        <tr>
            <td>
                TD #3
            </td>
            <td>
                TD #4
            </td>
            <td>
                TD #5
            </td>
        </tr>
        <tr>
            <td>
                TD #6
            </td>
            <td>
                TD #7
            </td>
            <td>
                TD #8
            </td>
        </tr>
    </table>
    <h1>
        Between And Equals ( $("#test2 td:bte(3,5)").css("color", "red"); )</h1>
    <table id="test2" border="1">
        <tr>
            <td>
                qTD #0
            </td>
            <td>
                qTD #1
            </td>
            <td>
                qTD #2
            </td>
        </tr>
        <tr>
            <td>
                qTD #3
            </td>
            <td>
                qTD #4
            </td>
            <td>
                qTD #5
            </td>
        </tr>
        <tr>
            <td>
                qTD #6
            </td>
            <td>
                qTD #7
            </td>
            <td>
                qTD #8
            </td>
        </tr>
    </table>
    <h1>
        Not Between ( $("#test3 td:nbt(3,5)").css("color", "red"); )</h1>
    <table id="test3" border="1">
        <tr>
            <td>
                wTD #0
            </td>
            <td>
                wTD #1
            </td>
            <td>
                wTD #2
            </td>
        </tr>
        <tr>
            <td>
                wTD #3
            </td>
            <td>
                wTD #4
            </td>
            <td>
                wTD #5
            </td>
        </tr>
        <tr>
            <td>
                wTD #6
            </td>
            <td>
                wTD #7
            </td>
            <td>
                wTD #8
            </td>
        </tr>
    </table>
    <h1>
        Not Between And Equals ( $("#test4 td:nbte(3,5)").css("color", "red"); )</h1>
    <table id="test4" border="1">
        <tr>
            <td>
                rTD #0
            </td>
            <td>
                rTD #1
            </td>
            <td>
                rTD #2
            </td>
        </tr>
        <tr>
            <td>
                rTD #3
            </td>
            <td>
                rTD #4
            </td>
            <td>
                rTD #5
            </td>
        </tr>
        <tr>
            <td>
                rTD #6
            </td>
            <td>
                rTD #7
            </td>
            <td>
                rTD #8
            </td>
        </tr>
    </table>
</body>
</html>
Posted by at 1 comment:
Labels: , ,

Thursday, April 12, 2012

How to create CSS Class Dinamically using JQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to create CSS Class Dinamically using JQuery. </title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('p').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('p { height: 100px; width: 100px; color: red; }');
            });

            $('b').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('b { color: green; }');
            });
        });
    </script>
</head>
<body>
    <p>
        How to create CSS Class Dinamically using JQuery.<span>Click Me.</span>
    </p>
    <b>Thulasi Ram.S <span>Me Too..</span> </b>
</body>
</html>
Posted by at No comments:
Labels: , ,

Tuesday, March 27, 2012

How to clear form for particular filed only using jquery

 // Here except Email and Password field alone will not be cleared remaing fileds will be cleared.
 // class="ClearForm"  because not exist.

// class="ClearForm Corner" this is multiple class style. You can add more than one class style to 
// htmal tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.fn.clearForm = function () {
                return this.each(function () {
                    var obj = $(this);
                    var objClass = '.ClearForm';

                    obj.find('[type="text"]' + objClass + ',[type="password"]' + objClass + ',[type="hidden"]' + objClass + ',textarea' + objClass).val('');
                    obj.find('[type="checkbox"]' + objClass + ',[type="radio"]' + objClass).attr('checked', false);
                    obj.find('select' + objClass).val(-1);
                });
            };
        })(jQuery);        
    </script>
    <script type="text/javascript">
//  Here Email and Password field alone will not be cleared.  class="ClearForm"  because not exist.
        $(document).ready(function () {
            $('#btnClearForm').click(function () {
                $('#form1').clearForm();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <input type="text" id="tbEmail" class=" Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <input type="password" id="tbPassword" class="Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    HiddenValue
                </td>
                <td>
                    <input type="hidden" id="hdnHiddenValue" class="ClearForm Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    Details
                </td>
                <td>
                    <textarea style="width: 300px; height: 300px;" id="tbDetails" class="ClearForm Corner"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    Sex
                </td>
                <td>
                    <input type="radio" value="Male" name="rblSex" class="ClearForm RedColor" />Male<br />
                    <input type="radio" value="Female" name="rblSex" class="ClearForm RedColor" />Female
                </td>
            </tr>
            <tr>
                <td>
                    Property
                </td>
                <td>
                    <input type="checkbox" value="Car" name="cbProperty" class="ClearForm RedColor" />Car<br />
                    <input type="checkbox" value="House" name="cbProperty" class="ClearForm RedColor" />House<br />
                    <input type="checkbox" value="Van" name="cbProperty" class="ClearForm RedColor" />Van<br />
                </td>
            </tr>
            <tr>
                <td>
                    Status
                </td>
                <td>
                    <select id="ddlStatus" class="ClearForm RedColor">
                        <option>Select</option>
                        <option value="single">single</option>
                        <option value="married">married</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnClearForm" value="Clear Form" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Posted by at No comments:
Labels: , ,

How to clear form using jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title> 
                                                                         // add your reference jquery  file below
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
                                                       
    <script type="text/javascript">
        (function ($) {
            $.fn.clearForm = function () {
                return this.each(function () {
                    var obj = $(this);
                    obj.find('[type="text"],[type="password"],[type="hidden"],textarea').val('');
                    obj.find('[type="checkbox"],[type="radio"]').attr('checked', false);
                    obj.find('select').val(-1);
                });
            };
        })(jQuery);       
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnClearForm').click(function () {
                $('#form1').clearForm();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <input type="text" id="tbEmail" />
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <input type="password" id="tbPassword" />
                </td>
            </tr>
            <tr>
                <td>
                    HiddenValue
                </td>
                <td>
                    <input type="hidden" id="hdnHiddenValue" />
                </td>
            </tr>
            <tr>
                <td>
                    Details
                </td>
                <td>
                    <textarea style="width: 300px; height: 300px;" id="tbDetails"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    Sex
                </td>
                <td>
                    <input type="radio" value="Male" name="rblSex" />Male<br />
                    <input type="radio" value="Female" name="rblSex" />Female
                </td>
            </tr>
            <tr>
                <td>
                    Property
                </td>
                <td>
                    <input type="checkbox" value="Car" name="cbProperty" />Car<br />
                    <input type="checkbox" value="House" name="cbProperty" />House<br />
                    <input type="checkbox" value="Van" name="cbProperty" />Van<br />
                </td>
            </tr>
            <tr>
                <td>
                    Status
                </td>
                <td>
                    <select id="ddlStatus">
                        <option>Select</option>
                        <option value="single">single</option>
                        <option value="married">married</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnClearForm" value="Clear Form" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Posted by at No comments:
Labels: , ,

Tuesday, March 13, 2012

How to find and replace hidden field value & attributes value in jquery


<input id="UserIds" type="hidden" value="1642,6172,2485,2281," 
data-userids="1642,6172,2485,2281," name="UserIds">



 <script type="text/javascript">
$(document).ready(function(){
     $('#UserIds').replaceVal('2485,', '');


     $('#UserIds').replaceAttr('2485,', '','data-userids');
});


(function ($) {
    $.fn.replaceAttr = function (match, replaceWith, attrObj) {
        return $(this).attr(attrObj, $(this).attr('value').replace(match, replaceWith));
    };


    $.fn.replaceVal = function (match, replaceWith) {
        return $(this).replaceAttr(match, replaceWith, 'value');
    };
                            
                    //       OR ( above or below one only use it.)



    $.fn.replaceVal = function (match, replaceWith) {
         return $(this).attr('value', $(this).attr('value').replace(match, replaceWith));
    };



})(jQuery);

 </script>



Output:
<input id="UserIds" type="hidden" value="1642,6172,2281,"
  data-userids ="1642,6172,2281,"  name="UserIds">

Posted by at No comments:
Labels:

Friday, March 9, 2012

:unchecked Selector ( Matches all elements that are unchecked (type check box or radio). )

    // :unchecked Selector

    // Matches all elements that are unchecked (type check box or radio).

    $.extend($.expr[':'], {
        unchecked: function (obj) {
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        }
    });

eg:

                        alert($('input:checkbox:unchecked').length);
Posted by at No comments:
Labels:

Tuesday, March 6, 2012

How to remove multiple attributes using jquery

<div class="Test" id="removeAttributesTest" data-id="1" data-name="ThulasiRam.S"
        style="color: Red;">
        <h6>
            Testing to remove multiple attributes using jquery.
        </h6>
 </div>

<script type="text/javascript"> 
(function ($) {     

     $.fn.removeAttrs = function (value) {
        return this.each(function () {
            var obj = $(this);
            if (value && typeof value === 'string') {
                $.each(value.split(' '), function (i, val) {
                    if ($.trim(val).length > 0) {
                        obj.removeAttr($.trim(val));
                    }
                });
            }
        });
    };
})(jquery);

</script>
<script type="text/javascript">
    $(document).ready(function () {  
                                                         //use space for removing multiple attributes.
              $('#removeAttributesTest').removeAttrs('data-id data-name style');
    });
</script>
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)