The clash between mixitup and bootstrap's .active class causes confusion

I've encountered an issue while trying to implement a mixitup filter gallery on my bootstrap template.

It seems to work fine when loaded under the first active tab-pane, but fails to work properly when placed under the second or third tab-pane. Could there be a conflict between the bootstrap .active class causing this?

Here is the main navigation menu for the tab panes:

<div class="list-group">
   <a href="#landing" role="tab" data-toggle="tab" class="list-group-item active">Home<i class="pull-xs-right fa fa-home"></i></a>
   <a href="#about" role="tab" data-toggle="tab" class="list-group-item">About me <i class="pull-xs-right fa fa-star"></i></a>
   <a href="#services" role="tab" data-toggle="tab" class="list-group-item">What I do <i class="pull-xs-right fa fa-suitcase"></i></a>
   <a href="#portfolio" role="tab" data-toggle="tab" class="list-group-item">Portfolio <i class="pull-xs-right fa fa-photo"></i></a>
   <a href="#blog" role="tab" data-toggle="tab" class="list-group-item">Blog <i class="pull-xs-right fa fa-comment"></i></a>
   <a href="#contact" role="tab" data-toggle="tab" class="list-group-item">Contact <i class="pull-xs-right fa fa-phone"></i></a>
</div>

Let's take a look at the mixitup gallery implementation:

<div role="tabpanel" class="tab-pane fade" id="portfolio">
  <nav class="navbar navbar-light bg-faded">
    <div class="container">
      <ul class="nav navbar-nav" id="filters">
        <li class="nav-item"><a class="filter nav-link" data-filter=".plugins, .logo, .web">All</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".plugins">App / Plugins</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".logo">Logo Design</a>
        </li>
        <li class="nav-item"><a class="filter nav-link" data-filter=".web">Web Design</a>
        </li>
        <li class="nav-item">
          <div class="fb-like" data-href="https://facebook.com/ydd.ninja" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="content">

    <div id="portfoliolist">

      <div class="portfolio logo" data-cat="logo">
        <div class="portfolio-wrapper">
          <img src="assets/images/bg.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio web" data-cat="web">
        <div class="portfolio-wrapper">
          <img src="assets/images/dp2.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">Web Design</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>


      <div class="portfolio plugins" data-cat="plugins">
        <div class="portfolio-wrapper">
          <img src="assets/images/1.jpg" alt="" />
          <div class="label">
            <div class="label-text">
              <a href="#" class="text-title">Bird Document</a> 
              <span class="text-category">App Design</span>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

    </div>
    <!--//portfolio-list-->
  </div>
</div>

The provided code above may not function as intended, however, if the tab-pane with ID "portfolio" is set as active during the initial load, all portfolio navigation should work without any issues and the gallery will filter correctly.

<div role="tabpanel" class="tab-pane fade in active" id="portfolio">

Thank you in advance for any assistance that can be provided on resolving this issue.

jquerycsstwitter-bootstraptwitter-bootstrap-4

Answer №1

Issue resolved!

The problem was a conflict with the data-toggle attribute in the bootstrap tab, which caused it to malfunction.

Here is the solution code:

$(document).ready(function() {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          var target = $(e.target).attr('href');
          if (target === '#portfolio') {
            if (!$('#portfoliolist').mixItUp('isLoaded')) {
              $('#portfoliolist').mixItUp({
                      selectors: {
                        target: '.portfolio',
                        filter: '.filter' 
                      },
                      load: {
                        filter: 'all' // show app tab on first load
                      }  

                    });   
            }
          }
        });

    });

Credit goes to this individual at mixitupforum

Answer №2

Ensure that all the filters and controls are placed within the designated 'mixit' class container before initializing with the following code snippet. 

var mixer = mixitup('.mixit', {
         controls: {
          scope: 'local'
         }
      });

Answer №3

Quick Adjustment, Works Perfectly Give it a Go:

Instructing to specifically filter only the actions in button.filter

