Menghitung Jumlah text Karakter dengan Jquery

Saat kita menginput sebuah text yang panjang mungkin perlu suatu batasan jumlah text agar data yang di input tidak terlalu banyak sehingga dapat ditampilkan sesuai kebutuhan yang ada. mungkin salah satu contoh adalah twitter kita hanya bisa membuat postingan twett hanya 140 karakter text saja jadi saat melebihi batas yang ditentukan maka tombol submit twett tidak bisa diklik twett tersebut. saya memiliki tutorial simple cara menghitung jumlah karakter dengan jquery mungkin ini bisa membantu anda untuk mengerjakan sebuah project. Berikut tutorialnya.

1. Buat lah sebuah file index.html lalu ketikan script berikut, disini saya menggunkan bootstrap.

<div class="form-group">    
 <div class="col-md-12">
  <textarea class="message form-control" rows="5" cols="30" ></textarea>
  <span class="countdown"></span>
  <button type="submit" class="btn_cut btn" id="update">
   Update
  </button>
 </div>
</div>  

2. Tambahkan script Jquery seperti berikut.

$(document).ready(function ($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

});

function updateCountdownAll() {
    $('.message').each(function () {
        updateCountdown(this);
    });
}

function updateCountdown(e) {

    var currentElement;
    if (e.target) {
        currentElement = e.target;
    } else {
        currentElement = e;
    }

    var maxLengh = 50;
    var remaining = maxLengh - $(currentElement).val().length;
    $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'black');
 if (remaining == 0 ){
  $('.countdown:first').hide();
  $(':input[type="submit"]').removeAttr("disabled");
 }else if(remaining < 0){
  $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'red').show();
  $(':input[type="submit"]').prop('disabled', true);  
 }else{
  $(currentElement).nextAll('.countdown:first').text(remaining).css('color', 'black').show();
 }
} 

3. Jangan lupa include file jquery nya secara offline atau online dengan CDN. 

4. Jika sudah jalan kan jika berhasil tampilan nya akan seperti ini.

Cukup mudahkan proses nya anda bisa menggunakan script ini untuk berbagai kebutuhan anda seperti membuat sebuah pesan, membuat sebuah komentar atau hal lainnya. semoga bermanfaat.


Demo

Cara Copy text dengan clipboard.js

Sekarang saya akan membuat tutorial cara copy text dengan menggunkan plugins jquery clipboard.js. plugins ini sudah umum digunakan oleh website-website lain, dengan proses copy text yang sangat simple tampa harus memblock text yang akan di copy hanya cukup menekan tombol copy maka text akan otomatis tercopy lalu tinggal di paste. plugins ini dibuat oleh Zeno Rocha dengan Licensi MIT jadi anda bisa menggunakan untuk web komersil anda. untuk lebih lanjut berikut tutorialnya.

1. Download plugin  Clipboard.js disini atau melalui github.

2. Extract plugin  Clipboard.js pada folder project anda.

4. Buatlah link extension untuk memanggil Clipboard.js untuk nama folder sesuai selera masing-masing.  

<script type="text/javascript" src="assets/plugins/clipboardjs/clipboard.js"></script>    
<script type="text/javascript" src="assets/js/jquery-2.2.3.min.js"></script> 

5. Buat lah sebuah input text yang akan kita copy, seperti contoh dibawah ini

<div class="input-group input-group-md">
   <input id="foo" class="form-control" value="https://cahbagusnongkrong.blogspot.co.id/">
   <span class="input-group-btn">
      <button class="btn_copy btn" data-clipboard-target="#foo">
         <i class="fa fa-clipboard" aria-hidden="true"></i>
      </button>
  </span>
</div>

6. Lalu tambahkan script Jquery seperti berikut.

$('.btn_copy').tooltip({
  trigger: 'click',
  placement: 'bottom'
});
function setTooltip(message) {
  $('.btn_copy').tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}
function hideTooltip() {
  setTimeout(function() {
    $('.btn_copy').tooltip('hide');
  }, 2000);
}
var clipboard = new Clipboard('.btn_copy');
clipboard.on('success', function(e) {
  setTooltip('Copied!');
  hideTooltip();
});
clipboard.on('error', function(e) {
  setTooltip('Failed!');
  hideTooltip();
});

7. Jika sudah kita jalankan jika berhasil maka hasil nya seperti ini .


8. Jika anda ingin membuat cut text anda bisa menambahkan script berikut.

<textarea id="bar" rows="5">Isi dengan text anda</textarea><br/>
<button class="btn_copy btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut data text</button>

Bagaimana mudahkan cara mengimplementasikannya, anda tidak perlu menekan ctrl + C lagi pada keyboard anda, cukup tekan klik lalu paste. sekian tutorial dari saya semoga bermanfaat.

Demo

Mempercantik Alert JavaScript dengan Sweet Alert

