Q1201 How can I make a watermark that floats and remains in the bottom right hand corner of the window whilst I scroll through a document in either Netscape Navigator 4+ or Internet Explorer 4+?

You are here: irt.org | FAQ | DHTML | Q1201 [ previous next ]

Try:

<html>
<head>
<script language="JavaScript"><!--
var x=100,y=50,dl=document.layers,da=document.all;
dl?(iW=window.innerWidth-x,iH=window.innerHeight-y):(da?(b=document.body,iW=b.offsetWidth-x,iH=b.offsetHeight-y):null);

function pageOffset() {
    dl?(dl.o.pageX=window.pageXOffset+iW,dl.o.pageY=window.pageYOffset+iH):(da?(da.o.style.posLeft=b.scrollLeft+iW,da.o.style.posTop=b.scrollTop+iH):null);
    setTimeout('pageOffset()',10);
}
//--></script>
</head>

<body onLoad="(dl || da)?pageOffset():null">

<div id="o" style="position:absolute;"><b>&copy; <a href="http://www.irt.org/">irt.org</a></b></div>

...

</body>
</html>

The above does not work in Netscape Navigator 6. The following does:

<html>

<head>

<script language="JavaScript"><!--
function DOMGetElement(o) {
  if (document.getElementById) return document.getElementById(o);
  else if (document.all)             return document.all[o];
  else if (document.layers)          return document.layers[o];
  return null;
}

function DOMWindowGetXOffset() {
  if (document.all)            return document.body.scrollLeft;
  else if (document.getElementById)  return window.pageXOffset;
  else if (document.layers)          return window.pageXOffset;
}

function DOMWindowGetYOffset() {
  if (document.all)             return document.body.scrollTop;
  else if (document.getElementById)  return window.pageYOffset;
  else if (document.layers)          return window.pageYOffset;
}

function DOMElementSetTopPos(o,val) {
  if (document.getElementById) o.style.top = val;
  else if (document.all)       o.style.top = val;
  else if (document.layers)    o.pageY = val;
}

function DOMElementSetLeftPos(o,val) {
  if (document.getElementById) o.style.left = val;
  else if (document.all)       o.style.left = val;
  else if (document.layers)    o.pageX = val;
}

function DOMWindowGetInnerWidth() {
  if (document.all)           return document.body.clientWidth;
  else if (document.getElementById)   return window.innerWidth;
  else if (document.layers)           return window.innerWidth;
}

function DOMWindowGetInnerHeight() {
  if (document.all)          return document.body.clientHeight;
  else if (document.getElementById)  return window.innerHeight;
  else if (document.layers)          return window.innerHeight;
}

function DOMElementGetHeight(o) {
  if (document.all)                 return o.clientHeight;
  else if (document.getElementById) return parseInt(o.offsetHeight);
  else if (document.layers)         return o.document.height;
}

function DOMElementGetWidth(o) {
  if (document.all)                 return o.clientWidth;
  else if (document.getElementById) return parseInt(o.offsetWidth);
  else if (document.layers)         return o.document.width;
}

function pageOffset() {
  var o = DOMGetElement('o');
  if (o) {
    DOMElementSetLeftPos(o, DOMWindowGetXOffset() + DOMWindowGetInnerWidth() - DOMElementGetWidth(o) - 20);
    DOMElementSetTopPos(o, DOMWindowGetYOffset() + DOMWindowGetInnerHeight() - DOMElementGetHeight(o) - 20);

    setTimeout('pageOffset()',10);
  }
}
//--></script>

</head>

<body onLoad="pageOffset()">

<div id="o" style="position:absolute; background-color: #ffffff;"><b>&copy; <a href="http://www.irt.org/">irt.org</a></b></div>

...

</body>
</html>