Welcome to the mine useful documentation for daily work on web developer and computer programming. Thanks to PrettyDocs for theme template layout; download it at the page linked in the button below.
Download PrettyDocsPrismJS is used as the syntax highlighter here. You can build your own version via their website should you need to.
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();
}
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)`
}
});
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 */
}