'JavaScript:window.print()';

**squizeers** · 11-03-2010, 02:24 PM

I am trying to use the print option in the Fancybox. I am using the following code to get the print option and its printing the page on the light box but it also prints the page at the background.

<div class="thumbfirst">
<img src="collection/chairs/repros/1t.jpg" alt="" border="0"/></a>
<div class="product_title">Campaign Chair</div>
<div class="pdf"><a href="collection/chairs/repros/1.jpg"
rel="example_group"title="<a href='JavaScript:window.print()';>Print this page</a>" >view pdf</a></div>
</div>

I cam accross with http://www.thatagency.com/design-stu...jquery-plugin/ but have no idea whats going on there and how would I integrate into my site at :
www.rajumaharjan.com/etos1

**remp** · 11-03-2010, 09:23 PM

Check this link out. it has a simple piece of code that would allow you to specify what you want to be printed in a document and a link to it on the headers.... Check it out and let me kknow if its what you are looking for.

http://www.dynamicdrive.com/dynamici...printstyle.htm

**jscheuer1** · 11-03-2010, 11:53 PM

Originally Posted by remp

Check this link out. it has a simple piece of code that would allow you to specify what you want to be printed in a document and a link to it on the headers.... Check it out and let me kknow if its what you are looking for.

http://www.dynamicdrive.com/dynamici...printstyle.htm

Do not do that. Do not. It's outdated, never was cross browser, and should no longer be in the DD scripts library.

Also, the jQuery script you (squizeers) reference in your post isn't much better. And even as far as it does work (which is not cross browser), would have complications because you are importing and then initializing fancybox content, rather than in the manner the jQuery print script has in mind.

What you need are alternate print styles, not an alternate print document, nor the jQuery javascript whose demo page isn't even cross browser.

Working out the alternate print styles may be a little tricky because of the AJAX involved in importing and initializing the fancybox content.

I will try to work that out soon, at least a first draft for testing. In the meantime, Do not try the jQuery or the alternate doc approaches. You will just be wasting your time.

**jscheuer1** · 11-04-2010, 04:19 AM

OK, this may need some refinement. Put this at the beginning of the rajumaharjan.com/etos1/fancybox/jquery.fancybox-1.3.1.css file:

Code:

@media print {
	body * {
		display: none!important;
		background: none!important;
	}
	body {
		background: none!important;
	}
	#fancybox-wrap, #fancybox-wrap * {
		display: block!important;
		top: 0!important;
		left: 0!important;
	}
	#fancybox-title, #fancybox-close {
		display: none!important;
	}
}

That's it, everything else should remain the same. The refinements I'm thinking of are adding would be for IE and only if necessary, but there could be others for other browsers as well.

So test it out in Firefox or some other non-IE browser first, then see how it looks in IE. Let me know, or better yet let me see the page once you've made the change to the rajumaharjan.com/etos1/fancybox/jquery.fancybox-1.3.1.css file.

**squizeers** · 11-04-2010, 03:13 PM

Thank you for the quick response.

I did update : rajumaharjan.com/etos/fancybox/jquery.fancybox-1.3.1.css with the css you provided but still printing the background page.

I tried printing in Firefox.

LINK: rajumaharjan.com/etos

**jscheuer1** · 11-04-2010, 03:48 PM

You're right. That's very strange. I worked it out in the Firefox Developer Tools' edit css. In fact, if I load your now updated styles into that utility, they work without needing to be edited. So we just need to find a way to get them recognized.

Here's what I would suggest - revert to the styles as used before. Add an on page stylesheet to rajumaharjan.com/etos here as shown (highlighted):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Et&oacute;s New York City</title>

<link rel="stylesheet" type="text/css"href="css/global.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<style type="text/css" media="print">
@media print {
	body * {
		display: none!important;
		background: none!important;
	}
	body {
		background: none!important;
	}
	#fancybox-wrap, #fancybox-wrap * {
		display: block!important;
		top: 0!important;
		left: 0!important;
	}
	#fancybox-title, #fancybox-close {
		display: none!important;
	}
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jq . . .

But as I indicated before, due to the AJAX import and reinitializing of fancybox, it's virtually impossible for me to test this all out here locally. That really shouldn't matter for styles though, which ordinarily will apply to any imported and/or created content that arrives later.