masukan email anda:

artikel baru langsung masuk ke email anda, GRATIS!

Membuat kolom Form field Progress Bar

Labels:

tipsyournet muncul lagi dengan tutorial yang lebih inovasi, sekarang Apa sih makdsudnya judul "Form field Progress Bar?" sekarang anda baca perlahan- lahan artikan kata perkata tersebut, sudah kah? intinya adalah kolom untuk menulis text dan ada Bar untuk mengetahui text yang anda tulis sudah mencapai batas maxmimal belum,, Liat Contoh

Itulah yang saya maksud :) nah ini banyak fungsinya, jika tipyourners membuat form untuk pengunjung dan anda berkehendak membatasi seberapa panjangnya text, maka tipsyourners bisa menggunakan widget ini,
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 ke

1. 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
Postingan Terkait Lainnya :


Related post | Widget by Tipsyournet.blogspot.com
.Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan atau Mau dapet tips2 lain yang lebih seru & orang lain belum tahu.

Masukan alamat email anda:

GRATIS!

3 comments:
gravatar
Andi said...
7/02/2010  

Salam Blogger ! Koran Blogger mampir nich mau ngajak tukar link dengan link artikelnya!

gravatar
Andi said...
7/02/2010  

Nich link Koran Blogger nya!
http://mang-andi.blogspot.com

gravatar
sherlina halim said...
10/15/2015  

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

Post a Comment