From bac8a5d2822835cf47175d1162030653fadd5c09 Mon Sep 17 00:00:00 2001 From: johannst Date: Thu, 15 Feb 2024 23:29:57 +0000 Subject: deploy: 4485708c972815bbb6df7f5a228683aa855d553d --- web/chartjs.html | 12 ++++++------ web/css.html | 18 +++++++++--------- web/html.html | 52 ++++++++++++++++++++++++++-------------------------- 3 files changed, 41 insertions(+), 41 deletions(-) (limited to 'web') diff --git a/web/chartjs.html b/web/chartjs.html index a30e67b..53ef44d 100644 --- a/web/chartjs.html +++ b/web/chartjs.html @@ -179,7 +179,7 @@

Chart.js

Minimal example with external tooltips

Rendered html

-
<canvas id="myChart" style="margin:5em;"></canvas>
+
<canvas id="myChart" style="margin:5em;"></canvas>
 
 <script>
 const get_or_create_tooltip = (id) => {
@@ -215,12 +215,12 @@ const render_tooltip = (context) => {
 
   // -- Format new tooltip.
   const link = document.createElement('a');
-  link.href =  "https://github.com/johannst";
-  link.innerHTML = "X:" + x + " Y:" + y;
+  link.href =  "https://github.com/johannst";
+  link.innerHTML = "X:" + x + " Y:" + y;
 
   // -- Remove previous child element and add new one.
   const table = tooltip_elem.querySelector('table');
-  table.innerHTML = ""; 
+  table.innerHTML = ""; 
   table.appendChild(link);
 
   // -- Get absolute X/Y position of the top left corner of the canvas.
@@ -232,9 +232,9 @@ const render_tooltip = (context) => {
   tooltip_elem.style.font = tooltip.options.bodyFont.string;
 
   // -- Place the tooltip (I) left or (II) right of the data point.
-  if (tooltip.xAlign === "right") {
+  if (tooltip.xAlign === "right") {
     tooltip_elem.style.transform = 'translate(-100%, 0)'; // (I)
-  } else if (tooltip.xAlign === "left") {
+  } else if (tooltip.xAlign === "left") {
     tooltip_elem.style.transform = 'translate(0%, 0)';    // (II)
   }
 }
diff --git a/web/css.html b/web/css.html
index 6f63a1f..d7e2a84 100644
--- a/web/css.html
+++ b/web/css.html
@@ -179,26 +179,26 @@
                         
css

 
selector

 
.moose element with class

-
<div class = "moose"></div>  // selected
-<div class = "bar"></div>    // NOT selected
+
<div class = "moose"></div>  // selected
+<div class = "bar"></div>    // NOT selected
 

 
.moose.bar element with multiple classes

-
<div class = "moose bar"></div>  // selected
-<div class = "bar"></div>        // NOT selected
+
<div class = "moose bar"></div>  // selected
+<div class = "bar"></div>        // NOT selected
 

 
.moose .bar descendant element with classes

-
<div class = "moose">
-    <div class = "bar"></div>  // selected
+
<div class = "moose">
+    <div class = "bar"></div>  // selected
 </div>
-<div class = "bar"></div>      // NOT selected
+<div class = "bar"></div>      // NOT selected
 

 
p specific element

 
<p></p>      // selected
 <div></div>  // NOT selected
 

 
p.bar specific element with class

-
<p class = "bar"></p>  // selected
-<p class = "foo"></p>  // NOT selected
+
<p class = "bar"></p>  // selected
+<p class = "foo"></p>  // NOT selected
 

 
p,div any element

 
<p></p>      // selected
diff --git a/web/html.html b/web/html.html
index 8893bfc..0bc7cb4 100644
--- a/web/html.html
+++ b/web/html.html
@@ -206,11 +206,11 @@
   padding-left: 1em;
 }
 </style>
-<div class="grid-2col">
-  <div class="col1">
+<div class="grid-2col">
+  <div class="col1">
     <p>Some text in the first column.</p>
   </div>
-  <div class="col2">
+  <div class="col2">
     <p>Some text in the second column.</p>
   </div>
 </div>
@@ -222,9 +222,9 @@
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-areas:
-      "h h"
-      "s m"
-      "f f";
+      "h h"
+      "s m"
+      "f f";
   gap: 1em;
 }
 .gh {
@@ -253,21 +253,21 @@ p {
   margin: 1em;
 }
 </style>
-<div class="page-grid">
-  <div class="gh">
-      <ul class="nav-items">
-          <li class="nav-item"><a href="">aa</a></li>
-          <li class="nav-item"><a href="">bb</a></li>
-          <li class="nav-item"><a href="">cc</a></li>
+<div class="page-grid">
+  <div class="gh">
+      <ul class="nav-items">
+          <li class="nav-item"><a href="">aa</a></li>
+          <li class="nav-item"><a href="">bb</a></li>
+          <li class="nav-item"><a href="">cc</a></li>
       </ul>
   </div>
-  <div class="gs">
+  <div class="gs">
     <p>Some text in the second column.</p>
   </div>
-  <div class="gm">
+  <div class="gm">
     <p>Some text in the second column.</p>
   </div>
-  <div class="gf">
+  <div class="gf">
     <p>Some text in the second column.</p>
   </div>
 </div>
@@ -277,32 +277,32 @@ p {
 
Rendered html

 
<script>
 const showTab = (E, T) => {
-    const TABS = Array.from(document.getElementsByClassName("content"));
+    const TABS = Array.from(document.getElementsByClassName("content"));
     TABS.forEach(T => {
-        T.style.display = "none";
+        T.style.display = "none";
     });
 
-    document.getElementById(T).style.display = "block";
+    document.getElementById(T).style.display = "block";
 };
 
 window.onload = () => {
-    document.getElementById("bTab1").onclick = (E) => {
-        showTab(E, "tTab1");
+    document.getElementById("bTab1").onclick = (E) => {
+        showTab(E, "tTab1");
     };
-    document.getElementById("bTab2").onclick = (E) => {
-        showTab(E, "tTab2");
+    document.getElementById("bTab2").onclick = (E) => {
+        showTab(E, "tTab2");
     };
 }
 </script>
 
-<button type="button" id="bTab1">Tab1</button>
-<button type="button" id="bTab2">Tab2</button>
+<button type="button" id="bTab1">Tab1</button>
+<button type="button" id="bTab2">Tab2</button>
 
-<div id="tTab1" class="content" style="display: block;">
+<div id="tTab1" class="content" style="display: block;">
     <p>Some content goes here ...</p>
 </div>
 
-<div id="tTab2" class="content" style="display: none;">
+<div id="tTab2" class="content" style="display: none;">
     <p>... and there.</p>
 </div>
 

-- 
cgit v1.2.3