Terminology

by James Flattery

HTML

<div class="ms-rte-layoutszone-inner">
  <div id="floatNav"><a href="#outerShell">&uarr; Back to Top &uarr;</a></div>
  <div id="outerShell">
    <div class="backButton">
      <div>&laquo;Back</div>
    </div>
    <div id="PageTitle">
      <center>
        <h1>Terminology</h1>
      </center>
    </div>
    <div id="letterMenu">
      <a href="#A" class="letterA">&nbsp;A&nbsp;</a>
      <a href="#B" class="letterB">&nbsp;B&nbsp;</a>
      <a href="#C" class="letterC">&nbsp;C&nbsp;</a>
      <a href="#D" class="letterD">&nbsp;D&nbsp;</a>
      <a href="#E" class="letterE">&nbsp;E&nbsp;</a>
      <a href="#F" class="letterF">&nbsp;F&nbsp;</a>
      <a href="#G" class="letterG">&nbsp;G&nbsp;</a>
      <a href="#H" class="letterH">&nbsp;H&nbsp;</a>
      <a href="#I" class="letterI">&nbsp;I&nbsp;</a>
      <a href="#J" class="letterJ">&nbsp;J&nbsp;</a>
      <a href="#K" class="letterK">&nbsp;K&nbsp;</a>
      <a href="#L" class="letterL">&nbsp;L&nbsp;</a>
      <a href="#M" class="letterM">&nbsp;M&nbsp;</a>
      <a href="#N" class="letterN">&nbsp;N&nbsp;</a>
      <a href="#O" class="letterO">&nbsp;O&nbsp;</a>
      <a href="#P" class="letterP">&nbsp;P&nbsp;</a>
      <a href="#Q" class="letterQ">&nbsp;Q&nbsp;</a>
      <a href="#R" class="letterR">&nbsp;R&nbsp;</a>
      <a href="#S" class="letterS">&nbsp;S&nbsp;</a>
      <a href="#T" class="letterT">&nbsp;T&nbsp;</a>
      <a href="#U" class="letterU">&nbsp;U&nbsp;</a>
      <a href="#V" class="letterV">&nbsp;V&nbsp;</a>
      <a href="#W" class="letterW">&nbsp;W&nbsp;</a>
      <a href="#X" class="letterX">&nbsp;X&nbsp;</a>
      <a href="#Y" class="letterY">&nbsp;Y&nbsp;</a>
      <a href="#Z" class="letterZ">&nbsp;Z&nbsp;</a>
    </div>

    <form id="live-search" action="" class="styled" method="post">
      <fieldset>
        <legend>Search:</legend>
        <input type="text" class="text-input" id="filter" value="" />
      </fieldset>
    </form>
    <div class="table" id="letterTable">
      <h3 id="A"...

CSS

.ms-rte-layoutszone-inner {
  border: 1px solid #000;
  border-radius: 20px;
  background: #222;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  padding: 10px;
}

#letterMenu {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: #ccc;
}

#letterMenu a {
  text-decoration: none;
}

.term {
  font-weight: bold;
  color: #79AFD2;
}

.definition {
  font-weight: normal;
  font-style: italic;
}

#floatNav {
  position: fixed;
  bottom: 0px;
  right: 42%;
  left: 42%;
  width: auto;
  background: #111;
  text-align: center;
  border: 1px solid #fff;
  opacity: 0.1;
  border-radius: 8px 8px 0px 0px;
}

#floatNav a {
  color: #fff;
  text-decoration: none;
}

.letterSection {
  border: 1px solid #fff;
  border-collapse: collapse;
}

#floatNav:hover {
  opacity: 1;
}

body {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
  background-color: #484848;
  background-size: 16px 16px;
}

JavaScript

$(document).ready(function() {
  function hideEmpties() {
    $(".term:empty").parent().hide();

    $('.letterSection').each(function() {
      $("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).show();
      if (!($(this).children('ul').children('li').is(':visible'))) {
        $("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).hide();
      }
    });
  }
  hideEmpties();

  $("#filter").keyup(function() {

    // Retrieve the input field text
    var filter = $(this).val();

    // Loop through the comment list
    $(".wordLine").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).fadeOut();
        hideEmpties();

        // Show the list item if the phrase matches
      } else {
        $(this).show();
        hideEmpties();
      }
    });
  });
});