Hello Everyone,
I'm using Jquery progress bar. I want to show the progress bar for the time durtion which I'll assign to get from the hiddenfield value. Can you please look into my issue.
The aspx page which is shared displays the progress bar from 0-100% static, but i need to display the progress bar for the time defined by the <asp:HiddenField > value.
Suppose if I assigned the <asp:HiddenField > Value=30 the progress bar runs for the 30 mins time duration.
Thanks in advance.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="v3_dash.aspx.cs" Inherits="v3_dash" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>--%>
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Custom Label</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function () {
var myHidden = document.getElementById('<%=Hidden1.ClientID%>').value; //I want to show for 30 Mins
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function () {
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function () {
progressLabel.text("Complete!");
}
});
function progress() {
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", val + 1);
if (val < 99) {
setTimeout(progress, 100);
}
}
setTimeout(progress, 0);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="progressbar"><div class="progress-label">Loading...</div></div>
<div class="demo-description">
<asp:HiddenField ID="Hidden1" Value="30" runat="server" />
</form>
</div>
</body>
</html>
