Testing if something is hidden with jQuery

In jQuery, it is possible to toggle the visibility of an element. You can use the functions .hide(),.show() or .toggle().

How you would test if an element has been hidden or shown using jQuery?

As, the question refers to a single element, this code might be more suitable:

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

Note:-Please comment and reply me.

Read More

Dynamically create a accordion by java script and jquery

Suppose , you have to dynamically get 10 accordion or any number of accordion , there are mainly two solution : whether you create a all accordion by manually or you create that accordion dynamically .



First all create a div with any id , i create a div with accordion id .


            <div id="accordion">
            </div>

   
 Second add script to generate dynamically accordion .


   <script type="text/javascript">

        $(document).ready(function () {     
            BindEnvironments();
        });


 function BindEnvironments() {

            var text = $("#accordion");
            for (var i = 0; i < 10; i++) {
                var content = '<h5><a href="#" id="hf' + i + '" >' + i + '</a></h5>';
                content += '<div id="dv' + i + '">AAA</div> ';
                $("#accordion").append(content);
            }
            $("#accordion").accordion({
                collapsible: false,
                autoHeight: false,
                active: -1
            });
        }

</script>



Note:-Please comment and reply me.

Read More

Alternating Color in Jquery Template

First of all create a div containing table for jquery template header and body.



 <div >
                <div style="width: 580px;">
                    <table id="tblListofItems">
                        <thead>
                            <tr>
                                <th align="left">
                                    Item Detail<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Item Price<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="listofItems">
                        </tbody>
                    </table>
                </div>


Second create jquery template for each row.


  <script id="ItemTemplate" type="text/x-jquery-tmpl">  
        <tr class="${oddOrEven()}">
            <td>
                  <B> ${Name} </B>
                   <br />
                   ${Description}
                  <br />
                   Type: ${Type}
                  <br />
                  <br />
            </td>          
            <td style="text-align:center;">
                ${Rate}
            </td>              
        </tr>
    </script>


Thrid create web service to bind all jquery template.


   $(document).ready(function () {    
                GetAllItems(Id);            
        });

   function oddOrEven() {
            return ($.inArray(this.data, items) % 2) ? "jqueryGridEvenRow" : "jqueryGridOddRow";
        }



.jqueryGridOddRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    font-family: Verdana;
    font-size: 12px; /*background-color: #F0F0F6;*/
}
.jqueryGridEvenRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #E9F8F8;
    color: #022e41;
    text-align: left;
    font-family: Verdana;
    font-size: 12px;
    margin-left: 3px;
}





   function GetItemByIdSucceeded(result) {      
         var  items = result.d;
            $("#listofItems").empty();
            $('#ItemTemplate').tmpl(items).appendTo('#listofItems');
            $("#listofItems tbody tr").addClass("delete");
            $("#listofItems").trigger("update");
            $("#listofItems").trigger("appendCache");
            $("#listofItems tbody tr.delete").remove();
            $("#listofItems").trigger("update");
            return;
        }

        function GetItemByIdFailed(result) {      

        }

        function GetAllItems() {        
            $.ajax({
                url: "../WebServices/ItemService.asmx/GetAllItem",
                data: JSON.stringify({ }), // parameter map
                type: "POST", // data has to be POSTED              
                contentType: "application/json",
                dataType: "json",
                success: GetItemByIdSucceeded,
                error: GetItemByIdFailed
            });
        }









Note:-Please comment and reply me.

Read More

Jquery

What is jQuery?

• A framework for Client Side JavaScript.
• Frameworks provide useful alternatives for common programming tasks, creating functionality which may not be available or cumbersome to use within a language.
• An open source project, maintained by a group of developers, with a very active support base and thorough, well written documentation.
• jQuery is built on top of JavaScript, a rich and expressive language in its own right.

jQuery Syntax:-

$.func(…); 

or 

$(selector).func1(…).func2(…).funcN(…);

$             jQuery Object, can be used instead of  jQuery

selector   Selector syntax, many different selectors allowed

func        Chainable, most functions return a jQuery object

(…)        Function parameters

Note:-Please comment and reply me.

Read More