Implementing Watermarks with DOCJSLIB 3.0
We demonstrate the usage of DOCJSLIB Version 3.0 with the Watermarks implementation. Watermarks can be thought of as background images. They were originally used in stamps for security, and more recently in paper currency. In the world of browsers and windows, watermarks are images that persistently stay on your browser window, irregardless of how far you scroll the page down or right. Watermarks can be fixed either in the page's background or in its foreground. We demonstrate here the latter type.
Using DOCJSLIB, the watermarks implementation is fairly short and straightforward. The watermark is a linked image that is being positioned at the bottom right corner of the window. The trick is to watch for any change in the size of the window or the scrolled portion of of the page. This is done by checking them repeatedly, every a fixed time interval.
Here is the complete application:
Notice how simple and clear the code is. It includes a definition of the
waterMark() function and two statements:
makeLinkedImage(): creates the linked image of the watermark.
waterMark()repeatedly to check for changes in the window's or scroll area's size.
waterMark() function is based on checking four physical dimensions:
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 (
windowWidth), how much is the page scrolled (
pageScrollLeft), a spacer between the image and the window (
rightSpacer), and the size of the image
Notice that the highest Z index is computed on every iteration, as Z index of elements can change via the
setZposition() function of DOCJSLIB.
Created: November 9, 1998
Revised: November 9, 1998