technology is advancing, thinking is developing, and the patterns on the web page are of course going to be fashionable every day. In the "rolling characters", "Marquee" has become commonplace, can the web page be changed into new tricks? Yes, today, I will learn how to use the style to dynamically create the top page and page. Feet and page breaks, are you interested?
When I read a discussion forum carefully, I read a question from a developer who is trying to programmatically create a header and footer in an HTML page and insert it. Page break. This hasn't taken into account what your output will be, because it's hard to figure out the browser's current settings for whitespace, page size, and so on. However, if you really want to force the specified width and page breaks, you can do so.
One way to do this is to use TABLE. In this article, I will show you how to dynamically insert headers and footers into a page to form a formatted page. (Note: I am using IE 6.0 to test the code here. It can also be used on 5.0 and higher browsers because I use the @media pseudo-class that the STYLE element can use since IE 5.0.)
The easiest way to do this is to use TABLE. However, your formatted output must include separate lines, and they cannot exceed the height of the printed page. In addition, your TABLE must not exceed the width of the printed page. Since you can't control landscapes or portraits, you have to make some assumptions. You should assume that the orientation of the document is portrait, the left and right margins are 1" (2.54 cm), the top and bottom margins are 0.25 " (0.64 cm), and the paper size is 8.5 " (21.59 cm) X 11 " (27.94 cm). This means that the total width of the output is 6.5" (16.51 cm), so your TABLE width should be set to 6.5 in, no borders. At the top of the table, you create two hidden DIVs that will serve as the top and footer. The DIV has a set width and height, and the overflow style property is set to hidden. This lays the foundation for your output. In order to create page breaks, headers, and footers, you must add some JavaScript after the page load.
The idea of creating formatted output is to copy the header and footer DIVS to a hidden line. However, you should set the display style of @media print to inline. Also, you need to set the page-break-after style property of the TR before the top to always.
In the BODY onload event, iterate over all lines to determine if the line's offsetTop plus offsetHeight exceeds the available length of the page. The available length is the length of the page minus the total height of the top, footer, and top and bottom blanks. So, if the height of the top page and the height of the footer are 1", then the upper and lower blanks are 0.25", the length of the page is 11", then the available width is 8.5":11 - (1 x 2) - (0.25 x 2) = 8.5.
The following is the HTML code to achieve this task:
When viewing the sample code above, you will notice that the header and footer are two DIVs placed before the TABLE element. TABLE tbl1 contains multiple TRs. Each row is identified as t1 to help iterate through them using the all collection. This example can only be used for pages with more than two lines. I created an hdrftr to identify when these items should be displayed. The JavaScript code details how this feature was created.
First, a top row is added to the top of the table. Each row is then checked to determine the top coordinate plus the height of the row plus the height of the footer ——1in *screen.deviceYDPI or just screen.deviceYDPI—— to reach or exceed the total height available. If this value matches the available height, the current line is set to have a page break after it. If this value exceeds the available height, then a page break will be placed after the previous line. Then, the relevant line will be followed by a footer, followed by the footer. This process continues until all the lines have been checked. Finally, a footer line is added to the end of the table. The footer line includes an absolute position to prevent the browser from inadvertently paginating, which can cause an error to occur. Moreover, each subsequent page must be prepared for the additional header rows we added: (page – 1)* 1, where (page – 1) is the number of pages after, and 1 is the height of the top .
The above small and medium series show you how to dynamically insert the header and footer into the page to form a formatted page. Have you learned?