modificare progress bar

[matmilan]

ciao a tutti,
Utilizzo il codice sottostante per visualizzare la progress bar durante l'upload solo che quella di default è un po "bruttina":

var xmlHttp;

var TimoutID;

var strSessionID;

var IsChrome; // chrome requires special treatment

function GetXmlObject()
{
	try
	{  
		// Firefox, Opera 8.0+, Safari  
		xmlHttp = new XMLHttpRequest();
	}
	catch (e)
	{  
		// Internet Explorer  
		try
		{    
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{    
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      
		}
	}

	return xmlHttp;
}

function stateChanged() 
{ 
	if (xmlHttp.readyState == 4)
	{ 	
		// Empty response means we are finished.
		if( xmlHttp.responseText == "" )
		{
			document.getElementById('txtProgress').innerHTML = "";
			clearTimeout(TimoutID);
			TimoutID = setTimeout( 'Update()', 1000); // Firefox seems to need this.
			return;
		}

		var Xml = xmlHttp.responseXML;

		var PercentComplete		= Xml.getElementsByTagName('PercentComplete')[0].firstChild.nodeValue;
		var RemainingTime		= Xml.getElementsByTagName('RemainingTime')[0].firstChild.nodeValue;
		var TransferSpeed		= Xml.getElementsByTagName('TransferSpeed')[0].firstChild.nodeValue;
		var TotalBytes			= Xml.getElementsByTagName('TotalBytes')[0].firstChild.nodeValue;
		var UploadedBytes		= Xml.getElementsByTagName('UploadedBytes')[0].firstChild.nodeValue;

		var strFormat = "<table><tr><td colspan=2><table style=\"width: 220; border: 1pt black solid\"><tr><td>" +
						"<table background=progress.gif height=19 width=\"" + PercentComplete + "%\"><tr><td></td></tr></table>" +
						"</td></tr></table></td></tr><tr style=\"font:family: arial; font-size: 10pt;\">";

		strFormat += "<td>" +
			RemainingTime + " left (at " + 
			TransferSpeed + ")</td><td align=right>" + 
			UploadedBytes + "/" + 
			TotalBytes + "(" + 
			PercentComplete + "%) </td></tr></table>";



		document.getElementById('txtProgress').innerHTML = strFormat;
		
		// schedule next update in 1 sec.
		clearTimeout(TimoutID);
		TimoutID = setTimeout( 'Update()', 1000);		
	}
}


function OnStop() 
{ 	
	if( navigator.appName == "Microsoft Internet Explorer" )
	{
		document.execCommand('Stop');
	}
	else
	{
		window.stop();
	}

	document.getElementById('txtProgress').innerHTML = "Stopped";

	clearTimeout(TimoutID);
}


function ShowProgress( strPID )
{
	xmlHttp = GetXmlObject();
	if( xmlHttp == null )
	{
		alert( 'Your browser does not support AJAX!');
		return;
	} 
	
	xmlHttp.onreadystatechange = stateChanged;

	// Chrome and Safari require false instead of true in xmlHttp.Open
	IsChrome = navigator.userAgent.indexOf('Chrome') >= 0 || navigator.userAgent.indexOf('Safari') >= 0;

	strSessionID = strPID
	
	Update();
}


function Update()
{
	// Chrome and Safari require false instead of true in xmlHttp.Open

	xmlHttp.open('GET','progress_ajax_update.asp?pid=' + strSessionID, !IsChrome );
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.send(null);
}

Mentre il suo HTML è così:

<div id="txtProgress">
(poi qui dentro ci pensa javascript)
</div>

A me piacerebbe sostituire SOLO la progress bar blu con il codice sottostante (ovviamente lasciando il testo sotto la progress bar, per esempio il tempo rimanente oppure i mb che si stanno caricando)

<div id="txtProgress">
<div id="avanzamento"></div>
</div>

#txtProgress {
    background-image: url("progressbarbg.png");
    border-radius: 3px 3px 3px 3px;
    height: 22px;
    width: 413px;
}


#avanzamento {
    background-image: url("progressbar.gif");
    background-position: left center;
    background-repeat: repeat-x;
    border-radius: 3px 3px 3px 3px;
    height: 22px;
}

[cavicchiandrea]

Da una lettura veloce dovrai intervenire var strFormat facendo le modifiche in linea

[matmilan]

Potete chiudere ci sono riuscito da solo