Jump to content
DeniseW

Porfolio Gallery Filter Button Outline disappears

Recommended Posts

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 by DeniseW
I clicked enter by mistake.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by DeniseW
added info

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by DeniseW
updated status

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×