Solved

Page brake using CCS

Posted on 2008-10-20
5
301 Views
Last Modified: 2012-05-05
Hi,
I would like to insert a page brake in a HTML page using CCS (printing purpose).
I read that is possible to do it using page-brake-after...

Here is my case:
I have several input fields in a form

<form id="printer" name="printer" method="post" action="">
<input name="field__1" type="text" id="field" size="90" value="VALUE 1" </input>
<input name="field__2" type="text" id="field" size="90" value="VALUE 2" </input>
<input name="field__3" type="text" id="field" size="90" value="VALUE 3" </input>
<input name="field__4" type="text" id="field" size="90" value="VALUE 4" </input>
 .....

Is it possible to insert a page brake after "VALUE 3" (field__3)?
0
Comment
Question by:alcani
  • 3
  • 2
5 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 22761715
I am not positive, and I do not have a printer around to test this out, but you may be able to if you add page-break-after as an inline style to the <input/> tag. Make sure that it is well-formatted; right now, it looks like your <input> tag is floating around without a closing >
0
 

Author Comment

by:alcani
ID: 22762264
Thank you for your answer.
May be I didnt explain my self correctly.
Im looking for inserting a page break after de <input/> tag, only when the value is VALUE 3.
Thank you for your help.
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 22762305
You can try to run something like this on window.onload:

function insertPageBreaks() {
    var inputTags = document.getElementsByTagName("input");
    for (var i = 0; i < inputTags.length; i++) {
        if (inputTags[i].value == "VALUE 3") {
            inputTags[i].style.pageBreakAfter = "always";
        }
    }
}

or something similar.
0
 

Author Comment

by:alcani
ID: 22767286
I tried that JS code. I think we are close because the loop is working ok. However inputTags[i].style.pageBreakAfter = "always" is not working. Do you know other syntax that could work?
Thank you for your help.
0
 

Author Comment

by:alcani
ID: 22768241
I'm sorry. I made a mistake. This code is working OK.
Thank you.
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question