Easyautocomplete – Contoh Membuat searching ajax

berikut adalah contoh untuk melakukan input dengan plugin jquery autocomplete. spesifikasi contoh adalah ketika memasukan huruf-huruf halaman akan mengirim request ker server php, dan php memproses query pencarian, kemudian merespon hasil sesuai dengan keyword pencarian.

bagian di head

 

<!-- easeautocomplete -->
 <link href="http://easyautocomplete.com/dist/easy-autocomplete.min.css" rel="stylesheet">
 <link href="http://easyautocomplete.com/dist/easy-autocomplete.themes.min.css" rel="stylesheet">
 < script src="http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js" >< /script >

form

<input id="pegawai_id" placeholder="" />
 <input id="pegawai_nama" class="form-control input-sm" style="width: 300px" />

jquery

var options = {
 url: function(phrase) {
 return "authorpegawaiajax.php";
 },
 getValue: function(element) {
 return element.nama_lengkap;
 },
 template: {
 type: "description",
 fields: {
 description: "pegawai_id"
 }
 },
 ajaxSettings: {
 dataType: "json",
 method: "POST",
 data: {
 dataType: "json"
 }
 },
 list: {
 onSelectItemEvent: function() {
 var selectedItemValue = $("#pegawai_nama").getSelectedItemData().pegawai_id;
 $("#pegawai_id").val(selectedItemValue).trigger("change");
 },
 onHideListEvent: function() {
 $("#pegawai_id").val("").trigger("change");
 }
 },
 preparePostData: function(data) {
 data.phrase = $("#pegawai_nama").val();
 return data;
 },
 theme: "plate-dark",
 requestDelay: 400
 };

$("#pegawai_nama").easyAutocomplete(options);

JQuery easyautocomplete

easyautocomplete

Pecinta jquery mungkin sudah familiar dengan plugin ini. easyautocomplete, dari namanya sudah terjabarkan easy auto complete, yang artinya mudah otomatis dan lengkap, kalo tidak salah. mudah untuk digunakan dalam pemasangan plugin jquery. yang berfungsi untuk membantu user dalam mengetik kata. kita ketik beberapa huruf otomatis akan muncul saran kata-kata yang mengandung huruf tersebut.

Lebih lengkapnya silahkan kunjungi http://easyautocomplete.com/.
dan untuk contoh-conthnya ada adi http://easyautocomplete.com/examples.

mudah-mudahan bermanfaat. wassalam.

jQuery Cycle Plugin Slide Show

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects

The jQuery Cycle Plugin adalah plugin tampilan slide yang mendukung berbagai jenis efek transisi.

Ada banyak plugin jquery untuk slide konten gambar atau div, salah satunya adalah jQuery Cycle. Saya bisa gunakan plugin ini untuk menganti-ganti konten atau dalam web saya. Caranya cukup mudah, untuk lebih lengkapnya silahkan kunjungi offisial website nya di http://jquery.malsup.com/cycle/.

Semoga bermanfaat wassalam.

 

Hitung Input Chekbox, Checked, dan Unchecked dengan JQuery

Berikut adalah kode jquery untuk menghitung jumlah input checkbox dengan berbagai statusnya

var numberOfChecked = $(‘input:checkbox:checked’).length;
var totalCheckboxes = $(‘input:checkbox’).length;
var numberNotChecked = totalCheckboxes – numberOfChecked;

atau lebih sederhana untuk mencari checkbox yang tidak checked

var numberNotChecked = $(‘input:checkbox:not(“:checked”)’).length;

Hitung cheklist checkbox dengan jquery

berikut adalah sample contoh jquery untuk hitung checlist checkbox.

$(document).ready(function(){

var $checkboxes = $('#input[type="checkbox"]');
 
 $checkboxes.change(function(){
 var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
 $('#count-checked-checkboxes').text(countCheckedCheckboxes);
 
 $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
 });

});

selamat mencoba, wassalam.

Kode CSS Untuk Modal Overlays Ketika Loading Proses

Modal Overlays di pergunakan untuk memblok layar sementara pada halaman web,
secara teknis layar modal ini berada pada posisi layer yang lainnya, dengan demikian layer-layer dibawahnya tidak bisa di akses. Mengapa ini di pakai, adalah memberi tahukan sedang ada proses kepada user, sehingga user dapat menunggu hingga proses yang berjalan selesai.

Bagaimana membuatnya … berikut adalah contoh kode untuk membuat modal overlays dengan menggunakan css dan jquery.

Kode CSS yang digunakan adalah sebagai berikut :

#loading-img {
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
height: 100%;
z-index: 20;
}

.overlay {
background: #e9e9e9;
display: hide;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

Kode JQuery yang digunakan adalah sebagai berikut :

$(“#button”).click(function () {
$(“.overlay”).show();
});
Dan, kode HTML yang digunakan adalah sebagai berikut :

<[remove_this]div class=”overlay”>
<[remove_this]div id=”loading-img”><[remove_this]/div>
<[remove_this]/div>

semoga bermanfaat, wassalam.

Membuka pdf online di website kita dengan menggunakan viewerjs

viewerjs

Ada berbagai cara agar file pdf yang ada pada sebuah website bisa di baca secara online tanpa mendownload terlebih dahulu. salah satu caranya adalah dengan menggunakan viewer js. yaitu sebuah plugin atau library javascript yang dibuat khusus untuk melakukan pembacaan file pdf salah satunya.  penggunaan nya cukup mudah. yaitu download telebih dahulu file zipnya di bawah ini.

http://www.4shared.com/zip/wCJOmIGYba/ViewerJS-latest.html

setelah di download, extract file zip. lalu copas ke web yang akan dibangun. kemudian cara penggunaannya adalah dengan memasangkan alamat file pdf di alamat viwerjs. seperti pada contoh ini.

http://website-endang.com/viewerjs/index.html#http://website-endang.com/uploads/file.pdf

cukup mudah, semoga bermanfaat. wassalam.

Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);