Isotope Filter Errors / Troubleshooting - javascript

I'm a novice coder and working on a personal website and was really hoping to use the isotope filter function in the portfolio section of my site. I've been having trouble with it however and was wondering if anyone might be able to provide guidance? I'm not sure whether it's my html or jquery at this point. Very much appreciated!
Thank you,
Joanna
HTML:
<!--PORTFOLIO-->
<section id="portfolio-section" class="text-left">
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="portfolio">
<div class='container'>
<div class="page-header text-center wow fadeInDown" data-wow-delay="0.4s">
<h2>Portfolio</h2>
<h4>Increasing the accessibility & usefulness of data to decision-makers</h4>
</div>
</div>
<div class="portfolio_content_area">
<div class="portfolio_menu">
<center>
<ul id="filters">
<li class="active_prot_menu"><img src='images/data.png' height='13'> Data Visualisation & Reporting ▪ </li>
<li><img src='images/course.png' height='14'> Coursework ▪ </li>
<li><img src='images/art.png' height='14'> Artwork</li>
</ul>
</center></div>
<div class="portfolio_content" id="portfolio">
<div class='row' id="portfolio">
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/1-dv.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/tableau.html" target="_blank"><img src='images/data_white.png' height='17'><h1>LensShift</h1>
<p>Data visualisation of the depth and breadth of the LensShift Taxonomy.<br>By collaborating with my colleagues, I ensure the quality of data is appropriate for effective and creative visualisation.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/2-siobn.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/SIOBN_Michaelmas17-18_Impact_Report.pdf" target="_blank"><img src='images/data_white.png' height='17'><h1>SIOBN</h1>
<p>Monitoring & evaluating the Social Impact Oxford Business Network's (SIOBN) initiatives. Providing ongoing reporting to stakeholders on the relevance of activities.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/3-BSC.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/3-bsc.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Skoll Academy</h1>
<p>Strategic consulting project with Big Society Capital investigating social investment models to address domestic violence in the UK.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/4-EY.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/4-EY.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Leadership</h1>
<p>A case study on the motivation and integration of EY's GigNow workforce.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/5-MedData.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/5-MedData.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Global Health Challenge</h1>
<p>A case study on using MedData™ to lower the burden of chronic diseases.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="art">
<img src="images/6-insta.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="https://www.instagram.com/joannamakescards_/" target="_blank"><img src='images/art_white.png' height='22'><h1>Art</h1>
<p>Stationery, Design, Lettering</p></a></details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery:
$(window).load(function() {
$('.portfolio_menu ul li').click(function(){
$('.portfolio_menu ul li').removeClass('active_prot_menu');
$(this).addClass('active_prot_menu');
});
var $container = $('#portfolio');
$container.isotope({
itemSelector: '.col-sm-4',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
return false;
});
});

Related

Owl Carousel change content of the element on click

I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})

Metro tile layout with Bootstrap?

I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>

It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!

Give lightbox effect to images

I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.
<div class="row jumbotron">
<div class="text-center">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
</div>

Nice and easy with bootstrap.
<div class="col-sm-4">
<img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
<div class="modal lightbox" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="*insert image*" class="img-responsive"/>
</div>
</div>
</div>
</div>

Bootstrap Vertical Tabs auto change

