#1
  1. No Profile Picture
    jasonc310771
    Guest
    Devshed Newbie (0 - 499 posts)

    How do i insert a page break in to my webpage


    I wish to break up the page for printing purposes, i have three or 4 parts on my page and without having to add a lot of blank lines I wish to allow them to click the print button and have it print each section on a seperate page.

    how would i go about doing this ?
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    The simplest approach would be to put the separate parts within iframes. So when your users see the print dialog they can choose to print the current frame. (FireFox has an obtain to print 'Each frame separately'.)

    You would need to split your, say, four sections into four separate .html pages. Then on the main page insert (and size and position) your iframes and set the src for each of them to one of your four new pages.
  4. #3
  5. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    CSS has a page break property:
    http://www.javascriptkit.com/dhtmltu...agebreak.shtml

    Generally though, if you want a lot of control over how something looks when it's printed you should use PDF.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  6. #4
  7. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    CSS has a page break property:
    http://www.javascriptkit.com/dhtmlt...pagebreak.shtml
    E-Oreo: Thank you, I had forgotten about this. (When I first studied css a few years ago it wasn't well supported.)

    When you recommend PDF do you mean - provide a link to a separate pdf document? I know it's possible for JavaScript to create a pdf, but it's not the simplest thing to take on.

    Thanks, Andy.
  8. #5
  9. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    Originally Posted by AndrewSW
    When you recommend PDF do you mean - provide a link to a separate pdf document? I know it's possible for JavaScript to create a pdf, but it's not the simplest thing to take on.
    Yes, a link to a PDF document. It's not possible to generate a dynamic PDF document with client side JavaScript, but you can do it with a server side language.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    7
    Rep Power
    0
    I like divs when separating content
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    42
    Rep Power
    3
    thanks to cascading style sheets, it is possible to give modern web browsers a "hint" to help them put page breaks in the right places when printing out web pages. Here is an example:

    <p style="page-break-before: always">

    This will force a page break when printing, before the start of this particular <p> element.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2010
    Location
    Florida
    Posts
    46
    Rep Power
    4
    You can simply add &ltP style="page-break-before: always"> before the starting of the new page. For i.e.

    <html>
    <body>

    This is the text for page #1.

    <p style="page-break-before: always">

    Page #2...

    <p style="page-break-before: always">

    Page #3...

    </body>
    </html>
    SPINX Inc. Website Design Company in Florida
    http://www.spinxwebdesignflorida.com/

IMN logo majestic logo threadwatch logo seochat tools logo