Membuat kolom Form field Progress Bar
Labels:
BLOG
caranya adalah:
1. Anda Masuk ke LAYOUT
2. Edit HTML
3. cari Kode <HEAD> dan masukan kode dibawah ini, berada dibawah kode <HEAD> ,
<style type="text/css"> .progress{ width: 1px; height: 14px; color: white; font-size: 12px; overflow: hidden; background-color: navy; padding-left: 5px; } </style> <script type="text/JavaScript"> /*********************************************** * Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/ * Modified by Dynamic Drive for minor changes * Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com * Please keep this notice intact ***********************************************/ function textCounter(field,counter,maxlimit,linecounter) { // text width// var fieldWidth = parseInt(field.offsetWidth); var charcnt = field.value.length; // trim the extra text if (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit); } else { // progress bar percentage var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ; document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limit: "+percentage+"%" // color correction on style from CCFFF -> CC0000 setcolor(document.getElementById(counter),percentage,"background-color"); } } function setcolor(obj,percentage,prop){ obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)"; } </script>
Jangan lupa disimpan.
kemudian tipsyourners pergi ke1. Layout- Page Element
2. Add HTML
3. Masukan Kode dibawah ini
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)" ></textarea><br /><div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>
yang berwarna merah silahkan anda bisa merubahnya sesuai keinginan.
silahkan disimpan, dan di cek.. sekian yang dapat disampaikan dari tipsyournet, silahkan bagi tipsyourners apabila ada pertanyaan segera klik Comment dibawah ini, dan baca tutorial lainnya
7/02/2010
Salam Blogger ! Koran Blogger mampir nich mau ngajak tukar link dengan link artikelnya!
7/02/2010
Nich link Koran Blogger nya!
http://mang-andi.blogspot.com
Post a Comment