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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint