home / experts / javascript / column94 |
   |
|
|
|
There is quite a lot of initialization to do in template7.html. First, we define the STYLE rules: .contentstyle for the page content, .masterstyle for the page frame, .headerstyle for the header, .footerstyle for the footer, #ui for the GUI, #pagecontainer for the DIV containing the pages, and #overflowcontainer for the DIV containing pagecontainer. You can find the STYLE rules on Page 7. Notice the left attribute of the .pagestyle rule of -100 in. This is to make room for the excess pages, which we hide by placing in an invisible portion of the document.
Secondly, we convert the STYLE rules to style objects, via the FindStyleRule() function:
oMasterStyleClass = FindStyleRule(".masterstyle"); oContentStyleClass = FindStyleRule(".contentstyle"); oHeaderStyleClass = FindStyleRule(".headerstyle"); oFooterStyleClass = FindStyleRule(".footerstyle");
The FindStyleRule() function iterates over all rules and finds a match between the passed parameter styleName and the selectorText property of each rule:
function FindStyleRule(styleName) { for (i = 0; i < document.styleSheets.length; i++) { for (j = 0; j < document.styleSheets(i) .rules.length; j++) { if (document.styleSheets(i).rules(j).selectorText == styleName) return document.styleSheets(i).rules(j); } } }
Once all style objects are ready, we update their properties with the TemplatePrinter's values. These values reflect the user settings in the Page Preview and Print dialog boxes. See Column 93 (Print Templates, Part IV: User Settings) for more details.
The function init() manages these initialization tasks. Besides creating the first page, it sets the zoom factor of the pages to 50%, sets the dimension of the GUI area, and computes the height of the page area by subtracting the GUI height from the total window height. The init() function also converts the STYLE rules to style objects and updates the style objects by TemplatePrinter. Here is the init() function:
function Init() { AddFirstPage(); zoomcontainer.style.zoom = "50%"; ui.style.width = document.body.clientWidth; ui.style.height = "60px"; pagecontainer.style.height = document.body.clientHeight - ui.style.pixelHeight; oMasterStyleClass = FindStyleRule(".masterstyle"); oContentStyleClass = FindStyleRule(".contentstyle"); oHeaderStyleClass = FindStyleRule(".headerstyle"); oFooterStyleClass = FindStyleRule(".footerstyle"); InitClasses(); }
See Column 93 (Print Templates, Part IV: User Settings) for more details on the printing functions (CheckPrint(), PrintPrep(), and PrintNow()), as well as on AddHeaderAndFooterToPage() and AddPageTotalToPages(). The ResizeApp() function handles the ONRESIZE event. It resets the GUI's width to the window's width, and recomputes the overflowcontainer height from the window total height and the GUI's height:
function ResizeApp() { ui.style.width = document.body.clientWidth; pagecontainer.style.height = document.body.clientHeight - ui.style.pixelHeight; }
Next: code listing
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: October 8, 2001
Revised: October 8, 2001
URL: http://www.webreference.com/js/column94/6.html
