Print not working as desired in Lightbox

[raihan]

Hi, I have created a lightbox form and at the a confirmation page within lightbox. In the confirmation page, I have kept an option of Print button, with the code as:

<input type="button" value="Print" onclick="if(window.print)window.print();return false;">

That button works properly, but it prints whole page. I need to print only the Data portion. I have tried to open new window. But that doesn't work from lightbox. What else I may try, please?
Thanking you in advance.
Raihan

[jscheuer1]

That's something that's best accomplished using a print stylesheet. In the print stylesheet you set everything on the page to display none, except for the form and all of its parent, parent.parent, parent.parent.parent, etc. nodes. Since those would include the Lightbox, you set parts of it to display none as well or otherwise make them so that they don't show up by removing borders, background colors, etc. for those parts of the Lightbox that you don't want printed. To be more specific I would have to see the page. Except that I can tell you how to make a print stylesheet. Just make it like a regular stylesheet. But make the link to it like so:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

Where print.css is the name of the stylesheet. You can include the path if any. Place it after all of the other styles for the page. You can use a DOM inspector or similar tool to determine what elements to go after in the stylesheet. It would have:

body * {display: none;}

at the beginning, then display block after that for those elements that need to be seen in order for the form to print.

Once you have that, your print button will print only the form.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[raihan]

Hi John,

Thnx a lot for ur reply. Here is my page address: raihans.co.uk/homepage/contact-us, for which I am facing problem. Please have a look and let guide, for any or alternative solutions.

Thanking you again.

Raihan

[jscheuer1]

Using a text only editor like NotePad, save the following as print.css:

body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

Put it in the same folder as the raihans.co.uk/homepage/contact-us file.

Add this tag as the last thing in the head section of the raihans.co.uk/homepage/contact-us file:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Now, when you print the page it will show only the form. Oh, and the scrollbars from the iframe. Those can be eliminated as well, and probably should be not just for printing but for general viewing as well. To remove them, add this style to the styles for the raihans.co.uk/component/chronoforms/?chronoform=contact&tmpl=component page:

html, body {overflow: hidden;}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[raihan]

HI, thnx for ur reply.

The code for scrollbar, works fine. But others, not at all. Can u reply me pls, if there is any way to call window.open() function? I have used, that. It works in normal page view. But, that function doesn't work in lightbox. That will be best for me, if it may possible, please. Thnx again.

Raihan

[jscheuer1]

You haven't put the print.css file on the 'top' page.

BTW, I tried it here by appending the print stylesheet link to your page and it worked fine in IE, Chrome and Firefox.

[raihan]

Hi, Thanks for the reply.
I don't know much about coding. I used joomla for my site. Whatever the codes there, created by joomla 3.0. I tried many ways as you suggest me. I couldn't sort it out, actually.

One of the example from chronoform component, allows me to print out exactly as I need - but unfortunately it works with normal web page view. When I click on 'Print' button, it pops-up a HTML webpage window only with my data, and on top of that print windows comes to allow printing. And that's working with window.open() function. That's why, I tried to have that function to work, which doesn't work when I tried with lightbox.

There is one print.css file in my template folder. But even if I remove that, my printing still works fine as it is. I am actually not clear which file, where to put, what to edit. That's the problem. For you to understand, I have added my code. It works, when I click 'Print' button in normal view. But when I call lightbox, then doesn't. Please have a check, and let me know, where I may need to change and what.

<input type="button" value="Print" id='print_button' style='visibility: visible;'></input>
<?php
$doc =JFactory::getDocument();
$script = "
function printPage()
{
    var html, css, csss_file, printWin;
    css = \"\";
    css = \"<style type='text/css'>\"+css+\"</style>\";
    css_url = '';
    if ( css_url !== '' ) {
        css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
    }
    html = '<html><head>'+css+css_url+'</head>'+$(id).innerHTML+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}
var id;
window.addEvent('domready', function() {
    id = 'print_div';
    $('print_button').setStyle('visibility', 'visible');
    $('print_button').addEvent('click', printPage);
});
";
$doc->addScriptDeclaration($script);
?>

Thanks a lot.

[jscheuer1]

Although it's shrouded in some Joomla proprietary PHP code, I understand that approach. It's less reliable than what I'm proposing, yet could have an advantage. It's less reliable because new windows from window.open() can and often are blocked by the browser. Usually if the browser 'thinks' the new window was called for by the user by clicking on something, it's allowed. But browsers keep getting stricter about such things, and any given browser can be configured not to allow new windows regardless of how they're called for. The advantage is that the page can still easily be printed in its entirety if the user wants to simply by using the browser's print button/option. With the approach I've put forth, to print the page in its entirety the user would have to disable the print stylesheet. Depending upon the browser, that can be moderate to high difficulty.

The print stylesheet you have is simply for formatting the printing of pages that have it associated with it.

The print stylesheet I propose will make the contact-us page print only the contents of the light box (SqueezeBox actually - a lightbox type script that uses the MooTools script library).

Anyways, in order to use the print stylesheet I propose, you would need to know how to associate it or at least its print styles with the contact-us page. Once that's done, any printing of that page will show only the contents of the box.

If nothing else, we could append it via javascript. But putting a stylesheet link on a page is a very basic thing. Are you sure you don't know how to do that with your setup? Let's say you had a supplemental stylesheet you wanted to use just for one page. Say it's called mystyles.css. How would you put a link to that stylesheet on the page?

If you really don't know how, as I say we can use javascript. Since the page also uses jQuery we can do:

<script type="text/javascript">
window.jQuery && jQuery(function($){
	if(location.href.indexOf('contact-us') > -1){
		$('head').append('<link rel="stylesheet" type="text/css" media="print" href="http://raihans.co.uk/components/com_chronoforms/css/contactprint.css" />');
	}
});
</script>

Put that after all of the other scripts in the head. It can go in a common header file (as long as that common header file has the external script tag for jQuery) because it will only fire if jQuery is available, and will only append the stylesheet link if the page is the contact-us page.

Using a text only editor like NotePad, save this as contactprint.css:

body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

and upload it to this folder:

raihans.co.uk/components/com_chronoforms/css/

On your page that goes inside the iframe, or even on the contact-us page, you can now have:

<input type="button" value="Print" onclick="if(window.print){window.print();}>

It will print only the contents of the box.

[raihan]

Thnks a lot. U r grt. U took lots of time to answer me.
I couldn't find raihans.co.uk/homepage/contact-us directory at all. I can't understand, which print.css file it is striking. I have change all the print.css file with only your code. It's not working at all.
I couldn't catch, where to put your '<link rel....' code. I tried, as u suggest me for raihans.co.uk/....css/ folder. Nothing changed at all. Seems like, my print button striking somewhere from immagination.

The steps I did: 1) I make print.css file with only your code ( 'body * { display.... ' ) in raihans.co.uk/components/com_chronoforms/css/ folder
2) I put your another code ( '<input type ....' ) in my Confirmation Page Show event with custom Code element
3) I put your '<link rel ....' code in my lightbox On Load event with a Custom Code element

Sry, but I know u also trying to let me understand. I think, I can't catching the wright way. Thnks a lot.

[jscheuer1]

Let's try this one step at a time. First -

Using a text only editor like NotePad, save this as contactprint.css:

body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

and upload it to this folder:

raihans.co.uk/components/com_chronoforms/css/

Once you've completed that step, let me know. I will give you the next step.