updates to reviews and new services

reviews.html

@@ -241,44 +241,20 @@
     <script>
       /** script stuff just for this page */
       
-      // on page init
+      /**
+       * PAGE INITIALIZATION 
+       */
       window.onload = function () {
+        // first, insert all reviews into the page
         insertReviews(reviewData);
-        window.addEventListener("scroll", jiggleGallery);
+        // set listener to jiggle gallery sliders
-        window.addEventListener("resize", manageImageSize);
+        window.addEventListener("scroll", jiggleGallerySliders);
-        manageImageSize();
+        // set listener for overriding gallery resize logic
+        window.addEventListener("resize", setImageSizes);
+        // initialize gallery image sizes by feigning resize upon init
+        setImageSizes();
       };
 
-      function manageImageSize() {
-        let isDesktop = window.innerWidth > 850;
-        let newWidth, newHeight;
-
-        if (isDesktop) {
-          newWidth  =  window.innerWidth   * 0.40;
-          newHeight =  newWidth * 1.2;
-        }
-        else {
-          newWidth  = window.innerWidth  * 0.80;
-          newHeight = newWidth * 1.2;
-        }
-
-        // resize iframes
-        let images = document.getElementsByClassName("juxtapose");
-        for (let i = 0; i < images.length; i++) {
-          images[i].style.width = newWidth + 'px';
-          images[i].style.height = newHeight + 'px';
-        }
-        
-        // resize images in iframe to match
-        images = document.getElementsByClassName("jx-image");
-        for (let i = 0; i < images.length; i++) {
-          images[i].style.width  = newWidth  + 'px';
-          images[i].style.height = newHeight + 'px';
-          images[i].children[0].style.width  = newWidth  + 'px';
-          images[i].children[0].style.height = newHeight + 'px';
-        }
-      }
-
       /** review insertion **/
       let reviewData = [
         {
@@ -345,30 +321,74 @@
         }
       }
 
-      /** gallery jiggling (indicate to user they can use slider) */
+      /** gallery jiggling (indicate to user they can slide images for comparison) */
       let jiggled = false;
-      async function jiggleGallery() {
+      async function jiggleGallerySliders() {
-        if (window.scrollY < 850 || jiggled) return;
+        let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25;
+        console.log('jiggle trheshold: ' + jiggleThreshold);
+        console.log('current pos: ' + window.scrollY);
 
-        // once user scrolls to gallery, change sliders on all images
+        // ensure jiggle only triggers once, upon gallery scrolling into view
+        if (window.scrollY < jiggleThreshold || jiggled) return;
+        
+        // once user scrolls to gallery, move sliders on all images up a bit
         let sliders = juxtapose.sliders;
         for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(65, true);
+          sliders[i].updateSlider(60, true);
         }
         
-        // sleep, then slide again
+        // sleep, then slide them all down,
         await new Promise(resolve => setTimeout(resolve, 1000));
         for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(35, true);
+          sliders[i].updateSlider(40, true);
         }
 
-        // sleep, then slide back to center
+        // sleep, then reset sliders back to center
         await new Promise(resolve => setTimeout(resolve, 1000));
         for (let i = 0; i < sliders.length; i++) {
           sliders[i].updateSlider(50, true);
         }
         jiggled = true;
       }
+
+
+      /** override logic for 'juxtapose' image scaling based on window size changes */
+      function setImageSizes() {
+        let isDesktop = window.innerWidth > 850;
+        let newWidth, newHeight;
+
+        if (isDesktop) {
+          newWidth  =  window.innerWidth   * 0.40;
+        }
+        else {
+          newWidth  = window.innerWidth  * 0.80;
+        }
+
+        // keep all images at 1:1.2 ratio
+        newHeight = newWidth * 1.2;
+
+        // resize iframes
+        let images = document.getElementsByClassName("juxtapose");
+        for (let i = 0; i < images.length; i++) {
+          images[i].style.width = newWidth + 'px';
+          images[i].style.height = newHeight + 'px';
+        }
+        
+        // resize images in iframe to match
+        images = document.getElementsByClassName("jx-image");
+        for (let i = 0; i < images.length; i++) {
+          images[i].style.width  = newWidth  + 'px';
+          images[i].style.height = newHeight + 'px';
+          images[i].children[0].style.width  = newWidth  + 'px';
+          images[i].children[0].style.height = newHeight + 'px';
+        }
+
+        let sliders = juxtapose.sliders;
+        for (let i = 0; i < sliders.length; i++) {
+          sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);
+        }
+
+      }
     </script>
     
     <!-- <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script> -->

services2.html

@@ -31,6 +31,18 @@
         margin-top: 2rem;
       }
 
+      .jumpLink {
+        border: 1px solid var(--gold);
+        padding: 1rem;
+        border-radius: 1rem;
+        text-decoration: none;
+        color: var(--gold);
+        transition: 0.3s ease;
+      }
+      .jumpLink:hover {
+        color: white;  
+      }
+
       #categoryContainer {
         width: 90%;
         height: 100%;
@@ -162,11 +174,11 @@
         <div id="tableOfContents">
           <h1>Our Services</h1>
           <div id="categoryLinks">
-            <h2><a href="#packagesJump">Service Packages</a></h2>
+            <a href="#packagesJump" class="jumpLink"><h2>Service<br/>Packages</h2></a>
-            <h2><a href="#ceramicJump">Ceramic Coating</a></h2>
+            <a href="#ceramicJump" class="jumpLink"><h2>Ceramic<br/>Coating</h2></a>
-            <h2><a href="#paintJump">Polish & Paint Correction</a></h2>
+            <a href="#paintJump"><h2>Polish &<br/>Paint Correction</h2></a>
-            <h2><a href="#exteriorJump">Exterior Detailing</a></h2>
+            <a href="#exteriorJump"><h2>Exterior<br/>Detailing</h2></a>
-            <h2><a href="#interiorJump">Interior Detailing</a></h2>
+            <a href="#interiorJump"><h2>Interior<br/>Detailing</h2></a>
           </div>
         </div>