Here i'm going to give you an tutorial about select option dropdown filter using Jquery with isotope.js. Before i have written on article about that isotope.js. that is portfolio style sorting with some animation effect now in dropdown select option tag. lets see the code.
Most of them searching the script for this kind of dropdown filter sorting.. i hope this will be really helpful everyone. i have just altered few code in the previous post portfolio style sorting with some animation effect.
SCRIPTS AND CSS
<link href="css/style.css" rel="stylesheet" media="all" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/filters.js"></script> <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
HTML CODE
<div class="portfolio-container" id="portfolio-container"> <div class="portfolio all-sort css"> <a href="http://www.2my4edge.com/2014/01/how-to-make-fixed-background-image-for.html"> <div class="portfolio-thumb"> <img src="images/1.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery php"> <a href="http://www.2my4edge.com/2014/04/web-camera-using-snapjs-jquery.html"> <div class="portfolio-thumb"> <img src="images/2.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery Javascript"> <a href=""> <div class="portfolio-thumb"> <img src="images/3.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Javascript css"> <a href=""> <div class="portfolio-thumb"> <img src="images/4.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Javascript php"> <a href=""> <div class="portfolio-thumb"> <img src="images/5.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort css"> <a href=""> <div class="portfolio-thumb"> <img src="images/6.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery PHP"> <a href=""> <div class="portfolio-thumb"> <img src="images/7.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery Javascript"> <a href=""> <div class="portfolio-thumb"> <img src="images/8.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery html"> <a href=""> <div class="portfolio-thumb"> <img src="images/9.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery css"> <a href=""> <div class="portfolio-thumb"> <img src="images/10.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort PHP database css html"> <a href=""> <div class="portfolio-thumb"> <img src="images/11.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery PHP database"> <a href="http://www.2my4edge.com/2013/11/dynamic-data-table-using-datatable.html"> <div class="portfolio-thumb"> <img src="images/12.png" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort css php database"> <a href="http://www.2my4edge.com/2013/10/image-zoom-on-hover-using-css3.html"> <div class="portfolio-thumb"> <img src="images/13.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort Jquery css Jquery"> <a href="http://www.2my4edge.com/2013/08/resize-font-using-query.htm"> <div class="portfolio-thumb"> <img src="images/14.gif" alt="" title=""> </div> </a> </div> <div class="portfolio all-sort PHP database css"> <a href=""> <div class="portfolio-thumb"> <img src="images/15.png" alt="" title=""> </div> </a> </div> </div>
SELECT OPTION DROPDOWN LIST
<div class="sorting-container"> <h4> Filter : </h4> <select class="form-control" id="selectFieldscript"> <option value="all-sort">All Script</option> <option value="Javascript">Javascript</option> <option value="Jquery">Jquery</option> </select> <select class="form-control" id="selectFielddynamic"> <option value="all-sort">All dynamic</option> <option value="PHP">PHP</option> <option value="database">database</option> </select> <select class="form-control" id="selectFieldcode"> <option value="all-sort">All design</option> <option value="html">html</option> <option value="css">css</option> </select> </div>
FILTERS.JS
; (function(){ jQuery('document').ready(function() { function filter_portfolio() { var script = jQuery('#selectFieldscript').val(); var dynamic = jQuery('#selectFielddynamic').val(); var code = jQuery('#selectFieldcode').val(); var target = ''; if(script != 'all-sort') { target += '.' + script; } if(dynamic != 'all-sort') { target += '.' + dynamic; } if(code != 'all-sort') { target += '.' + code; } if(target == '') target = '.all-sort'; var $items_container = jQuery("#portfolio-container"); $items_container.isotope({ itemSelector : ".portfolio", layoutMode: "masonry", filter: target }); } jQuery('#selectFieldscript, #selectFielddynamic, #selectFieldcode').on('change', function() { filter_portfolio(); }); }); })();
I hope this post will be really helpful to you.. Keep visiting for more post. Thank you.
RELATED POSTS :
Portfolio Design and sorting with Animation Effect
Get support with foreign and regional language in php and mysql
Export the MySQL database table as CSV format using PHP
Animated scroll to top by using Jquery
Google Doodles style animation using Jquery
Simple animated moving background images using CSS3 with Keyframes
Animated background Color changer using Jquery UI
Drag and Drop Concept using Jquery
Full screen API using JQuery
RELATED POSTS :
Portfolio Design and sorting with Animation Effect
Get support with foreign and regional language in php and mysql
Export the MySQL database table as CSV format using PHP
Animated scroll to top by using Jquery
Google Doodles style animation using Jquery
Simple animated moving background images using CSS3 with Keyframes
Animated background Color changer using Jquery UI
Drag and Drop Concept using Jquery
Full screen API using JQuery
Hi I have added all the files the filter works fine but they don't have any animation/transition can you please help.
ReplyDeletehy tell me how to clear all the filter on a click of button
ReplyDeletehey tell me how to clear all the apply filters on a button click?
ReplyDelete