[HTML] Prevent HTML examples from refreshing webpage on scrolling.

LukasBanana · Oct 19, 2024 · beaa19d · beaa19d
1 parent 161f89f
commit beaa19d
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 16 deletions.
diff --git a/docu/WebPage/Example_Animation/index.html b/docu/WebPage/Example_Animation/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - Animation</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_Fonts/index.html b/docu/WebPage/Example_Fonts/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - Fonts</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_HelloGame/index.html b/docu/WebPage/Example_HelloGame/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - HelloGame</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_PostProcessing/index.html b/docu/WebPage/Example_PostProcessing/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - PostProcessing</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_RenderTarget/index.html b/docu/WebPage/Example_RenderTarget/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - RenderTarget</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_ShadowMapping/index.html b/docu/WebPage/Example_ShadowMapping/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - ShadowMapping</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_StencilBuffer/index.html b/docu/WebPage/Example_StencilBuffer/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - StencilBuffer</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");

diff --git a/docu/WebPage/Example_Texturing/index.html b/docu/WebPage/Example_Texturing/index.html
@@ -2,7 +2,6 @@
 <html lang="en-US">
 <head>
     <meta charset="utf-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - Texturing</title>
     <style>
         canvas { 
@@ -14,6 +13,9 @@
             width: min(100%, 98vh * 4 / 3);
             aspect-ratio: 4 / 3;
         }
+        body {
+            overscroll-behavior: none 
+        }
     </style>
 </head>
 <body>
@@ -23,7 +25,7 @@
     </div>
 
     <!-- Define module to allow C++ code to access the canvas element -->
-    <script type="text/javascript">
+    <script>
         var Module = {
             print: function() {
                 var e = document.getElementById("output");