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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management
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.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags