Porfolio Gallery Filter Button Outline disappears

[DeniseW]

Hello. I am using a bootstrap responsive ecommerce template.  The filter buttons work great!  BUT, if you click on a "card" or even on the background, the outline around the button disappears. This is a problem that the original W3 example doesn't have.  Any ideas would be greatly appreciated.

Here is the original:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter

Here is mine:

Here is the page:

http://help.cccis.com/static/ccc_one/ELCTraining/EstWorkRO.html

Here is the filter buttons:

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')">Show all</button>
  <button class="btn" onclick="filterSelection('estimates')">Estimates</button>
  <button class="btn" onclick="filterSelection('workfiles')">Workfiles</button>
  <button class="btn" onclick="filterSelection('ros')">ROs</button>
                <button class="btn" onclick="filterSelection('checklist')">Direct CheckList</button>
                <button class="btn" onclick="filterSelection('share')">Estimate Share</button>
                <button class="btn" onclick="filterSelection('touch')">Touch</button>
                </div>
                </div>

Here is the javascript:

<!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    
      <script>
        filterSelection("all") // Execute the function and show all columns
        function filterSelection(c) {
          var x,
            i;
          x = document.getElementsByClassName("column");
          if (c == "all")
            c = "";

          // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
          for (i = 0; i < x.length; i++) {
            w3RemoveClass(x, "show");
            if (x.className.indexOf(c) > -1)
              w3AddClass(x, "show");
            }
          }

        // Show filtered elements
        function w3AddClass(element, name) {
          var i,
            arr1,
            arr2;
          arr1 = element.className.split(" ");
          arr2 = name.split(" ");
          for (i = 0; i < arr2.length; i++) {
            if (arr1.indexOf(arr2) == -1) {
              element.className += " " + arr2;
            }
          }
        }

        // Hide elements that are not selected
        function w3RemoveClass(element, name) {
          var i,
            arr1,
            arr2;
          arr1 = element.className.split(" ");
          arr2 = name.split(" ");
          for (i = 0; i < arr2.length; i++) {
            while (arr1.indexOf(arr2) > -1) {
              arr1.splice(arr1.indexOf(arr2), 1);
            }
          }
          element.className = arr1.join(" ");
        }

        // Add active class to the current button (highlight it)
        var btnContainer = document.getElementById("myBtnContainer");
        var btns = btnContainer.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
          btns.addEventListener("click", function () {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
          });
        }
      </script>

If you click on a filter button, it works. But if you click on the background, the button does not stay highlighted. HELP!

Edited August 7, 2018 by DeniseW
I clicked enter by mistake.

[dsonesuk]

Bootstrap has a class for the button element called 'btn' on when this has focus (also has class name of 'focus') it is given a box shadow, and so when it loses focus it reverts to default.

.btn.focus, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0 none;
}

The try it example only changes in a different background when a class name of 'active' is added, if this loses focus when click anywhere outside this element, the 'active' class is still present, so the background colour remains the same. You need to use 'active' class to apply the same effect used on focus.

.btn.active {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0 none;
}

But! you have a problem with your JavaScript code as only one of the buttons should have the class 'active' , but the 'active' is listed twice in class attribute in some cases, and also shown on another button as well. This means using above css selector will cause more than 1 button will have the box shadow, with one being unrelated to the category listing.

[DeniseW]

Okay. That makes sense. Except that I need the actives where they are so that the side nav works as well. So, I tried to create a btn-filter as a new class.  But that caused every button I clicked to turn on the border.  I also tried to create a "filter-active" class.  Neither worked.

What would you suggest? I am truly at a loss as to how to fix it. thanks again.

Edited August 8, 2018 by DeniseW
added info

[dsonesuk]

Like I said this

.btn.active {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0 none;
}

Will produce the result you want! but because the JavaScript code is not clearing ALL 'active' class names from each button before applying 'active' class name to the currently selected button for some reason, you will have 2 buttons highlighted at one time.

[DeniseW]

and that is my conundrum. I don't know enough to understand what to do.  Im sorry if I sound dense.  I appreciate your patience with me.

Would it make a difference if I did btn.filter-active then in the script told it too look at filter-active?  I mean to say, create a unique active class?

[dsonesuk]

Comment out the original and try this

                                    // Add active class to the current button (highlight it)
                                    var btnContainer = document.getElementById("myBtnContainer");
                                    var btns = btnContainer.getElementsByClassName("btn");
                                    for (var i = 0; i < btns.length; i++) {
                                        btns[i].addEventListener("click", function(e) {
                                            var clearbtn = document.getElementsByClassName("btn");
                                            for (var j = 0; j < clearbtn.length; j++) {
                                                clearbtn[j].className = "btn";
                                            }
                                            this.className += " active";
                                        });
                                    }

using this along with

.btn.active {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: 0 none;
}

seems to work much better in removing 'active' from class attribute than the original and highlighting with require border.

Edited August 8, 2018 by dsonesuk

[DeniseW]

THANKS..I am trying it now. 

YOU ARE WONDERFUL!!  It works and I understand it AND just, thanks!!!  You really helped me out of a jam!

😂

Edited August 9, 2018 by DeniseW
updated status