Description:-
In this example we
explain that how to create window XP style progress bar in asp.net web page. Or create fully customized progress bar inasp.net web page.
Here we display XP style progress bar in webpage or same like as we shown in Gmail application when we are login in gmail at same time blue color progress bar are display for to process on home page. Here in this example we create same look and same functionality of the progress bar and displayed in asp.net web page.
Here we display XP style progress bar in webpage or same like as we shown in Gmail application when we are login in gmail at same time blue color progress bar are display for to process on home page. Here in this example we create same look and same functionality of the progress bar and displayed in asp.net web page.
Sorting Row data in gridview Gridview Sorting
How to handle Concurrency in Linq to Sql Concurrency Example
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="progrebar.aspx.cs" Inherits="progrebar" %>
<!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 id="Head1" runat="server">
<title>How to Create an XP style progress bar in
asp.net web page</title>
<script language="javascript" src="Scripts/xp_progress.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<br>
<br>
<br>
<script type="text/javascript">
function targetpage() {
bar3.togglePause()
window.location = "http://aspsolutionkirit.blogspot.in/"
}
var bar1 = createprogressbar(300, 20, 'white',
1, 'black', 'blue',
85, 7, 5, "targetpage()");
</script>
<br>
<br>
<br>
<script type="text/javascript">
function targetpage() {
bar3.togglePause()
window.location = "http://aspsolutionkirit.blogspot.in/"
}
var bar3 = createprogressbar(300, 20, 'white',
1, 'black', 'red',
85, 7, 5, "targetpage()");
</script>
<br>
<br>
<br>
visit
the aspsolutionkirit for asp.net programming
<br>
<a href="http://aspsolutionkirit.blogspot.in/">www.aspsolutionkirit.blogspot.in/</a>
</center>
</form>
</body>
</html>
xp_progress.js:-
var w3c =
(document.getElementById) ? true : false;
var ie = (document.all) ? true : false;
var N = -1;
function
createprogressbar(w, h, bgc, brdW, brdC, blkC, speed, blocks, count, action) {
if (ie || w3c) {
var t = '<div id="_xpbar' + (++N) + '" style="visibility:visible; position:relative;
overflow:hidden; width:' + w + 'px; height:' + h + 'px; background-color:' + bgc + '; border-color:' + brdC + '; border-width:' + brdW + 'px; border-style:solid;
font-size:1px;">';
t += '<span id="blocks' + N + '" style="left:-' + (h * 2 + 1) + 'px; position:absolute; font-size:1px">';
for (i = 0; i < blocks; i++) {
t += '<span style="background-color:' + blkC + '; left:-' +
((h * i) + i) + 'px; font-size:1px;
position:absolute; width:' +
h + 'px; height:' + h + 'px; '
t +=
(ie) ? 'filter:alpha(opacity=' + (100 - i * (100 / blocks)) + ')' : '-Moz-opacity:' + ((100 - i * (100 / blocks)) / 100);
t += '"></span>';
}
t += '</span></div>';
document.write(t);
var bA = (ie) ? document.all['blocks' +
N] : document.getElementById('blocks' + N);
bA.bar =
(ie) ? document.all['_xpbar' + N] : document.getElementById('_xpbar' + N);
bA.blocks =
blocks;
bA.N = N;
bA.w = w;
bA.h = h;
bA.speed =
speed;
bA.ctr = 0;
bA.count =
count;
bA.action =
action;
bA.togglePause = togglePause;
bA.showBar =
function () {
this.bar.style.visibility = "visible";
}
bA.hideBar =
function () {
this.bar.style.visibility = "hidden";
}
bA.tid =
setInterval('startBar(' + N + ')', speed);
return bA;
}
}
function
startBar(bn) {
var t = (ie) ? document.all['blocks' +
bn] : document.getElementById('blocks' + bn);
if (parseInt(t.style.left) + t.h + 1 - (t.blocks * t.h + t.blocks) >
t.w) {
t.style.left
= -(t.h * 2 + 1) + 'px';
t.ctr++;
if (t.ctr >= t.count) {
eval(t.action);
t.ctr =
0;
}
} else t.style.left = (parseInt(t.style.left) + t.h + 1) + 'px';
}
function
togglePause() {
if (this.tid == 0) {
this.tid = setInterval('startBar(' + this.N + ')', this.speed);
} else {
clearInterval(this.tid);
this.tid = 0;
}
}
function
togglePause() {
if (this.tid == 0) {
this.tid = setInterval('startBar(' + this.N + ')', this.speed);
} else {
clearInterval(this.tid);
this.tid = 0;
}
}
0 comments:
Post a Comment