Code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.bartitle {
left:10px;top:24px;color:#000000;font-Size:18px;
}
.bartxt {
position:relative;top:2px;width:55px;height:15px;color:#ffffff;font-Size:12px;text-Align:center;
}
.bartxtblack {
position:relative;top:2px;width:55px;height:15px;color:#000000;font-Size:12px;text-Align:center;
}
.stdline {
top:22px;height:24px;border-Left:solid #000000 1px;
}
.tstline {
top:22px;height:24px;border-Left:solid #ff0000 1px;
}
.stdlinetxt {
top:10px;width:55px;height:15px;color:#000000;font-Size:10px;text-Align:center;
}
.tstlinetxt {
top:10px;width:55px;height:15px;color:#ff0000;font-Size:10px;text-Align:center;
}
.today {
top:12px;width:1px;height:33px;background-Color:#339900;
}
.todaytxt {
top:0px;width:55px;height:15px;color:#339900;font-Size:10px;text-Align:center;
}
.monthline {
top:25px;height:26px;border-Left:solid #660099 1px;
}
.monthtxt {
top:50px;width:25px;height:15px;color:#660099;font-Size:10px;text-Align:center;
}
.weekline {
top:25px;height:30px;border-Left:solid #CCFFFF 1px;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Bar (17-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/
var Ary=[]
// 0 1 2 3 4 5
Ary[0]=['2008/02/10','My Bar','bartitle','stdline','stdlinetxt'];
Ary[1]=['2008/04/10','red' ,'Bar 1' ,'bartxt' ,'stdline','stdlinetxt'];
Ary[2]=['2008/10/10','blue' ,'Bar 2' ,'bartxt' ,'tstline','tstlinetxt'];
Ary[3]=['2009/01/10','yellow' ,'Bar 2' ,'bartxtblack' ,'tstline','tstlinetxt'];
// ** Initialised by an event call to function
// zxcTimeBar('tst',Ary,['today','todaytxt','monthline','monthtxt','weekline'],'mmm/dd/yyyy',490);
// where:
// parameter 0 = the unique id name of the parent DIV. (string)
// parameter 1 = an array defining bar dates color and text. (array)
// each field of the array is an array:
// field[0][0] the start date(format yyyy/mm/dd). (string)
// field[0][1] (optional) the bar title. (string)
// field[0][2] (optional) the class name of the bar title. (string)
// field[0][3] (optional) the 'start' line class name. (string)
// field[0][4] (optional) the 'start date' class name. (string)
// field[n][0] the end date of the bar(format yyyy/mm/dd). (string)
// field[n][1] the color of the bar. (string)
// field[n][2] (optional)the bar text. (string)
// field[n][3] (optional) the 'bar text' class name. (string)
// field[n][4] (optional) the 'standard' line class name. (string)
// field[n][5] (optional) the 'line date' class name. (string)
// parameter 2 = an array defining the class names of the elements. (array)
// field[0] (optional) the 'today' line class name. (string)
// field[1] (optional) the 'today' text class name. (string)
// field[2] (optional) the 'month' line class name. (string)
// field[3] (optional) the 'month' text class name. (string)
// field[4] (optional) the 'week' line class name. (string)
// parameter 3 = the date 'mm/dd/yyy' or 'dd/mm/yyyy', use 'mmm' for alph months. (boolean)
// parameter 4 = (optional) the maximum width of the bars. (dights, default = the width or the bars parent node)
// ** Functional Code(3.94) - NO NEED TO CHANGE
var zxcMonths=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function zxcTimeBar(id,barary,clsary,fmt,width){
var bar=document.getElementById(id);
var par=bar.parentNode;
var barlft=zxcSVInt(bar,'left'),now=new Date(),day=1000*60*60*24,txt,line;
var ff=fmt.charAt&&fmt.charAt(0)=='d'?false:true,sep=fmt.replace(/\w/g,'');
var sep=sep.substring(0,Math.ceil(sep.length/2))||'/';
if (barary[0][1]&&barary[0][2]){ // bar title
txt=zxcES('DIV',{position:'absolute'},par,barary[0][1]);
txt.className=barary[0][2];
}
var ary=[];
for (var z0=0;z0<barary.length;z0++){
var s=barary[z0][0].split(/\W+/g);
ary[z0]=[new Date(s[0],s[1]-1,s[2],0,0,0,0)];
ary[z0][1]=(ary[z0][0].getTime()-ary[0][0].getTime())/1000/60/60/24;
if (fmt.indexOf('mmm')>-1) s[ff?1:2]=zxcMonths[s[ff?1:2]-1];
ary[z0][2]=s;
}
var dw=(width?width:zxcSVInt(bar,'width'))/ary[z0-1][1];
if (clsary[0]){ // today line
line=zxcES('DIV',{position:'absolute',zIndex:'2',left:barlft+((now-ary[0][0])/day)*dw+'px'},par);
line.className=clsary[0];
}
if (clsary[1]){ // today date
txt=[now.getFullYear(),now.getMonth(),now.getDate()];
txt[1]=fmt.indexOf('mmm')>-1?zxcMonths[txt[1]]:txt[1]+1;
txt=zxcES('DIV',{position:'absolute',zIndex:'2'},par,txt[ff?1:2]+sep+txt[ff?2:1]+sep+txt[0]);
txt.className=clsary[1];
zxcES(txt,{left:barlft+((now-ary[0][0])/day)*dw-zxcSVInt(txt,'width')/2+'px'});
}
if (barary[0][3]){ // start line
line=zxcES('DIV',{position:'absolute',zIndex:'4',left:barlft+'px'},par);
line.className=barary[0][3];
}
if (barary[0][4]){ // start line date
txt=zxcES('DIV',{position:'absolute',zIndex:'5',left:barlft+'px'},par,ary[0][2][ff?1:2]+sep+ary[0][2][ff?2:1]+sep+ary[0][2][0]);
txt.className=barary[0][4];
zxcES(txt,{left:barlft-zxcSVInt(txt,'width')/2+'px'});
}
for (var lft=0,z1=1;z1<ary.length;z1++){
// bar item
var item=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:'0',left:lft+'px',top:'0px',width:ary[z1][1]*dw-lft+'px',height:zxcSVInt(bar,'height')+'px',backgroundColor:barary[z1][1],textAlign:'center'},bar);
if (barary[z1][3]){ // bar item text
txt=zxcES('DIV',{},item,barary[z1][2]||'');
txt.className=barary[z1][3];
}
var lft=ary[z1][1]*dw;
if (barary[z1][4]){ // bar item line
line=zxcES('DIV',{position:'absolute',zIndex:'4',left:barlft+lft+'px'},par);
line.className=barary[z1][4];
}
if (barary[z1][5]){ // bar item line date
txt=zxcES('DIV',{position:'absolute',zIndex:'5'},par,ary[z1][2][ff?1:2]+sep+ary[z1][2][ff?2:1]+sep+ary[z1][2][0]);
txt.className=barary[z1][5];
zxcES(txt,{left:barlft+lft-zxcSVInt(txt,'width')/2+'px'});
}
}
for (var srt=ary[0][0],days=(ary[z0-1][0]-srt)/day,z2=0;z2<days;z2++){
var date=new Date(srt.getFullYear(),srt.getMonth(),srt.getDate()+z2,0,0,0,0);
if (clsary[2]&&date.getDate()==1){ // month line
line=zxcES('DIV',{position:'absolute',zIndex:'2',left:barlft+z2*dw+'px'},par);
line.className=clsary[2];
}
if (clsary[3]&&date.getDate()==1){ // month text
var month=date.getMonth();
txt=(fmt.indexOf('mmm')>-1)?zxcMonths[month]:month+1>9?month+1:'0'+(month+1);
txt=zxcES('DIV',{position:'absolute',zIndex:'3'},par,txt+(month>0?'':' '+date.getFullYear()));
txt.className=clsary[3];
zxcES(txt,{left:barlft+z2*dw-zxcSVInt(txt,'width')/2+'px'});
}
if (clsary[4]&&date.getDay()==0){ // week line
line=zxcES('DIV',{position:'absolute',zIndex:'1',left:barlft+z2*dw+'px'},par);
line.className=clsary[4];
}
}
}
function zxcSVInt(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}
function zxcES(ele,style,p,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (p) p.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}
/*]]>*/
</script></head>
<body onload="zxcTimeBar('tst',Ary,['today','todaytxt','monthline','monthtxt','weekline'],'mmm/dd/yyyy',490);" >
<br />
<div style="position:absolute;left:50px;top:50px;width:620px;height:150px;background-Color:#FFFFCC;border:solid black 1px;" >
<div id="tst" style="position:relative;overflow:hidden;left:80px;top:25px;width:500px;height:20px;background-Color:#FFCC66;border:solid black 1px;" >
the bars parent node
</div>
</div>
</body>
</html>
Complex Progress Bar design in JavaScript. Need Help
Reply With Quote
Bookmarks