I am trying to print a div using javascript but it's not printing the css background images.
Here is my code. I would like to print the div with it's properties.
Thanks. Any help is highly appreciated.
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").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>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="IDCard.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);
});
});
</script>
<input type="button" id="btnPrint" value="Print" />
<div class="container" id="dvContents">
<div class="padding">
<div class="font">
SOME CONTENT HERE
</div>
</div>
</div>
Often browsers will not print backgrounds by default.
When you are in your browser's print you will probably find an option to print backgrounds.
On my Edge on Windows 10 looking at this page this is what I found (needed to scroll down and select 'More Options').
There is a checkbox to select background printing.
Related
I have two controls on my web page. The style of those two controls is set to display none. I want to display these two controls when printing, but I don't want these controls to show up on my web page. whenever I invoke the print function, these two controls show up on the print page, but they also show up on the web page whenever I am done printing. Below is my web page code:
<div id="test">
<span style="display:flex">
<img id="PARLogo" style="display:none" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70" runat="server" >
<span id="compName" runat="server" style="font-size:25px;color:black;width:100%; display:none"><span style="color:black"> city of test</span><br /> Test company</span>
</span>
</div>
<input type="button" id="btnPrint" value="Print" />
Below is the code to print the div tag:
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
var contents = $("#test").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>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.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);
});
});
</script>
as you can see, I am making these two controls "PARLogo" and "compName" visible n javascript, but they are invisible in a web page. Not sure why, but these controls are invisible when the page loads, but as soon as I click on the print button, these two controls appear on the regular web page too which I don't want.
any help will be greatly appreciated.
have you tried css media query "print"?
#media print {
/* print specific styles go here */
}
or reset these:
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
.....
frame1.remove();
document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
document.getElementById('<%=compName.ClientID %>').style.display = "none";
I am trying to add the CSS(width:100%) using jquery into an iframe. But don't know where I am doing wrong. I tried the below mentioned code to add the CSS in an iframe using jquery.
HTML File
<div class="col-md-12">
<div class="page-content ask-question" style="margin-top: 5px;">
<div id="preview-container" style="height: 342px;">
</div>
</div>
</div>
Jquery code
$('.ace_text-input').keyup(function(e) {
delay(function(){
var html1 = buildSource(html, js, css);
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.frameBorder="0";
iframe.height = 496;
iframe.css='width:100%;';
iframe.className = 'preview-iframe';
$('.preview-iframe').remove();
$('div#preview-container').append(iframe);
iframe.contentWindow.document.open('text/html', 'replace');
iframe.contentWindow.document.write(html1);
iframe.contentWindow.document.close();
},1000);
});
Instead of
iframe.css='width:100%;';
I Write this
iframe.setAttribute( "Style", "width : 100%;");
You can apply width on the element using Javascript Review the below code snippet. Thanks
var iframe = document.createElement('iframe').style.width = "100%";
I need to load an .swf file after we click on an image
The .swf file loads successfully after we click on the image,but it loads the .swf below the image.I need to replace the img with .swf(in short,hide the img).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
}
document.getElementById('iii').style.display = 'none';
</script>
<p><a href="http://www.leconcombre.com/stock/coccyminimini1.swf" onclick="loadSWF(this.href); return false;">
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
</a></p>
<div id="flashcontent"></div>
I need to hide/remove the class/id "iii" (within which the img tag lies).However the code doesn't seem to work only with respect to hiding/removing of img. Any tips?
I think this is what you're looking for.
I made a js fiddle for you.
http://jsfiddle.net/q7a96h14/1/
html
<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot.com/-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>
js
$(function(){
var $img = $("#my_image17")
, $container = $("#iii");
$img.on("click", function() {
$img.remove();
$container.html("<embed src='http://www.leconcombre.com/stock/coccyminimini1.swf' width='550' height='400'/>");
$container.removeClass().removeAttr("id");
});
});
Looks like ...
function loadSWF(url){
swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
document.getElementById('iii').style.display = 'none';
}
... the hide should occur when the load does.
I'm using Bootstrap with the Fancybox plugin and trying to get a thumbnail ALT attribute and use it as a caption below the photo like so: FancyBox demo
However, taking that idea and implementing it with my Bootstrap demo gets the code working fine except that the ALT attribute is nowhere to be seen in action. Note: Only testing the first photo of my gallery at the moment.
My code:
<a class="thumbnail fancybox" rel="lightbox" href="http://placehold.it/400x400.png">
<img class="img-responsive" alt="First title here" src="http://placehold.it/200x200" />
<div class="text-center">
<small class="text-muted">Image Title</small>
</div> <!-- text-center / end -->
</a>
The script at the bottom of my page is:
<script>
$(document).ready(function(){
$('.fancybox').fancybox();
});
</script>
<script>
$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
</script>
What am I doing wrong?
You have init fancybox 2 times, try just using the script:
<script>
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
</script>
REMOVE this:
<script>
$(document).ready(function(){
$('.fancybox').fancybox();
});
</script>
PS: may be add document ready to the second fancybox init should work, but remove the unecessary code will be better
<html>
<head>
<script type="text/javascript">
function PrintElem()
{
var mydiv1 = document.getElementById("div1");
var mydiv2= mydiv.getElementsByTagName("div2");
printTheDivs(mydiv1, mydiv2);
}
function printTheDivs (d1,d2)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><body>' + d1.innerHTML + '</body></html>');
//Here I want to show the Images in this window.
$(d2).print();
//but want to print the Div2 Images I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers.
}
</script>
</head>
<body>
<div id="div1">
<img src=”image1.jpg”/>
<img src=”image2.jpg”/>
<img src=”image3.jpg”/>
<img src=”image4.jpg”/>
<img src=”image5.jpg”/>
</div>
<div id="div2">
<img src=”image6.jpg”/>
<img src=”image7.jpg”/>
<img src=”image8.jpg”/>
<img src=”image9.jpg”/>
<img src=”image10.jpg”/>
</div>
<input type="button" value="Print Div" onclick="PrintElem()" />
</body>
</html>
I want to show one div using window.open() and print another div. I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers. Please help me. Thanks in advance.
You can print particular div
<div id="divid">test</div>
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
printDiv('divid')
check here http://jsfiddle.net/jrhp8/