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.
Related
I'm using the Google Book Viewer API to show book previews based on metadata found on the page. This is in a system I don't control, although I can append scripts and markup.
Only some pages contain information about books that have previews available. The book viewer is inside a div which, if the preview isn't found, is empty and looks ridiculous; so my strategy is to hide the div via CSS, then, if a preview is found, change the ID of the div so that it is no longer hidden. If I do that, though, when the div appears, the preview does not show correctly; if you zoom in and out with your browser, it does, but otherwise no.
Here's an example of it working. (I've simplified the script--normally I traverse the page to get the metadata, whereas here I'm just supplying it in a string.) Everything is there except the CSS:
https://googledrive.com/host/0BxoVkXnTNNDoV3NpQUtsNDEyaTQ/gbpreview.htm
And here it is with the CSS, not working:
https://googledrive.com/host/0BxoVkXnTNNDoV3NpQUtsNDEyaTQ/gbpreview2.htm
Anyone know how I might fix this, or can you think of an alternative strategy to achieve what I'm looking for?
And here is the code:
<style type="text/css">#GoogleBooksPreview {display: none;} </style>
<div id="GoogleBooksPreview">
<div id="viewerCanvas" style="height: 600px;">
</div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">var gbsWidget = document.getElementById('GoogleBooksPreview');
function gbsFound() {
gbsWidget.id = 'gbsFound';
}
function initialize() {
var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'), {
showLinkChrome: false
});
viewer.load(['ISBN:9780596805524', 'OCLC:502415271'], null, gbsFound);
}
google.load("books", "0");
google.setOnLoadCallback(initialize);
</script>
It looks like the recommended way to handle this is to hide the div on failure, rather than unhide the div on success, see here. I'm guessing this is necessary because the viewer needs to know the height of the canvas (which it won't have if the container is hidden).
See a working example here: http://jsfiddle.net/67pay4r2/.
Or without adding a hidden class like: http://jsfiddle.net/67pay4r2/1/.
I have added a hidden class to the widget div, which is removed when the initialize function starts, and then added back if the viewer load fails. This will prevent users with JS disabled from seeing the div.
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;
}
}
I need to provide information for various clients when they log in to build a profile. I will be using HTML and Javascript for this purpose. What I would like is a concise set of instructions followed by an option to show more detailed instructions. If the client chooses to see the more detailed instructions, the field (ideally) expands to show more content.
Other ideas that achieve a similar result are also welcome, as are comments that simply point me in the right direction. Preliminary research hasn't turned up much for me; I imagine this is largely due to being a novice and not knowing what to look for. Is this a conditional visibility issue, or is that something else entirely?
Many thanks for any help.
Place the hidden content in a separate container element with its display initially set to none. Then, add an onclick handler to a link that shows the content. That handler should set the display value to block or inline. Here is one way to do it (there are many). Set up your HTML something like this:
<p>
[Instruction text here]
more ...<span class="more">
[Additional content here]</span>
</p>
Some CSS to initially hide the additional content:
.more
{
display: none;
}
Create your expandContent() function:
function expandContent(link)
{
link.nextSibling.style.display = "inline";
}
How do I hide the "html upload" part when flash is enabled in the browser with SWFUpload? I looked the Wordpress source code to see how they're doing. They have a settings parameter to the SWFUpload object that looks like this:
custom_settings : {
degraded_element_id : "html-upload-ui", // id of the element displayed when swfupload is unavailable
swfupload_element_id : "flash-upload-ui" // id of the element displayed when swfupload is available
},
I've put these ID numbers to the div elements. But I have not figured out what I should do more to make it work.
Please help me to just get it working, in any way.
<style type="text/css">#divname { display: none; } </style>
Display hidden makes the element hide, but it still takes up space. Display none makes the element take up no space, but it's still in the HTML code, just that it does nothing, like it's commented out.
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; }
}