Membuat Pilih Filter Otomatis ( Auto Select Filter )

Mas Caypul    Tips dan Trik   

Also Read

Membuat Auto Pilih Filter - Auto select filter adalah dimana kita bisa memilih filter dengan otomatis dari campuran menjadi tersusun secara rapi.

Lalu apakah anda ingin tahu bagaimana cara membuatnya? kode ini saya dapat dari Arlina Design. Semuanya tahu dia kan? pembuat template dan penyedia tips dan trik layaknya kompi ajaib, kang ismet, mbak dian, mas sugeng dan masih banyak lagi.

BERIKUT CARA MEMBUATNYA

1. Letakkan kode HTML dibawah diatas kode </body>

 <div id="filters">
    
    <select>
        <option value="*">All</option>
        <option value=".red">Red</option>
        <option value=".green">Green</option>
        <option value=".blue">Blue</option>
        <option value=".yellow">Yellow</option>        
    </select>    
</div>

<div id="container">
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
</div> 

2. Letakkan kode CSS dibawah diatas kode </b:skin>

 body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid transparent;
    padding: 3px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.red {
    background: #ff5656;
}

.blue {
    background: #07ACEC;
}

.green {
    background: #4caf4c;
}

.yellow {
    background: #efef70;
}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}
 

Terakhir anda simpan kode Javascript dibawah diatas kode </head>

 $(function() {

    var $container = $('#container'),
        $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
;
        $container.isotope({
            filter: filters
        });
    });

}); 

DEMO

Nah bagaimana sekarang anda ingin mencobanya bukan? jika masih kurang bekerja kode ini work atau tidak, anda bisa mencobanya dulu di blog uji coba atau di jsfidle.

source code : http://twistedshape.blogspot.com/