[JavaScript][CSS][HTML]tekst w pasku postępu Opcje

[Mlodycompany]

Witam. Mam na stronie pasek postępu zrobiony w js a w nim jest informacja o pozostałym czasie. Otóż problem polega na tym, że gdy pasek jest odpowiednio szeroki wszystko jest tak jak powinno, ale gdy jest za mały to tekst przechodzi automatycznie do nowej linii i trochę to rozwala wygląd.

[HTML] pobierz, plaintext 
<span id="progress">
  <span id="prou"></span>
</span>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#prou{
	background-image: url('../img/1.gif'); 
	display: block;
	height: 15px; 
	width: 0px;
	padding: 5px 0px 5px 0px;
	overflow: visible;
	word-wrap: normal;
}
#progress{
	background-image: url('../img/2.gif'); 
	border-width: 2px;
	border-color: black;
	border-style: solid;
	display: block;
	width: 300px;
	overflow: visible;
}
[CSS] pobierz, plaintext 

Co proponujecie aby to zreperować?

[kamil4u]

Jaki tekst? W przykładzie takowego nie ma. Najlepiej daj przykład prawidłowego i nieprawidłowego kodu(możesz go pobrać np. poprzez firebug-a). Akurat obrazki tu nie mają znaczenia, ale daj w przykładzie normalne kolory( background-color: #color)

[Mlodycompany]

dam cała funkcje w js która zmienia szerokość i wstawia tekst

[HTML] pobierz, plaintext 
echo '
			<script>
				var czasRozp = '.$row['czas-rozp'].';
				var czasZak = '.$row['czas-zak'].';			
				var czasSzko = czasZak - czasRozp;
				var czas = '.time().';
				pasek();
				clearInterval(set)
				var set = setInterval(function(){ pasek() },1000);
				function pasek(){
					czas = czas + 1;
					if(czas > czasRozp){
					var width = 300;
					var prou = 0;
					$(\'#prou\').css(\'width\', prou);
					var pozostalo = czasZak - czas;
					var pro = pozostalo / czasSzko * 10000;
					pro = Math.floor(pro);
					pro = pro / 100;
					pro = 100 - pro;
					widthu = width * (pro / 100);
					widthu = Math.round(widthu);
					$(\'#prou\').css(\'width\', widthu);
					var czasZ = zamienSek(pozostalo);
					$(\'#prou\').html(Math.round(pro)+\'%(\'+czasZ+\')\');
					if(pozostalo <= 0){
						$(\'.kolejka\').load(\'load.php?func=konczSzkolenie&ids='.$row['id-szkolenia'].'\');	
						$(\'#szkolenia\').load(\'load.php?func=reloadSzkolenia\');			
						$(\'.right\').load(\'load.php?func=pokazWskazniki\');	
					}
					}
					else{
						$(\'#prou\').html(\'rozpoczynanie<img src="img/loading.gif" width="15">\');					
					}
				}
			</script>			
 
			<span id="progress"><span id="prou"></span></span>';	
[HTML] pobierz, plaintext 

Funkcja zamienSek() zamienia sekundy na coś takiego 0 dni, 0:00:00 czyli cały tekst wygląda np. 55% (0 dni, 0:05:35). Co rozumiesz poprzez kod prawidłowy i nie prawidłowy? Jak dla mnie jest on zawsze taki sam. Tu tylko w naszej wyobraźni zmienia się co sekundę szerokość paska i tekst który jest w nim(ale ma zawsze tyle samo znaków). Skoro tło obrazkowe nie ma znaczenia to nie będzie miało znaczenia tło jednolitego koloru. Sprawdziłem w praktyce z kolorami i bez zmian.

Ten post edytował Mlodycompany 28.09.2010, 05:48:50