HTML
GitBook docs section concerning HTML context.
Dynamic Form
Forms with dynamic addition of new fields (and removal).
<div id="wrapper">
<div id="form">
<form method="post" action="action.php">
<table id="employee_table">
<tr>
<td><input type="text" name="name[]" placeholder="Enter Name"></td>
<td><input type="text" name="age[]" placeholder="Enter Age"></td>
<td><input type="text" name="job[]" placeholder="Enter Job"></td>
</tr>
</table>
<input type="button" value="ADD ROW" onclick="addRow()">
<input type="submit" value="submit_row" value="SUBMIT">
</form>
</div>
</div>
function add_row()
{
rowno = $("#employee_table tr").length;
rowno = rowno + 1;
$("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='name[]' placeholder='Enter Name'></td><td><input type='text' name='age[]' placeholder='Enter Age'></td><td><input type='text' name='job[] 'placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#' + rowno).remove();
}
Button Video Overlay
Simple video overlay with play icon.
<div class="wrapper">
<video class="video">
<source src="video.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
.video {
width: 100%;
border: 1px solid black;
}
.wrapper {
display: table;
width: auto;
position: relative;
width: 50%;
}
.playpause {
background-image: url(play.png);
background-repeat: no-repeat;
width: 50%;
height: 50%;
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
margin: auto;
background-size: contain;
background-position: center;
}
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut();
}
else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
Custom Cursor
Replace cursor pointer with custom svg.
<div id="cursor">
<img alt="Cursor Hand" src="castom-cursor.svg"/>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
* {
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 8.33vh;
}
.left,
.right,
.container {
width: 100%;
height: 100%;
}
.container {
display: flex;
cursor: none;
* {
cursor: inherit;
}
}
.left {
background-color: #fafaaa;
}
.right {
background-color: #aafafa;
}
#cursor {
position: absolute;
left: -42px;
top: -48px;
will-change: transform;
pointer-events: none;
img {
will-change: transform;
transition: all 0.5s cubic-bezier(0.6, 1.46, 0.53, 0.92);
opacity: 0;
width: 96px;
height: 96px;
}
}
let currentCursorPos;
const cursorEl = document.querySelector("#cursor");
const cursorImageEl = document.querySelector('#cursor > img');
window.addEventListener("mousemove", event => {
currentCursorPos = { x: event.clientX, y: event.clientY };
if (document.querySelector(".container:hover")) {
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
cursorImageEl.style.opacity = "1";
cursorEl.style.display = "inline-block";
} else {
cursorEl.style.display = "none";
}
if (document.querySelector(".left:hover")){
cursorImageEl.style.transform = `rotate(-270deg)`;
} else if (document.querySelector(".right:hover")){
cursorImageEl.style.transform = `rotate(-90deg)`;
} else {
cursorImageEl.style.transform = `rotate(180deg)`;
}
});
Modal
Simple modal created from scratch.
<a href="#" class="js-open-modal">open modal</a>
<div class="modal">
<div class="modal_header">
modal header
<a href="#" class="js-close-modal">X</a>
</div>
<p>hey there, I'm the modal</p>
</div>
body {
background: #00E5FF;
padding: 20px;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
width: 320px;
height: 320px;
text-align: center;
box-sizing: border-box;
box-shadow:0 0 20px rgba(0,0,0,.2);
&.visible {
display: block;
}
}
.modal_header {
color:white;
background: #333;
line-height: 50px;
text-align: center;
position: relative;
height: 50px;
box-sizing: border-box;
a {
position: absolute;
top: 0;
right: 0;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
padding: 0 20px;
font-size: 16px;
background: #555;
height: 100%;
}
}
$(".js-open-modal").click(function(){
$(".modal").addClass("visible");
});
$(".js-close-modal").click(function(){
$(".modal").removeClass("visible");
});
$(document).click(function(event) {
// if you click on anything except the modal itself or the "open modal" link, close the modal
if (!$(event.target).closest(".modal,.js-open-modal").length) {
$("body").find(".modal").removeClass("visible");
}
});
For disabling events on background when modal is showing up, wrap it in a div ("overlay") with style like this:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgbba(128,128,128,0.5);
display none; /* make it hidden by default, make it visible when modal pops up */
}
HTML anchor with Map reference
To insert an anchor element with maps reference in HTML page use the code below. The same logic is reusable for mailto
and tel
.
<a href="map:21th,High Street, London">Location</a>
HTML Accordion element
<details>
<summary>Open Me</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec auctor est. Suspendisse sit amet urna neque. Integer non urna vel metus faucibus placerat ac in sapien.</p>
</details>
HTML Progress Bar element
<label for="ability">Web Dev Skills</label>
<progress id="ability" value="50" max="100"></progress>
Last updated