Month: August 2014

Sibasis Jena

Select child checkboxes upon selection of parent checkbox

This section will give you a idea on bellow items

1.How to select a group of CheckBoxes at a time.
2.How to use prop method in Jquery.

Description:
On the Parent Check box click 2 things we need to do:
1. Need a selector which will get all the check boxes.
2. Need a Method which will append the checked property to the check boxes.

Note:
Please Copy all the bello Html codes into a Html file and open that file in one browser.
You will see one parent Check box and multiple check boxes.
Please select the parent check box all the Child items will be selected automatically.
Demonstration:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.11.0.js"></script>
    <script>
        $(document).ready(function () {
            //The click event will fire by selecting/de-Selecting the Parent CheckBox
            $('#chkSelectAll').click(function (e) {
                //prop method will Add the property to the elements
                //The prop methid will take 2 parameters one is the propertey Name. 2nd one is propertey value
                $('#chkNumber td input:checkbox').prop('checked', this.checked);
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="checkbox" name="chkSelectAll" id="chkSelectAll">
        <label for="chkSelectAll">Select All</label>

        <table style="margin-left: 18px;" id="chkNumber">
            <tbody>
                <tr>
                    <td><input type="checkbox" value="1" name="chkNumber$0" id="chkNumber0"><label for="chkNumber0">One</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="2" name="chkNumber$1" id="chkNumber1"><label for="chkNumber1">Two</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="3" name="chkNumber$2" id="chkNumber2"><label for="chkNumber2">Three</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="4" name="chkNumber$3" id="chkNumber3"><label for="chkNumber3">Four</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="5" name="chkNumber$4" id="chkNumber4"><label for="chkNumber4">Five</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="6" name="chkNumber$5" id="chkNumber5"><label for="chkNumber5">Six</label></td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="7" name="chkNumber$6" id="chkNumber6"><label for="chkNumber6">Seven</label></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

For your reference:
Please have a look on Jquery Prop Method

Sibasis Jena

Showing Loading Image till the Page ready Using Jquery.

Complete Code here;

How it works:
In my page there are 2 divs
1. loading Image Div
2.Rest of the Page Content.

In the page it self the Loading image Div is visible and The Content Div is hidden.
Just we need to do 2 thing
1.Hide the Loading image Div
2.Unhide the Content Div

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.11.0.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            $("#dvLoadingImage").fadeOut(100);
            $("#dvContent").fadeIn(100);
        };
    </script>
    <style>
        #dvLoadingImage {
            color: rgb(119, 69, 233);
            margin-left: 35%;
            margin-top: 13%;
        }
         #dvContent {
            font-size: 152px;
            margin-left: 20%;
            margin-right: 20%;
            display: none;
            background-image: url('Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg');
        }
    </style>
</head>
<body>
    <div id="dvLoadingImage" >
        <img src="images.jpg" />
    </div>
    <div style="" id="dvContent">
        <span>Body Contents Goes here.</span>
    </div>
</body>
</html>