//-----------------------------------------START------------------------------------------// /* =================================================================== NAME: Progress Bar TYPE: DHTML Progress Bar VERSION: 1.07.07.9 CREATED ON: 7/9/07 AUTHOR: Dean Dal Bozzo, dean@pagefx.com =================================================================== DESIGNED FOR: DESCRIPTION: Creates a DTHTML pop-up simulated progress bar. NOTES: Uses alpha transparent png images. These type of png images are not supported by older browsers. USAGE: ATTRIBUTES: pbTitle OPTIONAL string, if set to 'off' will not display, default is 'Progress'. pbStatus OPTIONAL string, if set to 'off' will not display, default is 'Status % completed'. pbStatusArray OPTIONAL array pbRedirectURL OPTIONAL string, if set to 'off' will not display, default is 'http://pagefx.com'. pbBgClr OPTIONAL string hex color value, default is '#00c'. pbButton OPTIONAL string, if set to 'off' will not display, default is 'Cancel'. OUTPUT: EXAMPLES: UPDATES: =================================================================== */ var gSpeed = 100; var gNum = 0; var gTimer = null; var gButton = ''; var gImg_Dir = '0Images/' var gImg_ProgessBar = gImg_Dir + 'aqua12.png'; // Define Default variables var gDfltTitle = 'Progress'; var gDfltStatus = 'Status '; var gDfltURL = 'http://pagefx.com'; var gDfltBgClr = '#00c'; var gDfltBut = 'Cancel'; // Define UD variables var pbTitle = ''; var pbStatus = ''; var pbStatusArray = ''; var pbRedirectURL = ''; var pbBgClr = ''; var pbButton = ''; //--[Check and set User Defined variables]----------------------------------// function initProgessBar(){ // pbTitle if(pbTitle.length == 0){ pbTitle = gDfltTitle; }else if (pbTitle.toLowerCase() == 'off'){ pbTitle = ''; } // pbStatus if(pbStatus.length == 0){ pbStatus = gDfltStatus; }else if (pbStatus.toLowerCase() == 'off'){ pbStatus = ''; } // pbRedirectURL if(pbRedirectURL.length == 0){ pbRedirectURL = gDfltURL; }else if (pbRedirectURL.toLowerCase() == 'off'){ pbRedirectURL = ''; } // pbBgClr if(pbBgClr.length == 0){ pbBgClr = gDfltBgClr; } // pbButton if(pbButton.length == 0){ pbButton = gDfltBut; }else if (pbButton.toLowerCase() == 'off'){ pbButton = ''; } if(pbButton.length != 0){ gButton = ['BUTTON', {style:'position:absolute;bottom:8px;right:8px;', ref:'cancel', onclick:cancelBar},pbButton]; }else{ gButton = ''; } } function runProgressBar(){ // Check staus of progress bar if(gNum < 100){ // Update progress bar gNum++; dbObj.progessBar.style.width = gNum +'%'; // Check if we have a pbStatus text to display if(pbStatus.length > 0 ){ // Check if we have an array for the pbStatus text. if(pbStatusArray.length > 0){ if(gNum < pbStatusArray.length){ npbStatus = pbStatus + pbStatusArray[gNum]; // Check if array string is to long. if(npbStatus.length > 45){ // To long. Shorten array string npbStatus = npbStatus.substr(0,42) + '...'; } // Display pbStatus with array string dbObj.progressStatus.innerHTML = npbStatus; } }else{ // No array just display pbStatus text with percentage completed dbObj.progressStatus.innerHTML = pbStatus + dbObj.progessBar.style.width + ' completed.'; } } gTimer = setTimeout('runProgressBar()',gSpeed); }else{ // Progress bar completed gNum = 0; clearTimeout(gTimer); // Check if we are using a redirect link if(pbRedirectURL != ''){ window.location.href = pbRedirectURL; } } } function setProgressBar(){ dbObj.progessBar.style.width = '0%'; dbObj.progessBar.style.backgroundColor = pbBgClr; // Center Progress Bar in window winPos = getCenterTopLeft(300,100); dbObj.DialogBox.style.top = winPos.top; dbObj.DialogBox.style.left = winPos.left; dbObj.DialogBox.style.display = 'block'; runProgressBar(); } function cancelBar(){ clearTimeout(gTimer); gNum = 0; dbObj.DialogBox.style.display = 'none'; } //--[Calculates top, left postions to center item on screen]----------------------------// var ie = document.all; var ns6 = document.getElementById && !document.all; function ieBody(){ return (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; } function getCenterTopLeft(w,h){ w = w || 0; h = h || 0; w = parseInt(w); h = parseInt(h); var winWidth = ie && !window.opera ? ieBody().clientWidth : window.innerWidth; var winHeight = ie && !window.opera ? ieBody().clientHeight : window.innerHeight; var areaW = winWidth; var areaH = winHeight; var t = Math.floor((areaH / 2) - (h / 2)); var l = Math.floor((areaW / 2) - (w / 2)); return {top:t, left:l}; } //------------------------------------------------------------------------------// var dbObj = null; cE.cache = {}; function createProgressBar(){ if(dbObj) return; initProgessBar(); dbObj = $DOM( ['DIV', {style:'width: 300px; height: 100px; border: 1px solid #000; position:absolute;font-family:tahoma,verdana,sans-serif;font-size:10px;', ref:'DialogBox'}, ['DIV', {style:'position:relative; width: 298px; height: 98px; border: solid 1px; border-top-color: #f5f5f5; border-right-color: #666; border-bottom-color: #666; border-left-color: #f5f5f5; background-color: #ccc;'}, ['DIV', {style:'position:absolute;top:8px;left:10px;color:#000;', ref:'pdpbTitle'},pbTitle], ['DIV', {style:'position:absolute;top:25px;left:10px; width:275px; height: 14px; border: solid 2px; border-top-color: #666; border-right-color: #f5f5f5; border-bottom-color: #f5f5f5; border-left-color: #666;', ref:''}, ['DIV', {style:'position:absolute;top:0px;left:0px; width:273px; height: 12px; border: solid 1px #333; background: #ccc url(' + gImg_ProgessBar + ') repeat-x;', ref:'progessBarBg'}, ['DIV', {style:'position:absolute;top:0px;left:0px; width:0%; height: 12px; background: #f00 url(' + gImg_ProgessBar + ') repeat-x;', ref:'progessBar'},]]], ['DIV', {style:'position:absolute;top:47px;left:10px;color:#000;', ref:'progressStatus'},pbStatus], gButton, ] ] ); document.body.appendChild(dbObj.DialogBox); dbObj.DialogBox.style.display = 'none'; } function showProgressBar(){ dbObj.DialogBox.style.display = 'block'; setProgressBar(); } //------------------------------------------------------------------------------// function cE(){ var A = arguments; if(!cE.cache[A[0]]) cE.cache[A[0]]=document.createElement(A[0]); return cE.cache[A[0]].cloneNode(false); } function $DOM(A){ var aL = A.length, node, child, ref={}, bRef=false; if(aL >= 1){ node = cE(A[0]); if(aL >= 2){ for(var arg in A[1]){ if(arg.indexOf('on') == 0){ node[arg] = A[1][arg]; }else if(arg == 'ref'){ ref[A[1][arg]] = node; ref['DOM'] = node; bRef = true; }else{ if(arg == 'style'){ node.style.cssText = A[1][arg]; } else if(arg.toLowerCase() == 'classname'){ node.style.className = A[1][arg]; } else { node.setAttribute(arg, A[1][arg]); } } } } for(var i=2; i < aL; i++){ if(typeof(A[i]) == 'string'){ node.appendChild(document.createTextNode(A[i])); }else{ child = $DOM(A[i]); if(child.DOM){ bRef = true; for(n in child){ if(n=='DOM'){ node.appendChild(child[n]); }else{ ref[n] = child[n]; } } ref['DOM'] = node; }else{ node.appendChild(child); } } } return bRef?ref:node; } return null; } //------------------------------------------END-------------------------------------------//