If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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:

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:

Code:

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.

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:

Code:

html, body {overflow: hidden;}

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

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.

The Following User Says Thank You to jscheuer1 For This Useful Post:

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.

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:

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.

The Following User Says Thank You to jscheuer1 For This Useful Post:

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.