Autor Zpráva
Jack06
Profil
Dobré odpoledne sesmolil jsem takovýto kód s knihovnou jquery, bohužel mi nějaké věci nešli a tak se chci zeptat, zda by se a jak dal lépe upravit tento js:

Jde mi o nějaké přechod barvy z červené (málo znaků) do zelené ( dostatečně znaků ) jak v progresbaru, tak v ukázce kolik písmen je v textu

js:
var str;
var maxChars = 250; var maxWidth;

function counted(str) { var orginal = str.length; return  orginal; }

function progresbar (str) {
  var len = str.length;
  maxWidth = parseInt(document.getElementById('progres_main').clientWidth, 10);
  var newWidth = maxWidth/maxChars*len;
  if (newWidth > maxWidth) newWidth = maxWidth;
  var procento = Math.round((len/maxChars*100)-0.4)+'%';
  $("#progres_bar").css({width: newWidth+'px'});
  $("#progres_val").html(procento);
}

function countChars(){

   var theForm = document.getElementById('keywords');

   if ($("#counter").html() > 250 ) { alert('Nelze vložit více, než '+maxChars+' znaků'); $("#text").val(theForm.text.value.substr(0,maxChars));
   } else if ($("#counter").html() > 240) { $("#counter").css({color: "#00C000"});
   } else if ($("#counter").html() > 200) { $("#counter").css({color: "#40C000"});
   } else if ($("#counter").html() > 120) { $("#counter").css({color: "#809000"});
   } else if ($("#counter").html() > 50)  { $("#counter").css({color: "#B05000"});
   } else if ($("#counter").html() > 20)  { $("#counter").css({color: "#D03000"});
   } else { $("#counter").css({color: "#F00000"});  }
   $("#counter").html(counted(theForm.text.value)); progresbar ($("#text").val());
}


html:
<form action="" id="keywords">
<div id="progres_main"> <div id="progres_bar"></div>
<div id="counter"></div><div id="progres_val">0%</div>
</div>
<br><textarea name="text" id="text" cols="50" rows="10" onkeyup="javascript:countChars();"></textarea><br>
<input type="submit" value="Ukázat" class="submit">
</form>
fajzen
Profil
Dobrý deň,
nenapísali ste, v čom presne je chyba, ale predpokladám, že sa vám nezobrazuje progressbar... ak je to tak, je to preto, lebo elementu s id progres_bar treba nastaviť height a background-color, inak sa zobrazuje ako dlhý pás s nulovou výškou a farbou pozadia, takže nie je vidieť...

ďalej som v kóde našiel niekoľko chýb:
1. vo funkcií countChars() musí byť prvá podmienka >= 250, inak to povolí aj 251 znakov, pretože counteru sa zvyšuje číslo až úplne nakoniec
2. nejak sa mi nepozdáva výpočet newWidth, správne by malo byť len / maxChars * maxWidth, potom je aj následná kontrola, či je newWidth väčšie ako maxWidth zbytočná
3. taktiež nechápem, čo robí vo výpočte percenta to -0.4, ale predpokladám, že to súvisí s bodom 1, takže po aplikovaní mnou navrhovanej zmeny to bude treba odstrániť
Jack06
Profil
fajzen:

Kód mi funguje, ale mám ho napsanej pro jquery jen napůl.. pro jquery by se to dalo asi zrealizovat lépe ten kód.

trochu jsem to s tvojí pomocí ještě upravil:
var str;
var maxChars = 250; var maxWidth;

function progresbar (w) {
  maxWidth = parseInt(document.getElementById('progres_main').clientWidth, 10);
  var newWidth = w/maxChars*maxWidth;
  var procento = Math.round(w/maxChars*100)+'%';
  $("#progres_bar").css({width: newWidth+'px'});
  $("#progres_val").html(procento);
}

