Thursday, July 21, 2011

Cool jQuery Progress Indicator

Today I am going to show you how you can create a cool progress indicator to tell your end user that something is going on behind the back of an action. Below is an image of the progress indicator that slides from the top to the middle of the screen then displays the processing message then slides up and disappears once done. This code does not use any other 3rd party jquery plugin to display progress indicator.


<html>
<head>
    <script src="scripts/jquery.js"></script>
    <script type="text/javascript" >
        var $j = jQuery.noConflict();
        $j(document).ready(function(){
            $j("#btnSubmit").click(function(){
                $j("#messenger").css("width", document.body.offsetWidth);
                    $j("#messenger").css("height", document.body.offsetHeight);
                    $j("#messenger").css("opacity",.7);
                    $j("#messenger").fadeIn('fast');
                $j("#messengermessage").css("width", document.body.offsetWidth);
                $j("#messengermessage").animate({opacity: "1", top: "+=" + addToAnimation, height: "100", width: document.body.offsetWidth}, "slow")
                    var myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">saving attachments...</font></div>'
                    $j("#messengermessage").html("");
                    $j("#messengermessage").html(myhtml);
                $j.post('handlers/EmployeeRequisition.ashx', {
                    requestedBy : GetRequestedBy(),
                                requestor : GetRequestor(),
                                requisitionDate : $j("#dtpRequisitionDate").val()
                },
                        function(data) {
                    myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">form saved... </font></div>'
                                $j("#messengermessage").html("");
                                $j("#messengermessage").html(myhtml);
                                $j("#messengermessage").animate({opacity: "1"},2000, function(res) {
                                var subtractThis = document.body.offsetHeight - 500;
                                $j("#messengermessage").animate({opacity: "0", top: "-=" + subtractThis, height: "0", width: document.body.offsetWidth}, "slow")
                                    $j("#messenger").fadeOut('fast');
                            });
            });
        });
    </script>
</head>
<body style="font-family: Verdana; margin: 0px;">
    <form id="frmHR001" runat="server">
    <div>
        ............

    </div>
    <div>

        <input type="button" id="btnSubmit" value="submit" />
    </div>
    <div id="messenger" style="float: none; position: absolute; width: 100%; height: 100%;
            background-color: #000000; display: none; left: 0; top: 0;">
        </div>
        <div id="messengermessage" style="float: none; position: absolute; width: 100%; height: 100px;
            background-color: #ffffff; display: none; left: 0; top: 0; text-align: center;">
            <div style="float: left; position: relative; padding-top: 30px;">
                <img src="images/processing.gif" />
            </div>
            <div style="float: left; position: relative; padding-top: 40px;">
                <font style="font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold;">
                    processing...</font>
            </div>
        </div>
    </form>
</body>
</html>

The code is quite long but then again it achieves our purpose. Let me know if there are any issues implementing this code.



Cheers,

Ujjwal Soni

7 comments:

Flower Girl Dresses said...

Amazing stuff,Thanks so much for this!This is very useful post for me. This will absolutely going to help me in my projects .

----------------------------------------------------------
Flower Girl Dresses|Empire Wedding Dresses|New Style Wedding Dresses

winnieqin02 said...

Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!

Classic Dresses
Classic Bridesmaid Dresses
Wedding Dresses with Sleeves

Happy smile make me strong said...

Good article.I really think what you said is right,in modern society,we have so many troubles,if you feel nothing to relax yourself,I suggest you to play the wow and some other games,and you can come to my page to find more information about WOW Gold and D3 Items

Biti said...

Amazing stuff,Thanks so much for this!








___________
diablo 3 gold | diablo 3 guide

Jennifer Sun said...

Panda Elijah the rarest Ruishou - Herd take home. According to legend Herd will bring harmony and good luck, foot silver white clouds, flight speed increase as your riding skill level. Buy Herd you buy the horse World of Warcraft game account, all existing and future created role will have a dazzling auspicious mounts. Do you want the rewards that can not be exchanged by the world of warcraft gold? Do you want the mount that stands for the highest reputation? Do you want the mount that will bring you endless of glory? Now is the time. Seize your time to get the best wow rewards.

Jennifer Sun said...

Panda Elijah the rarest Ruishou - Herd take home. According to legend Herd will bring harmony and good luck, foot silver white clouds, flight speed increase as your riding skill level. Buy Herd you buy the horse World of Warcraft game account, all existing and future created role will have a dazzling auspicious mounts. Do you want the rewards that can not be exchanged by the world of warcraft gold? Do you want the mount that stands for the highest reputation? Do you want the mount that will bring you endless of glory? Now is the time. Seize your time to get the best wow rewards.

Linda said...

The currency used in World of Warcraft, WoW is known as cheap wow gold. World of Warcraft itself is arguably the most popular MMORPG in the world today, with over 10 million subscribers playing regularly across the globe. Since its release on November 23, 2004, WoW has experienced phenomenal growth and seen the release of a number of expansion packs, including Burning Crusade, Cataclysm, Wrath of the Lich King, and Mists of Pandaria. Thanks to a team buy wow gold dedicated to regularly updating and tweaking the title, it continues to dominate the online game market.The game's currency, aion kinah is obtained by completing quests, defeating monsters and even through the in-game auction house. You can also buy aion kinah right here on myjoxgold.com, we offer low prices and speedy, guaranteed delivery cheap aion kinah.