I have create one div, inside that there are some css applied (through the css file). Now I want to print that particular div from the whole page. The problem which I'm facing that all the css classes are applied in print dialog but background color is not applied.
Here is my code block of print button which opens a default print dialog:
$("#btnPrint").click(function () {
var contents = $("#Call").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>Call</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="../css/abc.css" rel="stylesheet" type="text/css">');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);});
Here is the my div on page:
Here is the print dialog which shows the preview of the div:
Please help me to apply background print dialog.
Thanks
Option 1:-
If you dont mind about browser compatibility then use
-webkit-print-color-adjust: exact;
this will work only in chrome
Option 2:-
To make it printable(with image and colors) in all browsers you have to make the whole printing elements without background image and background colors.
Instead of them use image tag and border colors with #media print (read more)
Manual Options:-
you have to manually check the print background (Chrome : "background graphics", Firefox : "Print Background") while printing. this will display both background colors and background images. we can not control printing through code if you concern about browser compatibility.
Chrome:-
Firefox:-
[
for chrome and safari you can force printing background color by -webkit-print-color-adjust property rule, for example
body {
-webkit-print-color-adjust: exact;
}
read more about it here
Related
I want to set a svg image as background image in my React project. However the code is not working. I have tried the following ways:
import log_bg from './Login background.svg'
useEffect(() => {
document.body.style.background = `url(${log_bg})`
}, [])
Method 2.
<div style = {{backgroundImage: `url(${log_bg})`}}>
TEXT
</div>
I have also tried using only background tag instead of backgroundImage. I have also tried background: log_bg [also backgroundImage: log_bg], but it also does not works. How to fix this?
In my site i have this problem:
I want that all pages is scrollable if the device have a touch display. My site run into IE
I try with apply touch-action pan-y on my principal div but no result.
Add style to head of your html document
<style>.tst{overflow: hidden;}</style>
Add this line in body tag
<body class="tst" onload ="NoScroll()">
//content here
Add this inside script tags
function noScroll() {
var page = document.getElementsByTagName("body")[0];
if ('ontouchstart' in document.documentElement) {
console.log("touch device detected");
page.classList.remove("tst");
}
else{
console.log("desktop mode");
page.classList.add("tst");
}
}
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
When showing the printing preview in IE11 with enabled compatibility view and quirks mode some input elements won't be filled although there are values set in the page.
The problem only occures when the document to be printed exceeds one page. When adjusting preview zoom to fit the content onto one page, the input fields will be filled. Furthermore, when compatibility mode is disabled the problem won't exist, too.
Has anybody got an idea how to fix this issue?
We also encountered this problem in IE11 Compatibility mode.
This is how we solve the issue:
We find that if we set position:absolute with left or top in #media print section of CSS, this problem will occur
The fix is to override the window.onbeforeprint and window.onafterprint in IE11
All other elements are set to display:none during window.onbeforeprint
The elements are set to display:block during window.onafterprint
The above answer did absolutetly nothing for me.
I "fixed" the issue with the following snippet of javascript code.
window.onbeforeprint = function () {
if (document.documentMode == '5') {
$('input[type=text]').each(function (i, v) {
var input = $(v);
var replacer = $(document.createElement('div'));
replacer.css({ border: '1px solid black', fontSize: '10px', padding: '2px 3px' });
replacer.append(input.val() != '' ? input.val() : ' ');
input.before(replacer);
input.hide();
});
}
}
What this code does is "replace" every single <input type="text" value="{value}"> in the printed window with a <div style="font-size:10px;border:1px solid black;padding:2px 3px">{value}</div>.
The document.documentMode == '5' can be omitted if you don't want to limit it to IE5 compability mode.
The input field is merely hidden, so it is still in the DOM if you need it.
I'm working with raphael.js to draw and I want to modify the title attribute (change color, font size, etc., ).
circle.attr({
title: 'This is a circle.',
fill: 'red'
});
Here's my jsfiddle.
Is there a way to do this? Or maybe add custom tooltips to raphael objects?
Edit: Here's an expected modification: I wanna print "Hello World" on my tooltip. "Hello" in red, then a "new line" character and finally, "World" in blue color.
This doesn't work but might help to get an idea on what I'm trying to do.
circle.attr({
title:"<font color="red">Hello</font><br><font color="blue">World!</font>"
});
Raphael does not have shorthand functions for this, but you can very easily alter the rendered SVG elements by simple DOM manipulation :
circle.node.onmouseover = function() {
this.style.cursor = 'pointer'
this.querySelector('title').textContent = 'This is a new title';
}
forked (now actually working) fiddle -> http://jsfiddle.net/nheL8add/
Update : I now realize that you are actually asking : "does a HTML element title attribute supports HTML?" (I was totally focusing on changing the title element, not the part efter "Edit"). The answer is no. The title attribute of a circle element is completely the same as any other title attribute in all other HTML elements. But you can use a tooltip script like qTip2 or similar to get the desired effect. I recommend qtip2 since it support <SVG> elements. Skip the title attribute on the circle element itself and use qTip2 instead :
$("#canvas circle").qtip({
style: { classes: 'tooltip' },
content: { text: '<font color="red">Hello</font><br><font color="blue">World!</font>' },
position:{ my:'center center', at:'center center' },
show: 'mousemove mouseenter mouseover'
});
yet another forked fiddle -> http://jsfiddle.net/ajLnhete/