Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Making filter links work whether filtered items are offscreen or onscreen

Hi

I installed an Isotope-enhanced Wordpress theme (Organic Showcase) and I have set up a child theme of it. I have a request regarding customizing its "filterable portfolio" list page. You can see the theme, and that page in particular, demoed here: http://organicthemes.com/demo/showcase/filterable-portfolio/

As you can see, there are filter links (powered by Isotope – http://isotope.metafizzy.co) at the top of the right column. I need to move those filter links OFF the top, onto the left column.

So the left column will appear on EVERY page, and will look like the structure seen in this PNG:

Left Nav Structure

Clicking "Portfolio" should load the Filterable Portfolio list page with All portfolio items displayed, via the Isotope magic. (That is – similar to what happens now if you click Portfolios>Filterable Portfolio, but without filter links appearing at the top, since they're now already in the left column.)

Clicking any other Portfolio Filter Link (Animation, Design, Illustration or Photography) should either:

  • A) [If user's already on Portfolio list page] - don't reload Portfolio list page; but rearrange the right-column Portfolio item summaries so that only those matching the given tag appear, or

  • B) [If NOT on Portfolio list page] - load the Portfolio list page, showing only those Portfolio item summaries matching the given tag.

I've got A working. But I'm stuck on B... How can I format the links in the left column so they make B work without breaking A? What's the most elegant way to accomplish this – preferably using the same links and format for both A and B?

Thanks

Sean

User Gravatar

savage

Posted Nov 12 2013 2:02 UTC

$10


  • isotope
    multiple filter
    wordpress
  • 878 Views

3 Replies


the fast-n-dirty way to do this, is when clicking on protfolio to check if the portfolio container exists on the page

something like

JQuery("#portfolio_link").on('click', function(){
    if ($('.porfolio_container').length){
      // potfolio exists, so just apply the isotope filter
    }
    else{
      // portfolio isn't here, so go that page, eithe with an ajax call, or with window.location
    }
});
User Gravatar

guyisra

Posted Nov 12 2013 3:40 UTC

Thanks but rats... I don't quite follow.. in particular I don't understand the ELSE directive.

User Gravatar

savage

Posted Nov 12 2013 12:23 UTC

In JavaScript, you can tell the browser to go to a URL by doing

window.location = URL

So in your case you need to set it to the URL of where the portfolio page is

User Gravatar

guyisra

Posted Nov 12 2013 12:26 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions