javascript - Fade effect does not work (Bootstrap 4) -
i've managed add alphabetical filter on index page. code gets inspired bootsnip here: https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category. bootsnip based on bootstrap 3.3
my index page based on bootstrap 4 beta.
is there reason why there no fade effect when click on letter filter albums?
update:
i have updated code according answer below. i'm using bootstrap cards i'm still stuck animations when apply filter: no fade or smooth effect...
here new fiddle: https://jsfiddle.net/md8fkm0d/5/
$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { $('.filter').show('1000'); } else { $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); if ($(".filter-button").removeclass("active")) { $(this).removeclass("active"); } $(this).addclass("active"); }); body { font-family: arial; font-size: 14pt; font-weight: bold; color: #cc6110; background-color: #e3e0ce; /* nenesse 8/17/2017: new color */ background-image: url(images/background-woodenfloor.jpg); /* nenesse 8/16/2017: new background image */ } .title { font-size : 24pt; font-weight: bold; color: #cc6110; /* nenesse 8/16/2017: new color */ } img { border: 0; } { font-size: 14pt; color: #285e80; /* nenesse 8/16/2017: new color instead of #ffffff */ text-decoration: none; } a:hover { text-decoration: underline; color: #cc6110; } a:hover img#thumbimage { text-decoration: none; } .artist { /* nenesse 8/16/2017: new class different color */ color: #285e80; font-size:12pt; font-weight:bold; } .album { /* nenesse 8/16/2017: new class different color */ color: #cc6110; font-size:10pt; font-weight:bold; } .navigationline { padding: 2px 0px; } .btn-info { background-color: #285e80; border-color: #cc6110; } .btn-info:hover { background-color: #cc6110; border-color: #285e80; } .filter-button { font-size: 18px; border: 1px solid #cc6110; border-radius: 5px; text-align: center; color: #cc6110; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #cc6110; border-radius: 5px; text-align: center; color: #ffffff; background-color: #285e80; } .btn-default:active .filter-button:active { background-color: #285e80; color: white; } .card { margin-top: 30px; } <head> <meta charset="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <title>album list</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/y6pd6fv/vv2hjna6t+vslu6fwyxjcftcephbnj0lyafsxtsjbbfadjzaleqsn6m" crossorigin="anonymous"></link> <link rel="stylesheet" type="text/css" href="enhanced exportindex_wood.css"></link> <meta http-equiv="cache-control" content="no-cache"/> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center"> <h1 class="title">album list</h1> </div> </div> <div align="center"> <button class="btn btn-default filter-button" data-filter="all">all</button> <button class="btn btn-default filter-button" data-filter="lettera">a</button> <button class="btn btn-default filter-button" data-filter="letterb">b</button> <button class="btn btn-default filter-button" data-filter="letterc">c</button> <button class="btn btn-default filter-button" data-filter="letterd">d</button> <button class="btn btn-default filter-button" data-filter="lettere">e</button> <button class="btn btn-default filter-button" data-filter="letterf">f</button> <button class="btn btn-default filter-button" data-filter="letterg">g</button> <button class="btn btn-default filter-button" data-filter="letterh">h</button> <button class="btn btn-default filter-button" data-filter="letteri">i</button> <button class="btn btn-default filter-button" data-filter="letterj">j</button> <button class="btn btn-default filter-button" data-filter="letterk">k</button> <button class="btn btn-default filter-button" data-filter="letterl">l</button> <button class="btn btn-default filter-button" data-filter="letterm">m</button> <button class="btn btn-default filter-button" data-filter="lettern">n</button> <button class="btn btn-default filter-button" data-filter="lettero">o</button> <button class="btn btn-default filter-button" data-filter="letterp">p</button> <button class="btn btn-default filter-button" data-filter="letterq">q</button> <button class="btn btn-default filter-button" data-filter="letterr">r</button> <button class="btn btn-default filter-button" data-filter="letters">s</button> <button class="btn btn-default filter-button" data-filter="lettert">t</button> <button class="btn btn-default filter-button" data-filter="letteru">u</button> <button class="btn btn-default filter-button" data-filter="letterv">v</button> <button class="btn btn-default filter-button" data-filter="letterw">w</button> <button class="btn btn-default filter-button" data-filter="letterx">x</button> <button class="btn btn-default filter-button" data-filter="lettery">y</button> <button class="btn btn-default filter-button" data-filter="letterz">z</button> </div> </div> <hr/> <div class="row"> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterb"> <a href="details/8660.html"> <img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="image afrikan basement - unreleased extended versions - disc 1"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">bolla</h4> <p class="card-text text-center album">afrikan basement - unreleased extended versions - disc 1</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterb"> <a href="details/8666.html"> <img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="image afrikan basement - unreleased extended versions - disc 2"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">bolla</h4> <p class="card-text text-center album">afrikan basement - unreleased extended versions - disc 2</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterj letterd"> <a href="details/8881.html"> <img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="image journey rotterdam"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">jephté guillaume | diephuis</h4> <p class="card-text text-center album">a journey rotterdam</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterl"> <a href="details/412.html"> <img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="image la home box - disc 4"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">laurent garnier</h4> <p class="card-text text-center album">la home box - disc 4</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterl lettert letterb"> <a href="details/376.html"> <img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="image la home box - disc 3"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">laurent garnier | traumer | bambounou</h4> <p class="card-text text-center album">la home box - disc 3</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterl lettert letterh"> <a href="details/447.html"> <img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="image la home box - disc 5"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">laurent garnier | traumer | husbands</h4> <p class="card-text text-center album">la home box - disc 5</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterl letteru letterm"> <a href="details/305.html"> <img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="image la home box - disc 1"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">laurent garnier | uner | marc romboy</h4> <p class="card-text text-center album">la home box - disc 1</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterl letterv letterc"> <a href="details/341.html"> <img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="image la home box - disc 2"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">laurent garnier | voiski | copy paste soul</h4> <p class="card-text text-center album">la home box - disc 2</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterm"> <a href="details/10344.html"> <img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="image dj-kicks - disc 1"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">moodymann</h4> <p class="card-text text-center album">dj-kicks - disc 1</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterm"> <a href="details/10307.html"> <img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="image dj-kicks - disc 2"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">moodymann</h4> <p class="card-text text-center album">dj-kicks - disc 2</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterm"> <a href="details/10124.html"> <img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="image dj-kicks - disc 3"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">moodymann</h4> <p class="card-text text-center album">dj-kicks - disc 3</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letters letterl lettera letterr"> <a href="details/8897.html"> <img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="image hagagatan remixed"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">svreca | lucy | alexey volkov | rødhåd</h4> <p class="card-text text-center album">hagagatan remixed</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert"> <a href="details/10673.html"> <img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="image north star / silent space"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">tale of us</h4> <p class="card-text text-center album">north star / silent space</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert"> <a href="details/8820.html"> <img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="image goddess of new dawn"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">the bayara citizens</h4> <p class="card-text text-center album">goddess of new dawn</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert"> <a href="details/8719.html"> <img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="image mofo congoietric"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">the bayara citizens</h4> <p class="card-text text-center album">mofo congoietric</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert"> <a href="details/9074.html"> <img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="image girl , chameleon - disc 1"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">the exaltics</h4> <p class="card-text text-center album">the girl , chameleon - disc 1</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert"> <a href="details/9033.html"> <img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="image girl , chameleon - disc 2"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">the exaltics</h4> <p class="card-text text-center album">the girl , chameleon - disc 2</p> </div> </div> <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter lettert letterj"> <a href="details/8777.html"> <img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="image joaquin joe claussell mixes"/> </a> <div class="card-block"> <h4 class="card-title text-center artist">the lower east side pipes | joe claussell</h4> <p class="card-text text-center album">joaquin joe claussell mixes</p> </div> </div> </div> <div class="row"> <br/> <div class="value col-xs-6 col-sm-6 col-md-6" align="left">18/09/2017 00:18:40</div> <div class="value col-xs-6 col-sm-6 col-md-6" align="right">powered <a target="_blank" href="https://www.collectorz.com/music" title="music collector">music collector</a> & jhr enhanced details template</div> <br/> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script> <script src="indexfilter.js"></script> </body>thanks help.
i copyied code template used , smashed build. code looked pretty messy me changed it. of course can change design, if wish to. when pushing on 1 of buttons animations show intended , added more classes (so if have authors "laurent garnier | traumer | bambounou" can find them either clicking "l", "g", "t" or "b").
can find new .html on my webpage.
remark: not know why card-elements of bootstrap violate grid-system. figure out ;) 1 solution add overflow-x: hidden; white-space: nowrap; body in <style> tag in header, cut off text in card-elements...
if can download .html [windows, firefox] right-clicking , "save page name..."
Comments
Post a Comment