changes to fix footer overlap

Author: aireilly

_templates/_page_openshift.html.erb

@@ -286,10 +286,10 @@
   <!-- remove toc active class when page is loaded -->
   <script type="text/javascript">
     window.addEventListener('DOMContentLoaded', () => {
-      var tocItems = $("#toc a");
+      toc_items = document.querySelectorAll('#toc a')
 
-      for (let i = 0; i < tocItems.length; i++) {
-        tocItems[i].classList.remove("toc-active");
+      for (let i = 0; i < toc_items.length; i++) {
+        toc_items[i].classList.remove("toc-active");
       }
     })
   </script>
@@ -329,9 +329,9 @@
   <!-- clear and add toc-active to clicked toc link -->
   <script type="text/javascript">
   $("#toc a").click(function() {
-    var tocItems = $("#toc a");
-    for (let i = 0; i < tocItems.length; i++) {
-      tocItems[i].classList.remove("toc-active");
+    toc_items = document.querySelectorAll('#toc a')
+    for (let i = 0; i < toc_items.length; i++) {
+      toc_items[i].classList.remove("toc-active");
     }
     this.classList.add("toc-active");
   });
@@ -365,7 +365,8 @@
         e.map(i => {
           if (i.isIntersecting && i.intersectionRatio >= 1) {
             allTocLinks.forEach(link => link.classList.remove("toc-active"));
-            document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active');
+            toc_item = document.querySelector(`#toc li a[href="#${i.target.id}"]`)
+            if(toc_item !== null) toc_item.classList.add('toc-active'); 
           }
         });
       };
@@ -376,9 +377,9 @@
         document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
           observer.unobserve(h);
         });
-        var tocItems = $("#toc a");
-        for (let i = 0; i < tocItems.length; i++) {
-          tocItems[i].classList.remove("toc-active");
+        toc_items = document.querySelectorAll('#toc a')
+        for (let i = 0; i < toc_items.length; i++) {
+          toc_items[i].classList.remove("toc-active");
         }
         this.classList.add("toc-active");
       })
@@ -387,45 +388,53 @@
 
   <!--handle page scroll top and bottom, add toc-active -->
   <script type="text/javascript">
+    toc_items = document.querySelectorAll('#toc a')
     document.addEventListener('scroll', () => {
       //scroll to bottom
       if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
-        var tocItems = $("#toc a");
-        for (let i = 0; i < tocItems.length; i++) {
-          tocItems[i].classList.remove("toc-active")
-          };
-          tocItems[tocItems.length - 1].classList.add("toc-active");
+        if(toc_items !== null) {
+          for (let i = 0; i < toc_items.length; i++) {
+            toc_items[i].classList.remove("toc-active")
+            };
+            toc_items[toc_items.length - 1].classList.add("toc-active");
+          }
         };
       //scroll to top
       if(window.pageYOffset === 0) {
-        var tocItems = $("#toc a");
-        for (let i = 0; i < tocItems.length; i++) {
-          tocItems[i].classList.remove("toc-active");
+        for (let i = 0; i < toc_items.length; i++) {
+          if(toc_items !== null) {
+            toc_items[i].classList.remove("toc-active");
           };
-          tocItems[0].classList.add("toc-active");
-        };
-      })
+          toc_items[0].classList.add("toc-active");
+        }
+      };
+    })
   </script>
 
   <!-- adjust alerts on mobile -->
   <script type="text/javascript">
+    alert_item = document.querySelector('#support-alert')
     window.addEventListener("wheel", () => {
       if (window.innerWidth < 1425) {
         //adjust alert
         if(window.pageYOffset > 0) {
-          document.querySelector('#support-alert').style.position = "fixed";
-          document.querySelector('#support-alert').style.bottom = "0px";
-          document.querySelector('#support-alert').style.margin = "5px";
-          document.querySelector('#support-alert').style.zIndex = "9999999";     
+            if(alert_item !== null) {
+              alert_item.style.position = "fixed";
+              alert_item.style.bottom = "0px";
+              alert_item.style.margin = "5px";
+              alert_item.style.zIndex = "9999999";
+            }
         }
       }
    });
     window.addEventListener('resize', () => {
       if (window.innerWidth >= 1425) {
-        document.querySelector('#support-alert').style.removeProperty('position');
-        document.querySelector('#support-alert').style.removeProperty('bottom');
-        document.querySelector('#support-alert').style.removeProperty('margin');
-        document.querySelector('#support-alert').style.removeProperty('zIndex');
+        if(alert_item !== null) {
+          alert_item.style.removeProperty('position');
+          alert_item.style.removeProperty('bottom');
+          alert_item.style.removeProperty('margin');
+          alert_item.style.removeProperty('zIndex');
+        }
       }
     })
   </script>