Live Link : http://velnikolic.com/elliotDev5/
contentActive = true;
var selector = '.mainNav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
$(".filter").click(function() {
category = $(this).data("filter");
if ($(this).hasClass("active")) {
$(this).removeClass('active');
}
pLoaded();
if (contentActive == true && status == "false") {
$('.contentWrap').children().fadeOut('slow').promise().done(function() {
$('#portfolio').mixItUp({
load: {
filter: category
}
});
contentActive = false;
});
} else {
$('#portfolio').mixItUp({
load: {
filter: category
}
});
}
});
$('.link a').click(function() {
var id = $(this).attr('href');
$('.contentWrap').children().fadeOut('slow').promise().done(function() {
pLoaded();
alert(status);
if(status == "true") {
$('#portfolio').fadeOut('slow').promise().done(function() {
$('#portfolio').mixItUp('destroy', true);
$('#portfolio').removeAttr('style');
$(id).fadeIn('slow', function () {
// Animation complete
});
});
} else {
$(id).fadeIn('slow', function () {
// Animation complete
});
}
contentActive = true;
});
});
var status;
status = false;
function pLoaded() {
status = $('#portfolio').mixItUp('isLoaded');
return status;
}
$(".nav li a").click(function(){
if ($( "#navMenu" ).hasClass( "canvas-slid" )) {
$('#navMenu').offcanvas('hide');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-4 offcanvas-xs" id="navMenu">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav mainNav">
<img id="logo" class="img-responsive hidden-xs" src="assets/img/logo2.jpg" />
<li class="link">
<a href="#home">Home</a>
</li>
<li class="link">
<a href="#aboutSection">About</a>
</li>
<li class="filter" data-filter=".category-1">
<a href="#">Animation</a>
</li>
<li class="filter" data-filter=".category-2">
<a href="#">Commercial</a>
</li>
<li class="filter" data-filter=".category-3"><a href="#">Documentary</a>
</li>
<li class="filter" data-filter=".category-4">
<a href="#">Film</a>
</li>
<li class="filter" data-filter=".category-5">
<a href="#">Music</a>
</li>
<li class="filter" data-filter=".category-6">
<a href="#">Video Games</a>
</li>
<li class="link">
<a href="#services">Services</a>
</li>
</ul>
</div>
</div>
</div>
<div class="contentWrap">
//content
</div>
<div id="portfolio">
</div>
Basically when you click a non filter link it check if theres the portfolio div and fade it out if there is, then load the content.
If a filter is clicked it should check if there is any other content fade it out if so and load the portfolio.
The problem seems to be with the if statements, different iterations work in firefox and chrome and different iterations work only in IE. Driving me crazy to figure out one that works for both
$(...).mixItUp is not a function
error ... so ... yeah – Jaromanda X Jan 6 '17 at 9:35