Jump to content

DeniseW

Members
  • Content count

    4
  • Joined

  • Last visited

Community Reputation

0 Neutral

About DeniseW

  • Rank
    Newbie
  1. DeniseW

    Porfolio Gallery Filter Button Outline disappears

    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! 😂
  2. DeniseW

    Porfolio Gallery Filter Button Outline disappears

    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?
  3. DeniseW

    Porfolio Gallery Filter Button Outline disappears

    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.
  4. 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!
×