selectors: {
   control: 'button.filter'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The value from the angular UI bootstrap datepicker is unavailable when using a JQuery expression

I have a question regarding the datepicker feature from the Angular UI bootstrap library. The documentation can be found here. After selecting a date using the datepicker, I am facing an issue with retrieving the text input using jQuery expressions. When ...

javascriptjqueryangularjstwitter-bootstrapdatepicker

Troubleshooting Material UI Widget Components

After working diligently on the autocomplete component, I am pleased with how the feature turned out. However, when this component is rendered as a widget on other pages, I'm encountering some style issues due to global styling overrides or additions ...

javascriptcssreactjsmaterial-ui

How can you send information to jQuery.Ajax() that will be accessible in the overarching error handler?

Here is the setup for my ajax error handler: $(document).ajaxError( handleAjaxError ); function handleAjaxError (e, jqXHR, settings, exception) { } Whenever I make a call to $.ajax(options);, I want to include a DOM element so that it can be accessed w ...

jquery

Vue is actively eliminating a background image through the use of the style attribute

There appears to be an issue where Vue is removing both the style attribute and the background image from this tag. <section style="background: url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:j ...

htmlcssvue.js

transitioning backwards upon the removal and addition of classes in vue

Currently, I am working on creating a help button that triggers a help-dialogue box with some animations when clicked. This is the template I am using: <template> <div class="help"> <button v-if="theme" class=" ...

cssvue.js

Is it possible to have a never-ending slideshow with inline-blocks?

After spending countless hours trying to troubleshoot my code, I am now seeking help from the wonderful people of the internet! ;) It seems like only a small portion of my code is incorrect. What I'm attempting to do is move the leftmost object in the ...

javascriptjqueryhtmlcss

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

JQuery for gravitational form calculations

Is there a way to incorporate a basic jquery function into gravity forms? I have 3 specific fields that I need to work with. These include 2 number fields and 1 total field, where the total will be determined by the values in the number fields. In the f ...

jquerywordpressgravity-forms-plugin

What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

I've been attempting to prevent a page from scrolling after selecting an anchor link. Currently, the page layout includes a larger version of an image appearing in full view on the right panel after clicking on an image in the left panel (with text u ...

jqueryhtmlcssanchor

Deciphering the hierarchy of z-index stacking

I'm feeling a bit puzzled about how to determine the stacking order using z-index. I am struggling to grasp how browsers handle elements with the position property in comparison to those without it. Is there a set rule to establish the stack order o ...

csscss-positionz-index

Exploring Problems with Implementing the Jquery .click() Function on a Class

My goal is to create a simple JQuery code that triggers a pop-up message saying hello when any element of the specified class is clicked. Here's what I've tried: $(document).ready(function(){ $(".thumb_radio").click(function(){ aler ...

jqueryhtml

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Toggle class with jquery if the checkbox is checked

I am trying to achieve a simple task using jQuery. I have a checkbox inside a box, and I want to toggle a class on the box with a transition when the checkbox is checked. However, my code is not working as expected. Here is what I have: $(document).ready( ...

javascriptjqueryhtmlcsscheckbox

Is it advisable to restrict ajax requests?

Is using ajax requests more resource-intensive than a traditional page load? Consider a basic menu with standard links where clicking a link takes you to a new page. By using ajax, I can avoid this default behavior and instead fetch the linked page' ...

phpjavascriptjqueryhtmlajax

Having difficulty in closing Sticky Notes with JavaScript

Sticky Notes My fiddle code showcases a functionality where clicking on a comment will make a sticky note appear. However, there seems to be an issue with the Close Button click event not being fired when clicked on the right-hand side of the note. I have ...

javascriptjqueryhtmlcssckeditor

Error in the syntax containing ?callback=jQuery1113

I'm attempting to initiate a simple JSONP query: <html> <head> <script type="text/javascript" src="js/jquery1.js"></script> <script> $(document).ready(function(){ $.ajax({ ...

javascriptjqueryajaxinternet-explorer-8

Explore our array of images displayed in an interactive gallery featuring clickable

I have a query I'm facing an issue with my code. Currently, I have a gallery that displays images perfectly. Now, I want to enhance it by showing a larger resolution of the image when clicked. However, when I add the href tag to link the images, they ...

javascriptphpjqueryhtml

AJAX should prevent page refresh, but sometimes it forces it

This AJAX test page is a simple demonstration using JQuery. When the page is loaded, it displays a button (BUTTON1). Upon clicking on BUTTON1, it will execute react.php using script.js. The react.php will then replace BUTTON1 with BUTTON2 using a span elem ...

javascriptphpjqueryajax

how to conceal an image using its icon attribute

Hello everyone, I've been searching for a solution to my question online but couldn't find one. I am looking to hide images based on their icon-value attribute. For example, I want to hide the image with icon-value="1" within the div that has a c ...

javascripthtmlcss

Blurry Background CSS Effect

Is there a way to create a background image with the same blurry effect as seen in the picture provided? It appears to involve multiple filters rather than just a basic blur. I attempted using the blur Effect, but it didn't achieve the desired result ...

cssimagebackgroundblureffect