From cf2193e2d315d442c7bc7948cab5ee0151ec7c6c Mon Sep 17 00:00:00 2001 From: Zachary Vance Date: Fri, 21 Jul 2023 17:00:00 -0400 Subject: [PATCH] Add things --- html-css-cheatsheet.html | 186 ++++++++++++++++++++++++++++++++++----- 1 file changed, 166 insertions(+), 20 deletions(-) diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html index a9347e5..e58b662 100644 --- a/html-css-cheatsheet.html +++ b/html-css-cheatsheet.html @@ -63,18 +63,24 @@ .noanimate * { animation: none !IMPORTANT; } - div.demo.resizeh.resizev { + + .cheatsheet > div:hover div.demo.resizeh.resizev { animation: resizer-v 2s ease-in-out infinite alternate, resizer-h 1.5s ease-in-out infinite alternate; } - div.demo.resizeh { + .cheatsheet > div:hover div.demo.resizeh { animation: resizer-h 1.5s ease-in-out infinite alternate; + } + .cheatsheet > div:hover div.demo.resizev { + animation: resizer-v 2s ease-in-out infinite alternate; + } + + div.demo.resizev { margin-bottom:0; - height: 70%; + height: 100%; margin-right: 30%; } - div.demo.resizev { - animation: resizer-v 2s ease-in-out infinite alternate; + div.demo.resizeh { width: 100%; } pre.demo { @@ -105,25 +111,32 @@ margin-left: 0; border-left: 0; } + label { + margin-right: 1em; + } + form > div:not(:first-child) { + padding-top: 0.5em; + border-top: 1px solid; + } @keyframes resizer-v { 0% { - height: 50%; - margin-bottom: 10%; /* Because margin-bottom is a percentage of WIDTH */ + height: 100%; + margin-bottom: 0%; } 100% { - height: 100%; - margin-bottom: 0; + height: 50%; + margin-bottom: 10%; /* Because margin-bottom is a percentage of WIDTH */ } } @keyframes resizer-h { 0% { - width: 50%; - margin-right: 50%; - } - 100% { width: 100%; margin-right: 0; } + 100% { + width: 50%; + margin-right: 50%; + } } .noprint { color: grey; } @@ -446,7 +459,70 @@ span { font-size: larger; }
-

TODO: Forms and Form Elements

+

Form Elements

+
+
+ 
<input type="text" placeholder="placeholder"/>
+
+ 
<input type="checkbox" checked="checked"/>
+$("input[type=checkbox]").attr("checked");
+
+ 
<input type="password" placeholder="password"/>
+
+ 
<input type="file"/>
+
+ 
<input type="range" min="1" max="100" value="50"/>
+
+ + + + + + + + + + + + + +
+ 
<input type="range" min="0" max="100" value="50" 
+       list="tickmarks"/>
+<datalist id="tickmarks">
+    <option value="0"></option>
+    <option value="10"></option> ...
+</datalist>
+
+ 
<select>
+    <option value="a">option a</option>
+    <option value="b" selected>option b</option>
+    <option value="c">option c</option>
+</select>
+
+ + 
<textarea>This is a freeform text area</textarea>
+
+
+ 
<button type="button">Button</button>
+
+ +
+

Forms

+ <form> can be used on its own to submit POST, GET, and mailto: emails. + 
<form action="/do_thing.html" method="post">
+    <input type="hidden" name="key" value="value">
+    <input type="submit" value="Submit">
+</form>
+ Now form elements are more often used as javascript input, or submitted via AJAX. + + 
$("button").on("click", ...)
+$("input[type=text]").on("input", ...)
+$("textarea").val();
@@ -458,15 +534,67 @@ span { font-size: larger; }
-

TODO: Tables and CSS

-
+

Tables and CSS

-
-

TODO: Thin Columns and Readability

+ + + + + + + +
StateAbbreviationBird
AlabamaALYellowhammer
AlaskaAKWillow ptarmigan
ArizonaAZCactus wren
ArkansasARNorthern mockingbird
+ 
table              { border-collapse: collapse; }
+td, th             { border: 1px solid grey;
+                     padding: 5px 10px; }
+/* Browser typically bolds & centers th already */
+th, td:first-child { font-weight: bold; 
+                     text-align: center;
+                     background-color: #eaecf0; }
+tr:nth-child(odd)  { background-color: lightyellow; }
-

TODO: CSS Selector Reference

+

Readability: One Thin Column

+ +
div.main-column {
+    font-size: 18px;
+    line-height: 24px; /* 1.6x font height */
+    max-width: 75em;
+}
+
@@ -478,7 +606,25 @@ span { font-size: larger; }
-

TODO: Adding JS+CSS Dynamically

+

TODO: CSS Selector Reference

+
+ +
+

Adding CSS and JS Dynamically

+ + <style>, <link>, or <script> tags can be inserted at runtime by javascript. + +
var script = document.createElement('script');
+script.src = 'https://.../jquery.min.js';
+document.appendChild(script);
+ + +

Or, it's often easier to style elements directly. Jquery is especially good for this: + + 

$("button").on("click", () => {
+    $("div").toggleClass("animated");
+    $("span.error").css("color", "red");
+}
-- 2.47.3