footer.html

<div class="uabfooter">
  <div class="footer-left">
    <img src="../img/logo.png" alt="UAB Logo" class="logo" />
  </div>
  <div class="footer-center">
    Research Computing -
    <a class="support-link" href="https://docs.rc.uab.edu">https://docs.rc.uab.edu</a>
  </div>
  <div class="footer-right">&copy; UAB</div>
</div>

<script>
  //execute the function () {...} only when the entire HTML document (DOM)loaded
  document.addEventListener("DOMContentLoaded", function () {
    // Function to check the current slide
    function checkSlide() {
      var titleSlide = document.querySelector("section#title-slide");
      var customFooter = document.querySelector(".uabfooter");

      if (customFooter) {
        // Check if the current slide is the title slide
        var currentSlide = document.querySelector(".reveal .slides .present");
        if (currentSlide === titleSlide) {
          customFooter.style.display = "none"; // Hide footer on title slide
        } else {
          customFooter.style.display = "flex"; // Show footer on other slides
        }
      }
    }

    // Call fun "checkSlide", initial check on load whether it is error free
    checkSlide();

    // Check the slide when it changes
    Reveal.on('slidechanged', function (event) {
      checkSlide();
    });
  });
</script>