I have a website I am currently developing and the client has a very unique request. They would like the user to be able to hit a button and print the contents of the browser window. I wanted to know if anyone has implemented similar functionality or knows any strategy to develop something like this as I do not have the first clue.
Example: I have 30 images on a page but only 4 fit in the viewable area or browser window. I would like to only print the exact content of the browser window / or elements that are viewable area.
Thanks in advance,
JN
I have a website I am currently developing and the client has a very unique request. They would like the user to be able to hit a button and print the contents of the browser window. I wanted to know if anyone has implemented similar functionality or knows any strategy to develop something like this as I do not have the first clue.
Example: I have 30 images on a page but only 4 fit in the viewable area or browser window. I would like to only print the exact content of the browser window / or elements that are viewable area.
Thanks in advance,
JN
Share Improve this question edited Jul 29, 2011 at 17:38 jeffreynolte asked Jul 29, 2011 at 17:28 jeffreynoltejeffreynolte 3,77911 gold badges42 silver badges65 bronze badges 8- Print buttons are pretty mon and using CSS media types, e.g. print and screen you can style your printed content to look pletely different to how it is on-screen if you want to. But I feel that there may be some missing information or a slight lack of detail to the question? – Ryan Commented Jul 29, 2011 at 17:33
- 1 OK... now that makes a lot more sense but cannot think of any viable options sorry mate – Ryan Commented Jul 29, 2011 at 17:42
- 1 @jnolte - how about Ctrl++, Ctrl+- adjustments? Does your client want that as well? :) – Igor Turman Commented Jul 29, 2011 at 18:21
- 1 I would rather build Print-friendly page with some options/layouts (e.g. 2/4/6/8 pics per page) and give that option to the user – Igor Turman Commented Jul 29, 2011 at 18:23
- 1 Understood. I just think browsers are not capable of doing that (yet)... – Igor Turman Commented Jul 29, 2011 at 19:51
6 Answers
Reset to default 1This method requires jQuery, but might be able to be rewritten in plain javascript.
With a bookmarklet app of mine I found that the popup window was the most reliable way to print dynamic content and allowed the user to see the content before printing it. I also found that reducing the font size allowed fitting all the content on the page while sill be readable. You might try shrinking the images as well if that is an option. I had tried targeting media types with CSS and some jQuery print plugins but found them unreliable at best.
Here's the function I use to pass a jQuery object to be printed. I maximized the window on open and changed the title/font size. If you have more than images you'll need to clone your CSS as well, mine just happened to be stored in a variable from the bookmarklet loading.
function printElement(oElement) {
var oPopupWindow = window.open('', 'newwin', 'width=500,height=500');
oPopupWindow.moveTo(0,0);
oPopupWindow.resizeTo(screen.availWidth,screen.availHeight);
oPopupWindow.document.open();
var sHTML = '<html><head><title>TBA Enhanced User Interace</title>' +
_EUI.sCSS + '<style>img {display:none!important}table{font-size:8pt!important}</style></head><body>'
+ $('<div />').append(oElement.clone()).html() + '</body></html>';
oPopupWindow.document.write(sHTML);
oPopupWindow.document.close();
oPopupWindow.print();
oPopupWindow.close();
}
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
function printVisibleImages() {
var oImageElement = $('<div />');
$('img').each(function() {
if (isScrolledIntoView(this)) {
oImageElement.append(this);
}
});
printElement(oImageElement);
}
Using the isScrolledIntoView function from this question: Check if element is visible after scrolling, something like the code above might work with some tweaking. Call printVisibleImages(), you might need to add some CSS for padding or pass the style sheets from the main page.
You could - in the same or a new window - wrap a DIV around all of the BODYs content and restrict the display area to currently visible . If there's a root-container-DIV for example...
<body>
<div id="theWholeDocument">
... content
</div>
</body>
... it can easily be done by jQuery:
$('#theWholeDocument').wrap( function() {
// get coordinates and dimensions of visible area first
// assing to var prLeft, prTop, prWidth, prHeight
return '<div style="position:absolute;left:"+prLeft+"px; top:"+prTop+"px; width:"+prWidth+"px; height:"+prHeight+"px; overflow:hidden"/>');
}
Should result in a Document that shows nothing else than what has been visible before. Printout schould look the same, like a screenshot - with propably cropped images at the bottom.
Make a jQuery function that loads a page on the click of a button via Ajax. (sending the page name as a post parameter). In that page, you do this:
$file = file_get_contents($_POST['file']);
echo $file;
and you style accordingly.
Maybe you can play around with Javascript (take a look at how to get window dimensions and scroll positions), but I don't realize how to print only that part of the document...
Maybe this can help you: snapshot from browser with flash or javascript
I have 30 images on a page but only 4 fit in the viewable area or browser window.
I don't think you can say with certainty that the above works in all situations.
It is quite possible that many other browsers/resolutions will produce man different configurations, including some where the images are chopped off, etc.
The better solution, I think, is to offer X number of images per printed page and style accordingly.
One of the web apps needed something similar to what you are asking for. It is an FAQ link which produced an FAQ page and the user wanted the ability to print it, if they so chose.
I did this by simply adding a button to the html:
<input type="button" value="Print" onClick='window.print();' />
<input type="button" value="Close" onClick='window.close();' />
Because I popped this into its own little browser window, I stripped off all the other controls from the parent page via:
function popFaq() {
window.open('faq.html', '',
'left=10, top=10, width=550, height=700, resizable=1, ' +
'location=0, personalbar=0, scrollbars=1, statusbar=0, toolbar=0, menubar=0');
}
... and ...
<div id='hLink'>
<a title='Click Here for (F)requently (A)sked (Q)uestions' href='' onclick='popFaq(); return false;'>FAQ</a>
</div>
Hope that helps!