javascript - How to link to portfolio page with a specific filter? -
i'm playing portfolio section in page looks this:
$(function() { var selectedclass = ""; $(".fil-cat").click(function() { selectedclass = $(this).attr("data-rel"); $("#portfolio").fadeto(100, 0.1); $("#portfolio div").not("." + selectedclass).fadeout().removeclass('scale-anm'); settimeout(function() { $("." + selectedclass).fadein().addclass('scale-anm'); $("#portfolio").fadeto(300, 1); }, 300); }); });body { max-width: 900px; float: none; margin: auto; } #portfolio { margin: 1rem 0; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; -webkit-column-width: 33.33333333333333%; -moz-column-width: 33.33333333333333%; column-width: 33.33333333333333%; } .tile { -webkit-transform: scale(0); transform: scale(0); -webkit-transition: 350ms ease; transition: 350ms ease; } .tile:hover {} .scale-anm { transform: scale(1); } p { padding: 10px; border-bottom: 1px #ccc dotted; text-decoration: none; font-family: lato; text-transform: uppercase; font-size: 12px; color: #333; display: block; float: left; } p:hover { cursor: pointer; background: #333; color: #eee; } .tile img { max-width: 100%; width: 100%; height: auto; margin-bottom: 1rem; } .btn { font-family: lato; font-size: 1rem; font-weight: normal; text-decoration: none; cursor: pointer; display: inline-block; line-height: normal; padding: .5rem 1rem; margin: 0; height: auto; border: 1px solid; vertical-align: middle; -webkit-appearance: none; color: #555; background-color: rgba(0, 0, 0, 0); } .btn:hover { text-decoration: none; } .btn:focus { outline: none; border-color: var(--darken-2); box-shadow: 0 0 0 3px var(--darken-3); } ::-moz-focus-inner { border: 0; padding: 0; }<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://npmcdn.com/basscss@8.0.0/css/basscss.min.css" rel="stylesheet" /> <div class="toolbar mb2 mt2"> <button class="btn fil-cat" href="" data-rel="all">all</button> <button class="btn fil-cat" data-rel="web">websites</button> <button class="btn fil-cat" data-rel="flyers">flyers</button> <button class="btn fil-cat" data-rel="bcards">business cards</button> </div> <div style="clear:both;"></div> <div id="portfolio"> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm bcards all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm flyers all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm bcards all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm flyers all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm flyers all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm bcards all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm bcards all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm web all"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97190&w=350&h=190" alt="" /> </div> <div class="tile scale-anm bcards all"> <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%c3%97290&w=200&h=290" alt="" /> </div> </div> <div style="clear:both;"></div>from different page have button link portfolio section. i'd have button (in different page) goes portfolio, filtering element. example, page want take user straight "flyers" elements, don't have filter anything. possible? how can achieve this?
edited
after trying solution answer marked right noticed working 1 particular case, 1 working added, whenever change link /our-work#other-case page presented not filtered accordingly
$( document ).ready(function() { var hash = window.location.hash.substr(1); switch(hash){ case 'case-one': $(this).scrolltop(0); $('#case-one').click(); case 'working': $(this).scrolltop(0); $('#working').click(); case 'case-two': $(this).scrolltop(0); $('#case-two').click(); case 'case-three': $(this).scrolltop(0); $('#case-three').click(); case 'case-four': $(this).scrolltop(0); $('#case-four').click(); } });
here's 1 not elegant working method using js , html
specify anchor tag in link such yourwebsite.com/portfolio#flyers
then
$( document ).ready(function() { var hash = window.location.hash.substr(1); switch(hash){ case 'flyers': $('#flyersbuttonid').click(); ///..... case other filters } }); 
Comments
Post a Comment