function countChars(){

   var theForm = document.getElementById('new_website');

   if ($("#counter").html() >= 250 ) { alert('Nelze vložit více, než '+maxChars+' znaků'); theForm.webdesc.value = theForm.webdesc.value.substr(0,maxChars);
   } else if ($("#counter").html() >= 225) { $("#counter").css({color: "#00C000"});
   } else if ($("#counter").html() >= 200) { $("#counter").css({color: "#40C000"});
   } else if ($("#counter").html() >= 150) { $("#counter").css({color: "#809000"});
   } else if ($("#counter").html() >= 100)  { $("#counter").css({color: "#B05000"});
   } else if ($("#counter").html() >= 50)  { $("#counter").css({color: "#D03000"});
   } else { $("#counter").css({color: "#F00000"});  }
   $("#counter").html(theForm.webdesc.value.length); progresbar (theForm.webdesc.value.length);
}
fajzen
Profil
Jack06:
pro jquery by se to dalo asi zrealizovat lépe ten kód.

No, dovolil som si to trošku upraviť, aby to bolo viac v duchu jQuery :)

<script>
var maxChars = 250;
var maxWidth;
var minWidth = 5;

$().ready(function() {
  maxWidth = $('#progres_main').innerWidth() - minWidth;

  $('#text').keyup(function() {
    var len = $(this).val().length;

	if(len > maxChars) {
		$(this).val(
			$(this).val().substr(0, maxChars)
		);

		alert('Nelze vložit více, než '+ maxChars + ' znaků');

		len = maxChars;
	}

	var percent = len / maxChars;
	var color = 'rgb(' + Math.round((1 - percent) * 255) + ', ' + Math.round(percent * 255) + ', 0)';

    $('#progres_bar').css({
		'background-color': color,
		'width': Math.round(minWidth + percent * maxWidth)
	});
	$('#counter').css('color', color).text(len);
	$('#progres_val').text(Math.round(percent * 100) + '%');
  }).keyup(); // inicializácia
});
</script>

<form action="" id="keywords">
<div id="progres_main"> <div id="progres_bar" style="height:10px;"></div>
<div id="counter"></div><div id="progres_val"></div>
</div>
<br><textarea name="text" id="text" cols="50" rows="10"></textarea><br>
<input type="submit" value="Ukázat" class="submit">
</form>


bude to hádzať dosť zaujímavé farby... možno by sa s tým dalo ešte nejak pohrať, ale lepší plne automatický spôsob ma nenapadol a svoj účel to splní: pri prázdnom poli červená, pri plnom zelená :)
Jack06
Profil
fajzen:

Jej ne.. je to fakt výborné :-) jinak těch -0.4 jsem tam měl kvůli tomu že to zaokrouhluje a 100% je ještě před těmi 250 znaky :-)
fajzen
Profil
Jack06:

aha, to s tým zaokrúhľovaním som si neuvedomil, ok :)
vecerapl
Profil
Zajímal by mě řádek určující barvu z červené na zelenou:
var color = 'rgb(' + Math.round((1 - percent) * 255) + ', ' + Math.round(percent * 255) + ', 0)';

Jak by vypadal tento řádek, pokud bych to chtěl změnit ze zelené na červenou? Jde mě o ten poslední script zde uvedený od fajzen.
Joker
Profil
vecerapl:
Jak by vypadal tento řádek, pokud bych to chtěl změnit ze zelené na červenou?
Prohodit Math.round((1 - percent) * 255) a Math.round(percent * 255)

Oprava: Zkopíroval jsem moc velký kus kódu.
vecerapl
Profil
Moc děkuji Joker.
Ještě bych potřeboval script CSS upravit na maximální šířku v pixelech, kdy jak člověk bude psát, tak ten maxwidth pokud si ho nastavím na řekněme 300, tj. 300px, tak aby se ten progress_bar vykresloval právě v tom rozmezí maximálně 300 pixelů.

Hraji si s tím scriptem, ale pořád nemůžu přijít na správnou kombinaci rovnice :( u toho 'width': Math.round(minWidth + percent * maxWidth)
$('#progres_bar').css({
        'background-color': color,
        'width': Math.round(minWidth + percent * maxWidth)
    });

OPRAVA: Stačil odstranit řádek maxWidth = $('#progres_main').innerWidth() - minWidth;

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: