Web developer specializing in React, Vue, and front end development.
To disable browser print options (headers, footers, margins) from page with CSSm we set the @page rule.
For instance, we write
<style type="text/css" media="print">
@page {
size: auto;
margin: 0mm;
}
html {
background-color: #ffffff;
margin: 0px;
}
body {
border: solid 1px blue;
margin: 10mm 15mm 10mm 15mm;
}
</style>
to set the margin to 0mm in the @page block to hide all the margins when printing.
To add horizontal scrollbar on top and bottom of table with CSS, we set the transform property.
For instance, we write
.parent {
transform: rotateX(180deg);
overflow-x: auto;
}
.child {
transform: rotateX(180deg);
}
to rotate the element with class parent 180 degrees with transform: rotateX(180deg);.
And we rotate the element with class child in the element with class parent 180 degrees with transform: rotateX(180deg);.
To open window.location in new tab with JavaScript, we call the window.open method.
For instance, we write
window.open("https://example.com", "_blank");
to call window.open with the URL to open and '_blank' to open the URL in a new window or tab.
To show Page Loading div until the page has finished loading with JavaScript, we set the display property of the loading div.
For instance, we write
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
to add a div with a loading image.
Then we write
window.onload = () => {
document.getElementById("loading").style.display = "none";
};
to set window.onload to a function that selects the div with getElementById and hide it by setting style.display to 'none'.
window.onload is called when the page is loaded.
To detect Ctrl+V, Ctrl+C using JavaScript, we listen for keypresses on the window.
For instance, we write
window.onkeypress = (evt) => {
const c = evt.keyCode;
const ctrlDown = evt.ctrlKey || evt.metaKey;
if (ctrlDown && evt.altKey) {
return true;
} else if (ctrlDown && c === 67) {
// c
return false;
} else if (ctrlDown && c === 86) {
// v
return false;
} else if (ctrlDown && c === 88) {
// x
return false;
}
return true;
};
to set window.onkeypress to a function that checks for various keys.
We check for ctrl or meta key press with evt.ctrlKey || evt.metaKey.
And then we check for keyCode for the 2nd key if ctrlDown is true.
If keyCode is 67, then c is pressed.
If keyCode is 86, then v is pressed.
If keyCode is 88, then x is pressed.
We return false if any of those are true to stop the behavior of copy and paste.
Otherwise, we return true.