If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Feb 2020
    Member #

    Getting resource cards to line up in filtered search

    I've created a page so that users for the charity I work for (supporting librarians in UK) can filter through different resources available. The page is generally working well, but one thing that is that the resource cards aren't neatly stacking when results are run.

    I've created a test page here

    You can see the issue in the following screenshot where there's blank spaces where instead I would like all slots to be filled with resource cards rather than having spare spaces once a filter has been applied (eg Show all or 4. Research Skills).

    Stacking issue.jpg

    The script I'm using to run the search is below but you can also find the code here (saved as a text document downloadable from WeTransfer). Any suggestions on how to get this resolved would be gratefully appreciated.

    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[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "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[i]) == -1) {
          element.className += " " + arr2[i];
    // 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[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 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[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 01:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: