Javascript - how to add header in CallPrint function - javascript

I have javascript function:
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'left=0, top=0, width=970, height=500, toolbar=0, scrollbars=0, status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
</script>
and in the button:
onClick="javascript:CallPrint('printarea')"
Now is working and I can print certain part of the page, but I want to add header with logo and some contact information which show only when print the page.

Use the #media print CSS tag. Essentially create a style which has display:none and in #media print make it visible.
Something like:
<style media="screen">
.onlyPrint{ display: none; }
</style>
<style media="print">
.onlyPrint{ display: block; }
</style>
You call your javascript as regular and depending on whether the rendition is on the screen or the printer, the CSS will handle the show/hide of the header with logo

Related

Display webpage only on Desktop

I have created a webpage using HTML, CSS, JS (Paper.js)
But I want my webpage to be displayed only when opened in desktop sites
if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded
because in touch screen devices all functions does not work properly
link to my webpage is -
https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
#media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap.com/docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>
add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>

Make the command bar unresponsive

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.
In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.
Does anyone know how to make the command bar unresponsive?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function () {})
</script>
</body>
</html>
By default the text is set to not display in the css. Ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: none;
}
Then they using media queries to only show those elements when the width is over 640px
ie:
#media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
<style>
.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
.ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
</style>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function() {})
</script>
</body>
</html>
This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.

print a document using javascript

Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
add a wrapper to non-printable stuff i.e buttons in your case. check below code :
<head>
<style type="text/css">
#printable {
display: none;
}
#media print {
#non-printable {
display: none;
}
#printable {
display: block;
}
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Hope it helps.
Use CSS #media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
#media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer #media print
Additional reference
You can specify different css rules for printing. Either you can use the #media print {} scope like this:
#media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling
window.print():
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}

Print image from Javascript

i have some images .... the size of each image is different
For example:
img1 = 200 x 1900
img2 = 1800 x 400
img3 = 600 x 800
// HTML
<html>
<body>
<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
</body>
</html>
// javascript
var mywindow = window.open('', 'my div');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
data = "<img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'>";
mywindow.document.write(data); // data = all image
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
Now the output is all images printed but the sizes is corrupted
how can i print each image in page A4 and print it fitted in page (A4)
You can define CSS rules for printing and base the dimensions on 21cm x 29.7cm.
For example :
<style type="text/css">
#media print {
img {
max-width: 18cm;
max-height: 8cm;
}
}
</style>
Note that if your page is simple enough, you don't have to build a new layout in a new window as you can simply define different rules for #media print and #media screen.
You can't. Websites are created for screens, not printers.
However you could force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 842px;
width: 595px;
/* to centre page on screen*/
margin-left: auto;
margin-right: auto;
}
</style>
<head>
<body>
</body>
</html>
The best solution for printing, is to use PDFs, that's what they are for. Create a PDF that has the same data. You have full control over the print format in that case.

print Selected data from web page

I want to print the data of selected div instead of whole page,
I am using window.print() but its printing the whole web page.
Do as shown in following example:
<html>
<head>
<style type="text/css" media="print">
#media print
{
#non-printable { display: none; }
#printable {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="printable" >
Your content to print
</div>
<div id='non-printable'>
this is not printable section
</div>
<input type="button" id="non-printable" class=normaltext onclick="JavaScript:window.print();" value="print" />
</body>
</html>
for more detail or download visit the site:
http://blog.developeronhire.com/print-selected-div-in-web-page/
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
How about writing a style sheet for print and set it up to show the relevant elements on the page.
If you know which segments you want to print before hand, you can use media based CSS to hide unwanted segments of the page in print. Have a look at
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm

Categories

Resources