I'm trying to print (via a printer) two or more div's, each to its own page. I'm trying out different plugins, including printArea.
I've tried something along the lines of :
this.$el.find(".print").map(function () {
$(this).printArea();
});
in Chrome it brings up the print dialog twice, once for each div, but in Firefox, it just prints the last div. (Granted, I'm printing to a file instead of via a printer...)
Showing the dialog twice is acceptable, though it would be nice to break it into two pages beforehand. And also - how would I get this working in Firefox?
Thanks!
Instead of trying fancy plugins, why not use a page break?
#media print {
.print {
page-break-after: always;
}
}
Related
I have a page with two different print buttons and two types of div tags:
<button onclick="window.print()">Print Full</button>
<button onclick="PrintPartial()">Print Partial</button>
<div class="not-partial">
Div Content Here should print for "Print Full" but not for "Print Partial"
</div>
<div class="no-print">
This content shouldn't print on either
<div>
I have the following in my print.css file
.no-print { display: none; }
And below is my PrintPartial() function
function PrintPartial() {
var notPartial = $(".not-partial");
notPartial.addClass("no-print");
window.print();
notPartial.removeClass("no-print");
}
The "Print Full" button works just fine and prints according to my print.css file. The div that is hard coded with the "no-print" class correctly does not print.
However the "Print Partial" button print out is exactly the same as the print full button.
When I run my debugger and step into my PrintPartial() function I can inspect the elements and the "no-print" class is getting added to the correct elements. It calls window.print() which opens the print dialog and it removes the "no-print" class from the elements stored in the notPartial variable.
My only thought is the JQuery select and addClass is running asynchronously and its calling print before the class has changed? If so how do I make sure the window.print isn't called until after the addClass is complete.
I tried running it without the removeClass step and got the same results so I know its not my issue, or at least its not my ONLY issue.
Can somebody please tell me what I am doing wrong and how to correct it?
Thanks,
Scott
UPDATE: The above code works fine as Pabs123 pointed out. I had an issue where a different piece of css (not included in this post) is causing the display property to be changed back.
Thanks
Sorry, The code I posted here works as intended. As Pabs123 suggested in his/her comment, I had other conflicting css that was not included with the post, that was changing the display style back from display: none. So as posted this wasn't really a good question. Sorry.
Thanks for your help.
I need to take a webpage and, when the user either clicks file > print or [cmd + p], duplicate an article (HTML) and place the new article adjacent to the original article. The idea is to show a list online, and then print from the webpage a 2-up paper version that can be cut in half: 2 identical lists, one sheet of paper. I'm using print style sheets for the custom paper layout, and I'm using jquery to duplicate the HTML.
The part that I'm stuck on is how to duplicate right before the user sees the print dialog box. I don't want there to be two identical articles on the webpage by default. I'd also want to remove the duplicate article after printing is done, but that's maybe not as important.
<script>
/* instead of window.onclick, is there an "on print" function? */
window.onclick = function() {
var $newArticle = $('article').clone();
$($newArticle).css({'margin-left':'1.3cm'});
$($newArticle).insertAfter("article");
}
</script>
thanks for any suggestions.
I don't want there to be two identical articles on the webpage by default.
No need for JavaScript! Have the article twice in the page and initially hide one with CSS:
article.copy {
display: none;
}
Then, with another CSS rule, show the article on the print page:
#media print {
article.copy {
display: block;
}
}
DEMO
Mode information on#media and a tutorial. Unfortunately #media doesn't seem to work in IE8 and below.
I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:
$(function() {
$("#refresh").click(function(evt) {
$(".bgleft").load("left.php")
evt.preventDefault();
})
})
The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out)
and click on "refresh" at the left frame.
Edit:
The HTML snippet: <body class="bgleft">
In left.php there are two lines of code which are showing theese characters.
for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));
Try to remove them, it should help.
Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.
It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.
Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.
PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...
You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.
How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?
$(function() {
$("#refresh").click(function(evt) {
evt.preventDefault();
$(window.top.window).find('frame[name=left]').reload();
})
})
I need to provide a print link on my simple html page.
When the user clicks on that, I want a pop-up which displays a print preview and the system printer should come up. I guess something with window.print(); option, but this directly gives the window print option without the preview.
I want the page preview first and then call window.print(); An example html would help...
More over the example you provide can also have media type print in it. So that the normal html color looks red. But when the print link is selected we need to show print preview in blue color. I know this could be overridden methods using #media print in css file.
Any example please...Thanks
The print preview feature is client specific. The latest chrome displays a print preview but most other browsers just display the print dialog upon calling the print() method.
Concerning print styling you should read up on print stylesheets. The A-list-apart article by Eric Meyer from a few years back is a good start with some decent examples.
http://www.alistapart.com/articles/goingtoprint/
Suppose report.html is the page you want to print. Develop the page in such a way that it accepts a media argument as a GET paramater. i.e. something like yoursite.com/report.html?media=X - where X can be 'screen', 'print' etc. If X is empty, it can use the default value of 'screen'
Write 2 css files namely screen.css and print.css - Depending on this value of the media argument (X) import either screen.css or print.css into your page.
In screen.css, write your style defs inside a '#media screen' block like:
#media screen {
body {
... screen style here ...
}
}
In print.css, write your style defs inside a '#media screen, print' block like:
#media screen, print {
body {
... print style here ...
}
}
In your report.html, suppose you have a print button, in its onclick, call window.open('report.html?media=print', ...). Also do the same from a keydown handler attached to your document object on receiving a Ctrl+P.
Also, in your page's onload, check if the media argument is 'print' and if it is then call window.print() after a short delay (say 500ms), i.e. something like:
if(window.location.href.indexOf('media=print')!=-1) {
setTimeout(function() { window.print(); }, 500);
}
I have a problem where the link locations are being printed when the user prints. Is there a way to disable the locations from being printed?
For example if I have the following code
<div id="link_row" class="headerbar">Home
it will print Home (admin.aspx)
or on other links Link1(javascript:Do_something()) when I only want to print Link1
Is there something that I can do to avoid such a problem?
Print a website without printing the link locations?
I looked at the link above to, but I am not able to follow the solution there.
Thank you,
Varun
EDIT: Just to clarify that this is occuring across all users with IE 8 or Firefox 3.6.
asp.net-mvc includes a default print stylesheet. It uses a CSS pseudo-elements to add the value of the href into the visible html. Css-Tricks has a good article on this trick and others.
You should find the CSS selector in the default print stylesheet (probably similar to "a[href]:after"), then add that same selector to your own print stylesheet, and make it override the original, which may require using !important.
#media print {
a[href]:after { content: ""; }
}
or, if that doesn't work:
#media print {
a[href]:after { content: "" !important; }
}