April 28, 2000 - Page Watermarks

Yehuda Shiran April 28, 2000
Page Watermarks
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Page watermarks are images that stick to the page in a certain location with respect to the window and not with respect to the document. A page watermark placed in your windows's bottom right corner will continue to show up there, even if you scroll the page up and down. Our implementation of page watermarks consists of the waterMark() function and two statements:
makeLinkedImage(): creates the linked image of the watermark.
    • doThisCommandEveryIntervalMS: calls waterMark() repeatedly to check for changes in the window's or scroll area's size.

    The waterMark() function is based on checking four physical dimensions: windowWidth, windowHeight, pageScrollLeft, and pageScrollTop. DOCJSLIB provides an appropriate function to get each of these dimension. Each dimension is saved in an "old" variable for comparison purposes during the next iteration. Any difference triggers repositioning of the image and refreshing of its Z index:

    docjslib_setPosFromTop("docjslib", windowHeight + pageScrollTop - 
                            (imageHeight + bottomSpacer));
docjslib_setPosFromLeft("docjslib", windowWidth + pageScrollLeft - 
                            (imageWidth + rightSpacer));
var topZ = docjslib_findHighestZ();
docjslib_setZposition("docjslib", topZ);

    Notice how the position of the top left corner of the image is computed. It depends on the window size (windowHeight and windowWidth), how much is the page scrolled (pageScrollTop and pageScrollLeft), a spacer between the image and the window (bottomSpacer and rightSpacer), and the size of the image, imageHeight and imageWidth).

    Also, notice that the highest Z index is computed on every iteration, as Z index of elements can change via the setZposition() function of DOCJSLIB.

    Learn more about our page watermarks and DOCJSLIB in Column 29, DOCJSLIB Version 3.0: Supporting Watermarks, and Column 33 DOCJSLIB Version 4.0: Scrollers, Watermarks, and Games.