Home » Javascript » Some links are not clickable

Some links are not clickable

Posted by: admin November 1, 2017 Leave a comment

Questions:

I have created a filter for elements on my website, and under the “Show All” filter, none of the links are working.

The filter works by hiding elements that are not selected, then to show all a function sorts all the elements back into place.

Here is the link if you would like to take a look:
http://staging.thematuringmillennial.com/tools/

**** Update: I think the problem has to do with the while loop in the function returnToNorm.

Where should I start to look?

Here is the main part of the code:

function filterSelection(c) {
  var mainContainer = document.getElementById('mainContainer');
  var x, y, i;
  x = document.getElementsByClassName("filterDiv");
  y = document.getElementsByClassName("filterTitle");
  if (c == "all") {
    c = "";
    returnToNorm();
  }
  for (i = 0; i < y.length; i++) {
    if (c != "") mainContainer.insertBefore(y[i], x[0]);
    w3RemoveClass(y[i], "show");
    if (y[i].className.indexOf(c) > -1) w3AddClass(y[i], "show");
    for (j = 0; j < x.length; j++) {
      w3RemoveClass(x[j], "show");
      if (x[j].className.indexOf(c) > -1) w3AddClass(x[j], "show");
    }
  }
}

function returnToNorm() {
  var sort = false;
  var mainContainer = document.getElementById('mainContainer');
  var list = document.getElementsByClassName("ORD");
  var order = [];
  for (d = 0; d < list.length; d++) {
    order.push(parseInt(list[d].classList.item(0)));
  }
  while (sort == false) {
    sort = true;
    for (k = 1; k < list.length; k++) {
      var a = order[k - 1];
      var b = order[k];
      if (a > b) {
        sort = false;
        mainContainer.insertBefore(list[k], list[k - 1]);
        var hold = order[k - 1];
        order[k - 1] = order[k];
        order[k] = hold;
      }
    }
  }
}
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];}
  }
}

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(" ");
}
.toolButton {
  font-weight: bold;
  background: #f5f5f5;
  color: black;
  text-decoration: none;
  margin: 10px;
  font-size: 115%;
  padding: 1%;
  margin: 5px;
  border-radius: 5px;
}

.toolButton:hover {
  font-weight: bold;
  background: #929292;
  color: black;
  text-decoration: none;
  margin: 10px;
  font-size: 115%;
  padding: 1%;
  margin: 5px;
  border-radius: 5px;
}

.toolTitle {
  font-weight: bold;
  text-decoration: none;
  color: #0071be;
  font-size: 150%;
  margin: 10px;
}

.toolTitle:hover {
  text-decoration: underline;
}

.toolText {
  padding: 5px;
  font-size: 115%;
}

.toolImg {
  max-height: 90%;
  padding: 5px;
}

.toolLink {
  font-weight: bold;
  background: #0071be;
  color: white;
  text-decoration: none;
  margin: 10px;
  font-size: 115%;
  padding: 2%;
  margin: 20px;
  border-radius: 5px;
}

.toolLink:hover {
  color: white;
  text-decoration: none;
  background: #0099ff;
}

.tool2Link {
  font-weight: bold;
  background: #929292;
  color: white;
  text-decoration: none;
  margin: 10px;
  font-size: 115%;
  padding: 2%;
  margin: 20px;
  border-radius: 5px;
}

.tool2Link:hover {
  color: white;
  text-decoration: none;
  background: #b3b3b3;
}

.filterDiv {
  display: none;
  background: #f5f5f5;
  height: 400px;
  width: 45%;
  border-radius: 5px;
}

.filterTitle {
  display: none;
}

.show {
  display: block;
}

a.resourceButton {
  color: black;
  /*#dd3333;*/
  text-decoration: underline;
}

a.resourceButton:hover {
  text-transform: uppercase;
  padding: 3% 3% 3% 3%;
  color: white;
  text-decoration: none;
  background: #0071be;
  font-size: 110%;
  border: 5px solid white;
  border-radius: 20px;
}

a.newBook {
  color: black;
  /*#dd3333;*/
  text-decoration: underline;
}

a.newBook:hover {
  text-transform: uppercase;
  padding: 1% 1% 1% 1%;
  color: white;
  text-decoration: none;
  background: #0071be;
  font-size: 110%;
  border: 5px solid white;
  border-radius: 20px;
}

a.readLink:hover {
  text-decoration: underline;
}


/* #0071be */

</style>
<input type="button" class="toolButton" onclick="filterSelection('all')" name="category" value="Show All" checked>
<input type="button" class="toolButton" onclick="filterSelection('habits')" name="category" value="Habits">
<input type="button" class="toolButton" onclick="filterSelection('productivity')" name="category" value="Productivity">
<input type="button" class="toolButton" onclick="filterSelection('learning')" name="category" value="Learning">
<input type="button" class="toolButton" onclick="filterSelection('investing')" name="category" value="Investing">

<div id="mainContainer" class="w3-mobile w3-row">
  <! -- Productivity Main -->
  <h3 class="1 ORD widget-title w3-margin filterTitle habits">Habit Tools</h3>

  <div class="2 ORD w3-display-container w3-margin w3-mobile w3-container w3-col filterDiv habits">
    <a href="" class="w3-left toolTitle"> Habits 1 </a>
    <div class="w3-row">
      <div class="w3-threequarter toolText">Hust some random text about this current part of the code. I love coding.</div>
      <a href="">
        <image class="w3-quarter w3-image toolImg" src="http://staging.thematuringmillennial.com/wp-content/uploads/2017/09/The-Power-of-Now-Cover.jpg">
      </a>
    </div>
    <div class="w3-row">
      <a href="" class="w3-display-bottomleft toolLink">Link for Habit 1</a>
      <a href="" class="w3-display-bottomright tool2Link">Peronal Link</a>
    </div>
  </div>

  <div class="3 ORD w3-display-container w3-margin w3-mobile w3-container w3-col filterDiv habits productivity">
    <a href="" class="w3-left toolTitle"> Both 1 (main habits) </a>
    <div class="w3-row">
      <div class="w3-threequarter toolText">Hust some random text about this current part of the code. I love coding.</div>
      <a href="">
        <image class="w3-quarter w3-image toolImg" src="http://staging.thematuringmillennial.com/wp-content/uploads/2017/09/The-Power-of-Now-Cover.jpg">
      </a>
    </div>
    <div class="w3-row">
      <a href="" class="w3-display-bottomleft toolLink">Link for Habit 1</a>
      <!-- <a href = "" class = "w3-display-bottomright tool2Link" ></a> -->
    </div>
  </div>
Answers: