Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.

Here's the little bit I've got 'till now:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.

Now because I'm only just a student whose current education is just dismal, I'd like for one of you guys to help me out. Seems it'll be the most help I'll get here.

Thanks in advance!

share|improve this question
 
before going ahead with it, please change the id provided as veldbox. It is not a good practice to have ID multiple times in a single page. Instead of it, use class. –  Ganesh Pandhere Sep 12 '13 at 7:42
 
I had the remark a week ago, too. Thanks for pointing this out! I'll change that right away. –  Fariz Fakkel Sep 12 '13 at 7:57
 
That is a basic prerequisite. And you can try what Reeno has provided. It will work as expected. :) –  Ganesh Pandhere Sep 12 '13 at 8:02
 
Did you solve it? –  Reeno Sep 13 '13 at 14:59
 
Not completely. It still won't print it correctly after hit has been formatted to the CSS styling. Your code should work, it got me in the right direction. Still, I'd like to know exactly why the page is printed this way. I'm currently looking to convert the content to a PDF file through Servoy. I should be able to do that by myself this time. –  Fariz Fakkel Sep 16 '13 at 7:27
add comment

1 Answer

up vote 0 down vote accepted

Build a complete HTML page in the opened window and reference your CSS-file there:

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
share|improve this answer
 
I've tried your solution. The CSS is loaded into the new window, which is good. When I actually print it, it won't print the page with the same layout. There's probably some obvious reason I'm too cognitively challenged for to actually be able to find out myself, haha. Enlighten me! –  Fariz Fakkel Sep 12 '13 at 11:44
 
Don't know... Maybe the CSS styles are set for a specific media type only? media="screen" in the HTML or @media screen in the CSS file itsef? –  Reeno Sep 12 '13 at 11:56
 
I haven't set any media type rules yet. Would it be a good idea to add those styled selectors to it? –  Fariz Fakkel Sep 12 '13 at 13:18
 
If you don't need them I wouldn't add them. It's hard to say why it isn't working. When the browser shows the right styles (not only the CSS file has to be loaded, also the CSS rules have to be applied to the HTML), they should also be printed correctly. –  Reeno Sep 12 '13 at 14:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.