Daily Use - Notes

2 min read

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);
}
});

Resourse :


Thanks for reading !!! 😊
Share this post :