Saat anda membangun sebuah project untuk client pasti anda pernah membuat sebuah notifikasi peringatan dengan menggunakan javascript maupun jquery secara default untuk memberikan informasi bahwa terjadi suatu kesalahan, peringatan ataupun perintah lainnya, cara paling mudah yang sering dilakukan adalah  dengan menuliskan script alert('Terjadi kesalahan ..!'); dari segi tampilan ya standar saja namun terkadang tiap browser berbeda untuk hasilnya, jika anda terbiasa menggunakan Bootstrap mungkin akan sedikit lebih menarik dengan menampilkan modal sebagai notifikasi peringatan. tetapi pada tutorial ini saya akang menggunakan plugin SweetAlert2 untuk menampilkan pesan peringatan agar lebih interaktif dengan user. untuk lebih lanjut berikut tutorialnya.

1. Download SweetAlert2 Plugin

2.  Extract plugin SweetAlert ke folder project kalian.

3. Buatlah scritp seperti berikut.

<html>
<head>
<title>Page Loading</title>
   <link rel="stylesheet" href="sweetalert2.min.css" />
   <script src="jquery-2.2.3.min.js"></script>
   <script src="sweetalert2.min.js"></script>
</head>
<body>
 <button type="button" id="alert1">Alert 1</button>
 <button type="button" id="alert2">Alert 2</button>
 <button type="button" id="alert3">Alert 3</button>
 <button type="button" id="alert4">Alert 4</button>
 <button type="button" id="alert5">Alert 5</button>
 <button type="button" id="alert6">Alert 6</button>
</body>
</html>

3. Lalu buat lah config untuk tampilan alert nya.

$('#alert1').click(function() {
 swal('Hello saya menggunakan SweetAlert plugin js')
});

$('#alert2').click(function() {
 swal(
   'Apa itu SweetAlert?',
   'Sebuah plugin js untuk merpercantik Notifikasi Alert',
   'question'
 ) 
}); 

$('#alert3').click(function() {
 swal(
   'Good job!',
   'Pilihan anda benar!',
   'success'
 ) 
}); 

$('#alert4').click(function() {
 swal({
   title: 'Automotasi Exit Alert!',
   text: 'Saya akan close setelah 2 detik.',
   timer: 2000
 }).then(
   function () {},
   function (dismiss) {
  if (dismiss === 'timer') {
    console.log('I was closed by the timer')
  }
   }
 ) 
}); 

$('#alert5').click(function() {
 swal({
   title: 'HTML example',
   type: 'info',
   html:
  'Anda bisa menggunakan Tag HTML seperti bold text, ' +
  'links ' +
  'dan HTML Tag lainnya',
   showCloseButton: true,
   showCancelButton: true,
   confirmButtonText:
  ' Great!',
   cancelButtonText:
  ''
 }) 
}); 

$('#alert6').click(function() {
 swal({
   title: 'Apakah anda yakin?',
   text: "Anda akan keluar dari Form ini!",
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Yes ',
   cancelButtonText: 'No',
   confirmButtonClass: 'btn btn-success',
   cancelButtonClass: 'btn btn-danger',
   buttonsStyling: false
 }).then(function () {
   swal(
  'Logout!',
  'Anda telah berhasil logout.',
  'success'
   )
 }, function (dismiss) {
   if (dismiss === 'cancel') {
  swal(
    'Cancelled',
    'Anda tidak dapat logout :)',
    'error'
  )
   }
 })
}); 

5. Jika sudah coba jalankan dan hasilnya akan seperti berikut.

Cukup mudah bukan prosesnya dan hasilnya pun menarik perhatian. untuk lebih jelasnya anda bisa lihat diweb resminya Sweet alert2 anda bisa gunakan plugin ini sesuai kebutuhan anda karena plugin ini berlisensi MIT License anda bisa menggunakan untuk web komersil anda.

Demo


Semoga Bermanfaat

Membuat Load Page Progrres Bar pada web dengan PACE JS

Saat kita masuk kedalam page baru atau biasanya saat kita login dan masuk ke halaman dashboard maka akan memerlukan waktu untuk meload agar tampil secara full, nah saat proses itu agar lebih bagus maka kita perlu menambahkan sebuah plugin Progress bar agar kelihatan menarik. banyak tutorial bagaimana cara menggunaka progress bar saat load page, namun di tutorial saya kali ini saya akang menggunakan plugin PACE , plugin ini sudah cukup umum digunakan pada web, dan penggunaanya pun cukup mudah, agar lebih Jelas berikut tutorialnya.

1. Kunjungi plugin PACE.js Disini.

2. Download PACE.JS atau Disini.

3. Pilih Tema dan Warna Tema sesuai selera anda lalu download ditutorial ini saya pake Flash.

4. Buat sebuah file sebagai contoh, lalu sisipkan PACE.js beserta tema nya

<!DOCTYPE html>

<html>
<head>
<title>Page Loading</title>
   <link rel="stylesheet" href="dataurl.css" />
   <script src="pace.min.js"></script>
</head>
<body>
   <h1>Ini Contoh Page Loading dengan PACE.JS</h1>
   <p>Hello World.</p>
</body>
</html>

5. Jika sudah save lalu jalan kan jika berhasil maka progrees bar akan tampil diatas seperti gambar dibawah ini.

Anda bisa mengimplementasikan ini untuk project anda biasanya digunakan saat login menuju dashboard namun anda bisa menkreasikan sendiri.


Demo

Semoga Bermanfaat.