I have some vertical tabs that change the content in a box.
I would like these tab to auto change by themselves and cant seem to get it to work.
Here is my code:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Architect</li>
<li class="">AIA</li>
<li class="">IRS </li>
<li class="">AKIN GUMP</li>
<li class="">PWC</li>
<li class="">EPA</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/R&D.png">
</div>
<div class="media-body">
<h2>Architect Magazine</h2>
<p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early 1930s. The product impressed all three jurors.</p>
</div>
</div>
</div>
<div class="tab-pane fade active in" id="tab2">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AIA.png">
</div>
<div class="media-body">
<h2>AIA Awards</h2>
<p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/IRS.png">
</div>
<div class="media-body">
<h2>IRS Awards</h2>
<p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AkinGump.png">
</div>
<div class="media-body">
<h2>Akin Gump Awards</h2>
<p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/PWC.png">
</div>
<div class="media-body">
<h2>PWC Awards</h2>
<p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions
The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc. 87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab6">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/US.png">
</div>
<div class="media-body">
<h2>EPA Awards</h2>
<p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
Please anything would help!
As you can see as the user clicks on the tabs on the left the content to the right changes. I would like to cycle through the tabs at 5 second intervals.
Thanks!
Here is the second box:
<div class="col-xs-12 col-sm-6 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Marek</li>
<li class="">Ozarks Bank</li>
<li class="">CBRE </li>
<li class="">Habitat</li>
<li class="">Huffman</li>
<li class="">Holiday</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab7">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/MarekBrothers.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Marek</h2>
<p>We recently built our new 50,000 SF headquarters building and used the Green-Zip Partition System everywhere. To me, it’s a simple solution and one that everyone should take advantage of!
<br>
-<b>R. Stan Marek</b> / Chairman
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab8">
<div class="media">
<div class="pull-left boxImg" style="margin-top: 20px;">
<img class="img-responsive" src="images/Referals/BankOfTheOzarks.jpg" style="margin-top: 30px;">
Click for Referance
</div>
<div class="media-body">
<h2>Bank Of The Ozarks</h2>
<p>….we now have a built in mechanism for remodeling that should be less expensive, less time consuming, and most importantly, environmentally friendly. <br>
-<b>Mark D. Ross</b> / Vice-Chairman & COO
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab9">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/CBRE.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>CBRE</h2>
<p>….there is no reason not to consider Green Zip Tape as shorter-life property for any tax payer especially based on the design intent, which was originally based on the reusable concept.
<br>
-<b>Matt Rader</b> / National Managing Director
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab10">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Habitat.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Habitat for Humanity</h2>
<p>I am very excited about the opportunity to help others have affordable and decent housing, while also keeping more products that can be reused from piling up in a local landfill. Now that is a winning combination!
<br>
-<b>Ron Collins</b> / Vice President of ReStores
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab11">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Huffman.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Huffman Drywall</h2>
<p>In addition to the sustainable benefits, the financial benefits associated with accelerated depreciation are valuable to me as an owner, and could potentially add to the building’s value in the event of a sale.
<br>
-<b>Brandon Huffman</b> / President
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab12">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Holiday.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Holiday Inn</h2>
<p>We found that the system will be acceptable for use in Holiday Inn, Holiday Inn Express hotels, and Staybridge Suites hotels. Congratulations.
<br>
-<b>Scott Bruce</b>
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
</div>
<!--/.tab-wrap-->
</div>
<!--/.col-sm-6-->

I'm not sure what triggers the change for you, but if it's the "active" class that's applied to the <li> element, then this should work for you:
jQuery:
var cycle = {
onReady: function() {
$(".nav-stacked li:first").addClass("active in");
$("#tab1").addClass("active in");
setInterval(function() {
var $navStacked = $("li.active");
var tabContent = $("li.active a").attr("href");
if ($navStacked.is(".nav-stacked li:last-child")) {
$navStacked.removeClass("active in");
$(".nav-stacked li:first").addClass("active in");
$("div " + tabContent).removeClass("active in");
$("div#tab1").addClass("active in");
} else {
$navStacked.removeClass("active in").next().addClass("active in");
$("div " + tabContent).removeClass("active in").next().addClass("active in");
}
}, 5000);
}
};
$(document).ready(cycle.onReady);
HTML:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Architect</li>
<li class="">AIA</li>
<li class="">IRS </li>
<li class="">AKIN GUMP</li>
<li class="">PWC</li>
<li class="">EPA</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/R&D.png">
</div>
<div class="media-body">
<h2>Architect Magazine</h2>
<p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early
1930s. The product impressed all three jurors.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AIA.png">
</div>
<div class="media-body">
<h2>AIA Awards</h2>
<p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/IRS.png">
</div>
<div class="media-body">
<h2>IRS Awards</h2>
<p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AkinGump.png">
</div>
<div class="media-body">
<h2>Akin Gump Awards</h2>
<p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks
at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/PWC.png">
</div>
<div class="media-body">
<h2>PWC Awards</h2>
<p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc.
87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab6">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/US.png">
</div>
<div class="media-body">
<h2>EPA Awards</h2>
<p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
CodePen

Mixitup filter disappears and adds "fail" class

In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps

It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.

Categories

Resources