Non-scrolling IMG or DIV

fixed DIV

[opyate]

Good day everyone!
We all know that w3c compliancy is a dream still to come true, and a lot of us would like to fix DIVs or IMGs. The option in Opera and NS6 is 'fixed', but in IE this doesn't work.
I also know the option to this is the following piece of code:

<fixed-start>
<script language="javascript">
if (document.images)var staticlogo=new Image(50,50);
staticlogo.src="http://www.websiteaddres.com/myimage.gif";
var logolink="http://www.websiteaddres.com";
var alttext="popup text";
var fadeintoview=1;
var visibleduration=0;

function regenerate(){
window.location.reload()
}

function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}

var fadeset='';
if (fadeintoview);
fadeset="filter:alpha(opacity=3)";
if (document.all)
document.write('<span id="logo" style="'+fadeset+';position:absolute;top:100;width:'+staticlogo.width+';height:'+staticlogo.height+'"></span>')

function bringintoview(){
if (logo.filters.alpha.opacity<=95)
logo.filters.alpha.opacity+=5;
else{
clearInterval(viewit);
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}

function createlogo(){
staticimage=new Layer(100);
staticimage.left=-300;
staticimage.top=120;
staticimage.document.write('<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>');
staticimage.document.close();
staticimage.visibility="show";
regenerate2();
staticitns()
}

if (document.layers)
window.onload=createlogo;
if (document.all){
w=document.body.clientWidth-logo.style.pixelWidth-25;
h=document.body.clientHeight-logo.style.pixelHeight-10;
logo.style.left=w;
logo.style.top=h;
}

function logoit(){
var w2=document.body.scrollLeft+w;
var h2=document.body.scrollTop+h;
logo.style.left=w2;
logo.style.top=h2
}

function logoit2(){
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-15;
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height
}

function insertimage(){
logo.innerHTML='<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>';
if (fadeintoview)
viewit=setInterval("bringintoview()",100);
else{
if (visibleduration!=0);
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}

if (document.all){
window.onscroll=logoit;
window.onresize=new Function("window.location.reload()");
window.onload=insertimage
}

function staticitns(){
setInterval("logoit2()",90);
if (visibleduration!=0);
setTimeout("staticimage.visibility='hide'",visibleduration*1000)
}
</script>

<fixed-end>

The problem with this code, though, is that it is jittery. The image flashes when you scroll.

I would like to know if there is any alternative. I've searched high and low and couldn't find suitable code.

-----I've seen on some sites, that if you scroll, the image stays where it is (it even goes out of page's scope if you scroll too far) until you stop scrolling, and then it smoothly drops into place.-----

Thanks in advance! :)

[grahamstewart]

> viewit=setInterval("bringintoview()",100);

Try increasing the number on this line to 1000.
That should increase the amount of time it waits before moving the 'fixed' logo, which should stop it flashing so much.

(but yeah, it would be nice if Microsoft got its finger out and sorted fixed positioning, and PNG support, and...)