Menu ▼

Previous Next

JQuery ready event:

JQuery ready event will fire when the page is load completed at client side. Generally we will use ready event to bind events, apply styles or other manipulations.


Applying styles to div in ready event

Style applied to this div using JQuery in ready event.
In this example we applied Background color, fore color, height, width using JQuery.

<script language="javascript">

    $(document).ready(function () {

        $("#divContent").css("background-Color", "green");

        $("#divContent").css("height", 100).css("width", 250).css("padding", 10).css("color", "white");

        $("#divContent").css("text-align", "justify");

        $("#divContent").css("border-radius", 15).css("-moz-border-radius", 15);

    });

</script>


Adding events to button in ready event

We can apply different styles using JQuery, In this example we applied animation to button using jquery, when you click this button it's height & width will be increases automatically and reset to its normal positon by using jquery animation.

    <script language="javascript">

        $(document).ready(function () {

            $("#btnClick").css("background-Color", "orange").css("color", "white").css("border", "1px solid gray");

            $("#btnClick").css("padding", "5px 20px").css("margin", 0).css("cursor", "pointer");

            $("#btnClick").css("border-radius", 15).css("-moz-border-radius", 15);

            $("#btnClick").on("click", function (e) {

                e.stopPropagation();

                var orghieght = $(this).outerHeight();

                var orgwidth = $(this).outerWidth();

                $(this).animate(

                { height: $(this).height() * 5 }

                , 1000, function () {

                    $(this).animate(

                { width: $(this).width() * 5 }

                , 1000, function () {

                    $(this).animate(

                { height: orghieght }

                , 1000, function () {

                    $(this).animate(

                { width: orgwidth }

                , 1000, function () {

                });

                });

                });

                });

            });

        });

    </script>

Previous Next




Search dotnetlearners.com