| Autor | Zpráva | ||
|---|---|---|---|
| Jack06 Profil |
#1 · Zasláno: 15. 11. 2009, 16:03:57
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 |
#2 · Zasláno: 17. 11. 2009, 12:12:06
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 |
#3 · Zasláno: 18. 11. 2009, 18:02:45
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 |
#4 · Zasláno: 18. 11. 2009, 20:00:27 · Upravil/a: fajzen
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 |
#5 · Zasláno: 20. 11. 2009, 13:06:00
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 |
#6 · Zasláno: 20. 11. 2009, 14:53:53
Jack06:
aha, to s tým zaokrúhľovaním som si neuvedomil, ok :) |
||
|
Časová prodleva: 3 roky
|
|||
| 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;
|
||
|
Časová prodleva: 12 let
|
|||
0