Floating Image
Version 1.01
written by Gerald Holdsworth

Written primarily for use on the WYSIWYG Editor. This keeps a <DIV>, which can have an image as a background, in place while the rest of the window is scrolled.

Click here for a demo

Stylesheet for 'Floating Image':
#floater
{
 background:url('picture.jpg');
 width:256px;
 height:256px;
 position:absolute;
 top:-1px;
 left:-1px;
 text-align:center;
 z-index:2;
}
Javascript for 'Floating Image':
// You will need to add onload="setUpVars()" into the BODY tag of the HTML document
//
function setUpVars()
{
 timer=0;
 var el=document.getElementById('floater');
 var X=getPosition('floater',1);
 if (X<0)
 {
  X=(getViewWidth()-el.offsetWidth)/2;
  el.style.left=X+'px';
 }
 var Y=getPosition('floater',0);
 if (Y<0)
 {
  Y=(getViewHeight()-el.offsetHeight)/2;
  el.style.top=Y+'px';
 }
 el.setAttribute('basePosX',X);
 el.setAttribute('basePosY',Y);
 var div=document.createElement('div');
 div.style.position='absolute';
 div.style.left=parseInt(getPosition('floater',1))+parseInt(el.getAttribute('shadow'))+'px';
 div.style.top=parseInt(getPosition('floater',0))+parseInt(el.getAttribute('shadow'))+'px';
 div.style.width=el.offsetWidth+'px';
 div.style.height=el.offsetHeight+'px';
 div.style.backgroundColor=0;
 div.style.zIndex=1;
 div.style.opacity=0.5;
 div.id=el.id+'_shad';
 el.parentNode.appendChild(div);
 document.getElementById('coords').innerHTML=getPosition('floater',1)+'px,'+getPosition('floater',0)+'px';
}
window.onscroll=function ()
{
 var el=document.getElementById('floater');
 var X=el.getAttribute('basePosX');
 var Y=el.getAttribute('basePosY');
 clearTimeout(timer);
 timer=setTimeout('moveDiv('+(parseInt(window.pageXOffset)+parseInt(X))+','+(parseInt(window.pageYOffset)+parseInt(Y))+')',1);
}
function moveDiv(X,Y)
{
 var el=document.getElementById('floater');
// el.style.top=parseInt(window.pageYOffset)+parseInt(Y)+'px';
// el.style.left=parseInt(window.pageXOffset)+parseInt(X)+'px';
 if (getPosition('floater',0)<Y)
 {
  var step=getDiff(Y-getPosition('floater',0));
  el.style.top=(getPosition('floater',0)+step)+'px';
 }
 if (getPosition('floater',0)>Y)
 {
  var step=getDiff(getPosition('floater',0)-Y);
  el.style.top=(getPosition('floater',0)-step)+'px';
 }
 if (getPosition('floater',1)<X)
 {
  var step=getDiff(X-getPosition('floater',1));
  el.style.left=(getPosition('floater',1)+step)+'px';
 }
 if (getPosition('floater',1)>X)
 {
  var step=getDiff(getPosition('floater',1)-X);
  el.style.left=(getPosition('floater',1)-step)+'px';
 }
 if ((getPosition('floater',0)!=Y) || (getPosition('floater',1)!=X)) timer=setTimeout('moveDiv('+parseInt(X)+','+parseInt(Y)+')',1);
 else clearTimeout(timer);
 var els=document.getElementById('floater_shad');
 els.style.top=(parseInt(getPosition('floater',0))+parseInt(el.getAttribute('shadow')))+'px';
 els.style.left=(parseInt(getPosition('floater',1))+parseInt(el.getAttribute('shadow')))+'px';
 document.getElementById('coords').innerHTML='Target: '+X+','+Y+'<br>'+getPosition('floater',1)+'px,'+getPosition('floater',0)+'px';
}
function getDiff(diff)
{
 var step=1;
 if (diff>10) step=10;
 if (diff>50) step=50;
 return step;
}
function getPosition(id,x)
{
 var obj=document.getElementById(id);
 var topValue= 0,leftValue= 0;
 while(obj)
 {
  leftValue+= obj.offsetLeft;
  topValue+= obj.offsetTop;
  obj= obj.offsetParent;
 }
 if (x==0) finalvalue = topValue; else finalvalue=leftValue;
 return finalvalue;
}
function getViewWidth()
{
 if (typeof window.innerWidth!='undefined')
  w=window.innerWidth;
 else if (typeof document.documentElement!='undefined' && typeof document.documentElement.clientWidth!='undefined' && document.documentElement.clientWidth!=0)
  w=document.documentElement.clientWidth;
 else w=document.getElementsByTagName('body')[0].clientWidth;
 return w;
}
function getViewHeight()
{
 if (typeof window.innerHeight!='undefined')
  w=window.innerHeight;
 else if (typeof document.documentElement!='undefined' && typeof document.documentElement.clientHeight!='undefined' && document.documentElement.clientHeight!=0)
  w=document.documentElement.clientHeight;
 else w=document.getElementsByTagName('body')[0].clientHeight;
 return w;
}
Click here to download.

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services