working resize without error no scrollbars (really)

5 years ago · 716663d850
parent 34a21ffc85
commit 716663d850
5 changed files with 26 additions and 21 deletions
--- a/inc/css/main.css
+++ b/inc/css/main.css
@ -14,7 +14,7 @@
    --h-info: 67.5vh; /* 100 - 32.5 */
    --h-ex: 15vh; /* + 2 * 2.5vh bottom (20.0)*/

-    --h-ex-thumb: 14.5vh;
+    --h-ex-thumb: 15.0vh;
 }

 * {
@ -54,6 +54,7 @@ header {
    background-color: var(--c1);
    width: 60%;
    height: var(--h-header);
+    max-height: var(--h-header);
    margin: 2.5vh auto;
    text-align: center;
    z-index: 1;
@ -71,13 +72,14 @@ a:hover {

 #logo {
    position: relative;
-    height: 100%;
+    height: auto%;
 }

 #logo img {
    filter: grayscale(1);
    width: calc(var(--h-header) + 3vh);
    margin-top: -1.5vh;
+    margin-bottom: -1.5vh;
 }

 #logo img:hover {
@ -92,11 +94,12 @@ a:hover {

 /******************* EXHIBITION *******************/

-/* Remove scrollbar in all browsers */
-::-webkit-scrollbar{width:2px;height:2px;}
-::-webkit-scrollbar-button{width:2px;height:2px;}
+/* Remove scrollbar in webkit */
+::-webkit-scrollbar{width:0px; height:0px;}
+::-webkit-scrollbar-button{width:0px; height:0px;}

 #exhibition {
+/* Remove scrollbar in FF */
    scrollbar-width: none;

    transform-origin: bottom left;
@ -130,7 +133,7 @@ a:hover {
 }

 .thumb {
-    filter: blur(2px) grayscale(1);
+    filter: grayscale(1);
    width: 100%;
    height: 100%;
 }
@ -206,6 +209,7 @@ a:hover {
    background-repeat: no-repeat;
    background-position: center;
    max-width: 60%;
+    height: 100%;
 }

@media only screen and (max-width: 800px) {
--- a/inc/js/main.js
+++ b/inc/js/main.js
@ -35,15 +35,25 @@ function handleThumb(overlay, elem) {
    showOverlay(overlay, imgName);
 }

+// save last eventlistener func to remove it...
+var resize;
 function showOverlay(overlay, imgName) {
    let info = getInfoForImg(imgName);
    let magni = document.getElementById("zoom");
    let infoTable = document.getElementById("img-description");
    let img = document.createElement("img");
    // call my zoom function (zoom.js)
+    // fix for the zoom factor after resize (timeout to reduce calls)
+    let waitResize;
+    // remove for old img_names (named func required)
+    window.removeEventListener("resize", resize);
+    resize = () => {
+        clearTimeout(waitResize);
+        waitResize = setTimeout(() => {zoom(0.4, imgName)},50);
+    };
+    window.addEventListener("resize", resize);
+
    img.addEventListener("load", () => {zoom(0.4, imgName)});
-    // fix for the zoom factor after resize
-    window.addEventListener("resize", () => {zoom(0.4, imgName)});
    img.src = `/inc/images/${imgName}.jpg`;
    img.id = imgName;
    img.alt = imgName;
--- a/inc/js/zoom.js
+++ b/inc/js/zoom.js
@ -7,19 +7,13 @@
 * Version: 1.2
 */
 function zoom(factor, imgName) {
+    console.log("CALL:" + imgName);
+    let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
    let img = document.getElementById(imgName);
    let magni = img.parentElement;
    magni.style.backgroundImage = `url("${img.src}")`;

    let offset = {x: img.width * factor, y: img.height * factor};
-    // Fix for firefox, somehow width larger than content (inline-block)
-    magni.style.width = "100%";
-    magni.style.width = img.width;
-    // mobile fix (for some browsers)
-    if (Math.max(document.documentElement.clientWidth, window.innerWidth) < 800) {
-        magni.style.height = "50%";
-        magni.style.height = img.height;
-    }
    // setup the padding (bigger zoom canvas)
    magni.style.padding = offset.y + "px " + offset.x + "px";
    // adjust the margin to ged rid of the extra size gained from padding
@ -30,11 +24,6 @@ function zoom(factor, imgName) {
        img.style.opacity = 0;
    });

-    // img.addEventListener("touchmove", (e) => {
-    //     e.preventDefault();
-    //     moveBackground(getOffsetToMiddle(e));
-    // });
-
    img.addEventListener("mousemove", (e) => {
        moveBackground(getOffsetToMiddle(e));
    });
--- a/tmpl/layouts/base.html
+++ b/tmpl/layouts/base.html
@ -1,3 +1,4 @@
+<!doctype html>
 <html>
    <head>
        <meta charset="UTF-8"/>
--- a/tmpl/layouts/index.html
+++ b/tmpl/layouts/index.html
@ -1,3 +1,4 @@
+<!doctype html>
 <html>
    <head>
        <meta charset="UTF-8"/>