Daily Use - Notes
Printing PDF using JavaScript #
For printing the PDF using JS we need to use the following code. In which we have used a input tag and onClick of that input we have called the div id which we want to print.
<section>
<div id="printContent">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum quisquam esse natus error beatae
tempore perspiciatis maxime, doloremque dicta quo obcaecati officia amet. Reiciendis
necessitatibus qui voluptatem excepturi mollitia provident at hic quia earum, architecto odio
quidem doloremque atque officia porro.
</p>
</div>
<input type="button" onclick="printDiv('printContent')" value="Click me to get the PDF!" />
</section>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Hide a div from printing a webpage using CSS #
@media print {
.noprint,
.noprint * {
display: none !important;
height: 0;
}
}
/*****
We can also use :
1. [ visibility: hidden; ]
2. Bootstrap 5 class : [ .d-print-none ]
3. If you don't want to use CSS you can use show/hide with JavaScript.
******/
Appending a div to the body of a webpage using JavaScript #
$("body").append(
"<div style='position:absolute;width:100%;height:100%;z-index:1000;top:0;left:0;'></div>"
);
/*
Use Case : When we want to disable something at the time of AJAX Call.
*/
Reloading iframe using JavaScript #
document.getElementById("iFrameID").contentDocument.location.reload(true);
/* In place of [ iFrameID ] you need to pass your own iframe id */
Clear the content of an iframe using JavaScript #
$("iFrameID").contents().find("body").html("");
/* In place of [ iFrameID ] you need to pass your own iframe id */
Filename too long in Git for Windows #
git config --system core.longpaths true
Stash some untracked file in Git for Windows #
git stash save --keep-index --include-untracked
Update image path in JQuery #
<div style="margin: 50px" class="container">
<h2 type="button"
id="updateimg"
style="
outline: none;
border: none;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
"
>
Click me
<img id="update" height="300" width="auto" src="./assets/jpg/img1.jpg" style=" padding-left: 50px;"/>
</button>
</div>
var plus = "/assets/jpg/img1.jpg";
var minus = "/assets/jpg/img2.jpg";
$("#updateimg").click(function () {
var test = $(this).parent(".container").find("#update");
if (test.attr("src") === plus) {
test.attr("src", minus);
} else {
test.attr("src", plus);
}
});
Install angular project in same directory #
ng new yourAppName --directory ./
Resourse :