iframed solution

rando128 · Jul 13, 2021 · f384b14 · f384b14
1 parent df0a8c9
commit f384b14
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/demos.html b/demos.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="es" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Examples</title>
+
+    <link rel="stylesheet" href="css/vendor/reset.css">
+    <link rel="stylesheet" href="css/main.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet">
+
+    <style type="text/css">
+    button {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: bisque;
+      border-radius: 50px;
+      height: 25px;
+    }
+    iframe {
+        -webkit-transition: width 3s; /* For Safari 3.1 to 6.0 */
+        transition: width 3s;
+        border:  1px solid grey;
+    }
+    .minimized {
+        width: 320px;
+    }
+    </style>
+
+  </head>
+  <body>
+    <button onclick="animation()">Change device size</button>
+    <iframe src="" width="100%" height="1020px"></iframe>
+        <script type="text/javascript">
+
+      const iframeElt = document.getElementsByTagName("iframe")[0]
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      const params = Object.fromEntries(urlSearchParams.entries());
+
+      iframeElt.src = window.location.origin + "/section-" + params.demo + ".html" 
+      iframeElt.height = params.height
+
+      let animated = false;
+
+      function animation() {
+        if (!animated) {
+          animated = true
+          iframeElt.classList.add("minimized")
+          setTimeout(function() {
+              iframeElt.classList.remove("minimized");
+              setTimeout(function() {
+                animated = false
+              }, 3000)
+          }, 3500);
+        } else {
+          animated = false
+          iframeElt.classList.remove("minimized");
+        }
+      }
+
+    </script>
+  </body>
+</html>
diff --git a/section-two.html b/section-two.html
@@ -11,7 +11,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet">
-
   </head>
   <body>
     <section id="two">