Table of contents
TidBits
embed, inject, or load an HTML file into HTML document using object tag
<object data="css.html" height="10000" type="text/html" width="1000"></object>
<embed src="./HTMLSnippets/Nav.html" style="width:400px; height: 400px;"/>
<iframe
src="./HTMLSnippets/Nav.html"
style="width:400px; height: 400px;"
></iframe>
load html into page
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>
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
<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:
userfor the front camera.environmentfor 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>
Automatically download on link Click
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.
UNBELIEVABLE article @smashingmag is a golden resource really.
Tabs.
Dropdowns
Pagination
Search inputs
Breadcrumbs.
Carousels.
Carousel/slider design best practices (with examples) by @webflow
Carousel Usability: Designing an Effective UI for Websites with Content Overload