Table of contents
  1. TidBits
    1. Embed an HTML file into document
      1. Use Object Element
      2. Use Embed Element
      3. Use IFrame
      4. Use Javascript
      5. HTML Include
  2. Attributes
    1. hide element attribute
    2. Capture attribute to open your device camera
    3. Automatic website refresh
    4. Activate spellcheck
    5. Specify a file type to be uploaded
    6. Creating a poster (thumbnail) for your videos
    7. Automatically download on link Click
    8. JS Events As Attributes
      1. On Load (onload) / Window Load Event
      2. mouseover
  3. UI Elements



TidBits

Embed an HTML file into document

  • Use Object Element

      <object data="cssTricks.html" height="10000" type="text/html" width="1000"></object>

  • Use Embed Element

        
  <embed src="./HTMLSnippets/Nav.html" style="width:400px; height: 400px;"/>

  • Use IFrame

        
  <iframe
          src="./HTMLSnippets/Nav.html"
          style="width:400px; height: 400px;"
  ></iframe>

  • Use Javascript

      const response = await fetch("/path/to/template.html");
  const body = await response.text();
    
  document.querySelector("#some.selector").innerHTML = body;

  • HTML Include

    • HTML

            <div w3-include-html="content.html"></div>

      • HTML includes are done by JavaScript.

        • example using XMLHttpRequest

            <script>
      function includeHTML() {
          let z, i, elmnt, file, xhttp;
          /* Loop through a collection of all HTML elements: */
          z = document.getElementsByTagName("*");
          for (i = 0; i < z.length; i++) {
              elmnt = z[i];
              /*search for elements with a certain atrribute:*/
              file = elmnt.getAttribute("w3-include-html");
              if (file) {
                  /* Make an HTTP request using the attribute value as the file name: */
                  xhttp = new XMLHttpRequest();
                  xhttp.onreadystatechange = function () {
                      if (this.readyState === 4) {
                          if (this.status === 200) {
                              elmnt.innerHTML = this.responseText;
                          }
                          if (this.status === 404) {
                              elmnt.innerHTML = "Page not found.";
                          }
                          /* Remove the attribute, and call this function once more: */
                          elmnt.removeAttribute("w3-include-html");
                          includeHTML();
                      }
                  };
                  xhttp.open("GET", file, true);
                  xhttp.send();
                  /* Exit the function: */
                  return;
              }
          }
      }
        
      function ready(fn) {
          if (document.readyState !== "loading") {
              fn();
          } else {
              document.addEventListener("DOMContentLoaded", fn);
          }
      }
        
      ready(includeHTML);
  </script>

Attributes

hide element attribute

the hidden rule is a User Agent style, which means it's less specific than a moderate sneeze [ref]. This means that your favourite display style will override it
<p hidden></p>


<button>
    <span class="fa fa-tweet" aria-hidden="true"></span>
    <span class="label"> Tweet </span>
</button>

in the case of form data, an input type = “hidden”

<input type="hidden" id="postId" name="postId" value="34657"/>

Capture attribute to open your device camera

Just as the input tag has attributes for email, text and password, there is also an attribute to open the camera of
mobile devices to capture
images.

This is done with the capture attribute which can take two values:

  • user for the front camera.
  • environment for the back camera.
<input accept="image/*" capture="user" type="file">

Automatic website refresh

You can set your website to refresh after a given amount of time from the head tag!


<head>
    <meta content="10" http-equiv="refresh">
</head>

Activate spellcheck

You can use the HTML spellcheck attribute and set it to true to activate it. Specify the language to be used the lang
attribute.

<input type="text" spellcheck="true" lang="en">

Specify a file type to be uploaded

You can specify the file types users are permitted to upload in the input tag using the accepted attribute.

<input type="file" accept=".jpeg,.png">

Creating a poster (thumbnail) for your videos

With the poster attribute, you can create an image which is displayed while the video is downloaded, or until the user
hits the play button.

If this is not included, the first frame of the video will be used instead


<video poster="picture.png"></video>

If you want a particular resource to be downloaded when a link to the target resource is clicked, add the download
attribute

<a download href="image.png">

JS Events As Attributes

inline event in html tag


<div onMouseover="this.style.transform='scale(2)';">//content</div>

or


<div onmouseover="this.childNodes[1].childNodes[1].style.background='green';">
    //content
</div>

or


<div
        class="pdf-icon-box"
        onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green';"
        onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"
        style="position:relative;"
>
  <span class="pdf-style">
    <span class="name" style="display:inline-block;background-color:orange;">
      T E S T
    </span>
  </span>
</div>

On Load (onload) / Window Load Event

<!doctype html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>

<script>
    function myFunction() {
        alert("Page is loaded");
    }
</script>
</body>
</html>

or use an element and js

div.onload = Promise.resolve(addPadding(div, keyAsHeader
        ? 60
        : 71, 0));

mouseover

use js to create an element and add function to element event/attribute

div.onmouseover = (e) => (e.target.style.transform = "scale(2)");
div.onmouseout = (e) => (e.target.style.transform = "scale(1)");

pure js

addEventListener("mouseover", (event) => {
});
onmouseover = (event) => {
};

UI Elements

Buttons.

Text fields.

Checkboxes & Toggles.

Radio Buttons.

Tables.

Datepickers. (It's a pain)

Sliders.

Tabs.

Dropdowns

Pagination

Search inputs

Breadcrumbs.

Carousels.

Modals.

Cards.

Tooltips.

Navigation.

Loaders.

Forms.