Introducing DOCJSLIB 3.0, Watermarks Implementation - Doc JavaScript

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:

var windowWidth= 0;
var windowHeight= 0;
var pageScrollLeft= 0;
var pageScrollTop= 0;
var imageWidth= 147;
var imageHeight= 17;
var rightSpacer= 17;
var bottomSpacer= 17;
function waterMark(){
  if (navigator.appVersion.indexOf("Mac") == -1){
    oldWindowWidth= windowWidth;
    oldWindowHeight= windowHeight;
    oldPageScrollLeft= pageScrollLeft;
    oldPageScrollTop= pageScrollTop;
    windowWidth = docjslib_getWindowWidth();
    windowHeight = docjslib_getWindowHeight();
    pageScrollLeft = docjslib_getPageScrollLeft();
    pageScrollTop = docjslib_getPageScrollTop();
    if ((windowHeight != oldWindowHeight)||(windowWidth != 
      oldWindowWidth)||(pageScrollLeft != oldPageScrollLeft)||
      (pageScrollTop != oldPageScrollTop)){
      docjslib_setPosFromTop("docjslib", windowHeight + pageScrollTop - 
                            (imageHeight + bottomSpacer));
      docjslib_setPosFromLeft("docjslib", windowWidth + pageScrollLeft - 
                            (imageWidth + rightSpacer));
      var topZ = docjslib_findHighestZ();
      docjslib_setZposition("docjslib", topZ);
    }
  }
}
docjslib_makeLinkedImage("docjslib",             // id
              "docjslib.gif",                    // image URL
              "https://www.webreference.com/js",  // link URL
              27,                                // height
              147,                               // width
              "Click here for all Doc JavaScript Columns",  // alternative
              0,                                 // position from left
              0,                                 // position from top
              true,                              // visibility
              0);                             // z index
             
docjslib_doThisCommandEveryIntervalMS("waterMark()", 100);

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.
• 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).

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

URL: https://www.webreference.com/js/column29/caller