Saturday, July 21

Load Different Pages dynamically using jquery and javascript function with displaying progress bar

Here is my Design View:-



Here is my ProgressBar Image:-

Here is my SourceCode:-


 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Om namah shivaya</title>
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        function LoadPage(page) {
            $(document).ready(function () {
                $('#data_middle').load(page, function () {
                    $("#imgProg").hide();

                });
            });
        }


        $(document).ready(function () {

            $('#shibashish').click(function () {
                 e.preventDefault();
                $('#data_middle').empty();
                $("#imgProg").show();
                window.setTimeout('LoadPage("somefolder/shibashish.aspx")', 1000);
            });

            $("#NewPage").click(function (e) {
                e.preventDefault();

                // $('#Newpage').removeClass(" Newpage ");
                //$('# Newpage ').addClass(" Newpage_active");
                $('#data_middle').empty();
                $("#imgProg").show();
                window.setTimeout('LoadPage("somefolder/anotherfolder/NewPage.aspx")', 1000);

            });

        });

    </script>
    <style type="text/css">
        #imgProg
        {
            z-index: 1;
            left: 589px;
            top: 278px;
            position: absolute;
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        Shibashish mohanty</h1>
    <div id="shibashish" style="background-color: Blue; color: White;">
        Click To View Shibashish page</div>
    <div id="NewPage" style="background-color: Green; color: White;">
        Click to view another page</div>
    <div id="data_middle">
        <img id="imgProg" alt="Progress" class="centered" src="images1/progressbar.gif" />
    </div>
    </form>
</body>
</html>

Thanks Shibashish Mohanty



No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty