diff options
author | johannst <johannst@users.noreply.github.com> | 2024-02-15 23:29:57 +0000 |
---|---|---|
committer | johannst <johannst@users.noreply.github.com> | 2024-02-15 23:29:57 +0000 |
commit | bac8a5d2822835cf47175d1162030653fadd5c09 (patch) | |
tree | 28f312a114cf95ac799daac2a2caec4b8612d84d /web | |
parent | bfc5ce4bc01e5eb28969eefcc01ecfefa2601fdf (diff) | |
download | notes-bac8a5d2822835cf47175d1162030653fadd5c09.tar.gz notes-bac8a5d2822835cf47175d1162030653fadd5c09.zip |
deploy: 4485708c972815bbb6df7f5a228683aa855d553d
Diffstat (limited to 'web')
-rw-r--r-- | web/chartjs.html | 12 | ||||
-rw-r--r-- | web/css.html | 18 | ||||
-rw-r--r-- | web/html.html | 52 |
3 files changed, 41 insertions, 41 deletions
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 @@ <h1 id="chartjs"><a class="header" href="#chartjs">Chart.js</a></h1> <h2 id="minimal-example-with-external-tooltips"><a class="header" href="#minimal-example-with-external-tooltips">Minimal example with <em>external</em> tooltips</a></h2> <p><a href="src/chartjs-ext-tooltip.html">Rendered html</a></p> -<pre><code class="language-html"><canvas id="myChart" style="margin:5em;"></canvas> +<pre><code class="language-html"><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 @@ <h1 id="css"><a class="header" href="#css">css</a></h1> <h2 id="selector"><a class="header" href="#selector">selector</a></h2> <p><code>.moose</code> element with class</p> -<pre><code class="language-html"><div class = "moose"></div> // selected -<div class = "bar"></div> // NOT selected +<pre><code class="language-html"><div class = "moose"></div> // selected +<div class = "bar"></div> // NOT selected </code></pre> <p><code>.moose.bar</code> element with multiple classes</p> -<pre><code class="language-html"><div class = "moose bar"></div> // selected -<div class = "bar"></div> // NOT selected +<pre><code class="language-html"><div class = "moose bar"></div> // selected +<div class = "bar"></div> // NOT selected </code></pre> <p><code>.moose .bar</code> descendant element with classes</p> -<pre><code class="language-html"><div class = "moose"> - <div class = "bar"></div> // selected +<pre><code class="language-html"><div class = "moose"> + <div class = "bar"></div> // selected </div> -<div class = "bar"></div> // NOT selected +<div class = "bar"></div> // NOT selected </code></pre> <p><code>p</code> specific element</p> <pre><code class="language-html"><p></p> // selected <div></div> // NOT selected </code></pre> <p><code>p.bar</code> specific element with class</p> -<pre><code class="language-html"><p class = "bar"></p> // selected -<p class = "foo"></p> // NOT selected +<pre><code class="language-html"><p class = "bar"></p> // selected +<p class = "foo"></p> // NOT selected </code></pre> <p><code>p,div</code> any element</p> <pre><code class="language-html"><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 { <p><a href="src/tabs.html">Rendered html</a></p> <pre><code class="language-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> </code></pre> |