Thursday, 10 January 2013

Process bar in jquery

<style type="text/css">
    #popupBoxClose
 {
    font-size:10px; 
    line-height:15px; 
    right:5px; 
    top:5px; 
    position:absolute; 
    color:#6fa5e2; 
    font-weight:500;     
}
#popup_box {
    display:none; /* Hide the DIV */
    position:fixed; 
    _position:absolute; /* hack for internet explorer 6 */ 
    height:auto;
    width:auto; 
    background:#FFFFFF; 
    left: 700px;
    top: 250px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px; 
   
    /* additional features, can be omitted */
    border:2px solid #999999;     
    padding:15px; 
    font-size:15px; 
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
  
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
 <script type="text/javascript">
         function LoadPage(page) {
             $(document).ready(function () {
                 $("#imgProg").hide();
                 $('#popup_box').hide();
                 $('#maindiv').load(page, function () {
                 });
             });
         }
       
       
         function y() {
             $("#imgProg").hide();
             $('#popup_box').hide();
         }
         function x() {
             $('#popup_box').slideDown("slow");
             $('#maindiv').empty();
             $("#imgProg").show();
             // window.setTimeout('LoadPage("AMS_UTest1.aspx")', 6000);
             window.setTimeout('y()', 6000);
           
         }
</script>

<body style=" background-color:#F5F6F7;">
    <form id="form1" runat="server">
    <div>
   <a href="#" onclick="x()" id="s">Press Me</a>
   </div>
    <div id="maindiv">
    </div>
       <div id="popup_box">
           
   <img alt="Progress" src="progressbar.gif" id="imgProg"   class="centered" />
     
        </div>
    </form>
</body>

No comments:

Post a Comment