Add a URL link into an isotope filter

I have my filter set up like this

<ul class="filters filter-portfolio">
                <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-collateral">Collateral</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-enviromental">Environmental</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="150" data-filter=".filter-identity">Identity</a></li>
                <li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="600" data-filter=".filter-illustration">Illustration</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="900" data-filter=".filter-motion">Motion</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1050" data-filter=".filter-packaging">Packaging</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="450" data-filter=".filter-web">Web</a></li>
            </ul>

and when I click on "logos" I dont want to filter to logos I just want it to go to the url

You can view the page here : http://turnpost.turnpostinteractive.com/all-work/

Here is the javascript

function initIsotope() {
    // Init Portfolio masonry
    var $container = $('.portfolio-container');
    $container.isotope({
        resizable: false,
        masonry: {
            columnWidth: 1
        }
    });
    $(document).on("click", ".filter-portfolio a", function(e) {
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');


        var selector = $(this).attr('data-filter');
        $('.portfolio-container').isotope({
            filter: selector,
            masonry: {
                columnWidth: 1
            }
        }, function() {
            // Refresh waypoints
            $.waypoints('refresh');
        });

        return false;
    });


    // Init Portfolio masonry
    $('.entries-container').isotope({
        itemSelector : '.blog-entry'
    });
}

function reLayoutIsotope() {
    $('.isotope').isotope( 'reLayout' );
}

Tried this and still no go

javascript

        $(document).on("click", ".filter-portfolio a", function(e) {
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');
        $('.noclick').off('click');

html

                <ul class="filters filter-portfolio">
                <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-collateral">Collateral</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-enviromental">Environmental</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="150" data-filter=".filter-identity">Identity</a></li>
                <li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="noclick animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="600" data-filter=".filter-illustration">Illustration</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="900" data-filter=".filter-motion">Motion</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1050" data-filter=".filter-packaging">Packaging</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="450" data-filter=".filter-web">Web</a></li>
            </ul>

Answers


I'll take a stab at this and guess that you have a some UI javascript that turns this into a menu. It is probably overriding the href. What I'd try to do is remove the click event for the 5th anchor link.

$(".filter-portfolio li").not(':nth-child(5)').find('a').click(function(e){

   .....

});

http://jsfiddle.net/FYQV4/

another way to accomplish this is to add a selector class to the 5th element:

<li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="noclick animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>

and then below your other javascript click event, add: ` $('.noclick').off('click');

http://jsfiddle.net/FYQV4/1/


Need Your Help

How to modify ASP MVC default view name associated to a controller action method?

asp.net-mvc asp.net-mvc-4 razor

I would like to modify the ASP MVC default view name associated to a controller action method.

Encoding with HttpClient in .NET 4.5

c# .net unicode encoding dotnet-httpclient

I'm consuming some data using the fogbugz XML API. This API always offers data as UTF-8.