Mencari Error pada Javascript dengan Firebug

 Debugging Javascript Error Dengan Firebug

Firebug adalah ekstensi untuk Firefox (sekarang include langsung pada Firefox dan Google Chrome) yang berisi sekelompok alat diagnostik agar dapat membantu kita dalam meningkatkan desain web baik secara HTML, CSS , dan JavaScript.

Melihat Error dengan Firebug
Firebug memberikan cara yang lebih mudah dan lebih berguna untuk melihat kesalahan dengan built-in console. Dengan Firebug, ketika kita memuat halaman web dengan error pada JavaScript, kita akan melihat sebuah counter di kanan atas dengan jumlah daftar kesalahan yang ditemukan. Klik ikon Firebug untuk membuka console Firebug, yang berisi daftar setiap error JavaScript. Error yang terdaftar di console Firebug hanya berisi daftar error untuk halaman yang sedang dilihat.

 

Dari gambar diatas kita bisa mengira-ira dimana letak kesalahan penulisan script kita. Terima Kasih Atas Kunjunganya dan Semoga Bermanfaat

Read More

jQuery Untuk Membatasi Angka Pada Input Tidak Lebih Dari 100

Cara Pertama kita dapat menggunakan type number seperti pada HTML5.

<input id="numberbox" type='number' max='100'>

 script diatas hanya mendeteksi nilai yang dimasukkan lebih dari 100. Tidak berjalan pada browser yang belum support HTML5.

Alternatif lainnya menggunakan patern:

<input type='text' maxlength='2' pattern='^[0-9]$'>

Tapi masih kurang akurat karena maksimal masih 99 saja.

 

Sedangkan jika dengan jQuery Untuk Membatasi Angka Pada Input Tidak Lebih Dari 100 sebagai berikut:

$('#numberbox').keyup(function(){
  if ($(this).val() > 100){
    alert("Maksimal 100");
    $(this).val('100');
  }
});

Selalu gunakan validasi back-end(PHP) untuk hasil yang maksimal
Terima Kasih Atas Kunjunganya.

Read More

Mencetak atau Print Div Content dengan Javascript

Kali ini saya akan memberikan contoh script tentang mencetak/print div content dengan javascript, biasanya script ini saya gunakan untuk mencetak laporan, detail tabel, dll. Berikut adalah contoh scriptnya:

Javascriptnya;
function printDiv(elementId) {
    var a = document.getElementById('printing-css').value;
    var b = document.getElementById(elementId).innerHTML;
    window.frames["print_frame"].document.title = document.title;
    window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

HTMLnya:

<div id="print-area-1" class="print-area">
    <div style="text-align:right;"><a class="no-print" href="javascript:printDiv('print-area-1');">Print</a></div>
    <ul>
        <li>This is an example list 1</li>
        <li>This is an example list 2</li>
        <li>This is an example list 3</li>
        <li>This is an example list 4</li>
    </ul>

    <ol>
        <li>This is an example list 1</li>
        <li>This is an example list 2</li>
        <li>This is an example list 3</li>
        <li>This is an example list 4</li>
    </ol>
</div>

<textarea id="printing-css" style="display:none;">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font:normal normal .8125em/1.4 Arial,Sans-Serif;background-color:white;color:#333}strong,b{font-weight:bold}cite,em,i{font-style:italic}a{text-decoration:none}a:hover{text-decoration:underline}a img{border:none}abbr,acronym{border-bottom:1px dotted;cursor:help}sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%}sub{top:.4em}small{font-size:86%}kbd{font-size:80%;border:1px solid #999;padding:2px 5px;border-bottom-width:2px;border-radius:3px}mark{background-color:#ffce00;color:black}p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0}hr{height:1px;border:none;background-color:#666}h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:normal;margin:1.5em 0 0}h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}ol,ul,dl{margin-left:3em}ol{list-style:decimal outside}ul{list-style:disc outside}li{margin:.5em 0}dt{font-weight:bold}dd{margin:0 0 .5em 2em}input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline}textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}pre,code{font-family:"Courier New",Courier,Monospace;color:inherit}pre{white-space:pre;word-wrap:normal;overflow:auto}blockquote{margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding-left:1em;font-style:italic}table[border="1"] th,table[border="1"] td,table[border="1"] caption{border:1px solid;padding:.5em 1em;text-align:left;vertical-align:top}th{font-weight:bold}table[border="1"] caption{border:none;font-style:italic}.no-print{display:none}</textarea>
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>

Contohnya

Jika link Print klik maka akan muncul previewnya.

Demo script diatas dapat dilihat di sini http://jsfiddle.net/g7SdL
isi dari textarea printing-css hanya bersifat opsional jadi kita bisa mengganti sesuai kebutuhan.

Read More

Contoh jQuery simple confirm()

Contoh pemakaian javascript confirm() pada jquery:
button:
<input type=\"button\" id=\"btndel\" class=\"delete\" value=\"Delete\" name=\"delete\" alt=\"aku\"> 
jquery script:

<script>
$(document).ready(function(){

$(".delete").click(function(){

    var nama = $(this).attr('alt').toUpperCase();

    var x = confirm("Menghapus User " + nama)

    if(x){

     alert("Lanjutkan")

    }

})

})

</script>

Jika pada confirm box dijawab yes maka akan ada alert "Lanjutkan"

contoh hasil Simple Confirm

Read More