Menu ▼



Posted By :
avatarmrkraju
Total Views : 662

JQuery ready event example

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 animationto button using jquery, when you click this button it's height & width will be increasesautomatically 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();

                varorghieght = $(this).outerHeight();

               varorgwidth = $(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>






comments powered by Disqus


Search dotnetlearners.com