Floating Water Mark

Not sure if this is in the category

[jantmo]

I have put a floating watermark (I think this is what you call it) on my webpage the only problem is is when you scroll down it jump up. Is there anyway to get this thing to stay still?

[Nick_W]

Hi, welcome to WebmasterWorld!

Presumably you've put this as a background image?

[pre]
background-image: url(/path/to/img.jpg);
background-attachment: fixed;
[/pre]

Should do the trick...

Nick

[tedster]

Welcome to the forum, jantmo.

Getting that kind of effect with DHTML (if that's what you're doing) can be very touchy - you get it to look good on one browser and then it acts up on another. I've tried several different approaches, and I don't recommend any of them.

The only "real" answer I know of will come when more browsers support the CSS position:fixed. Opera does it now, and it looks very nice. Fixed position takes almost no code compared to the DHTML mess that has been used up until now.

[Nick_W]

Do you know off-hand who does support it tedster?

I've never used it, I just know how it's done ;)

Nick

[tedster]

Here's a good test page:

[w3.org...]

The light blue W3C rectangle (top, left) is position:fixed. Opera 6 supports it, Netscape 6 tries to, but the image gets the jitters as you scroll. IE6 doesn't render the image at all.

I don't have Moz on this box so I can't check it right now.

[jantmo]

Here is the code I tried your suggestions and it still sets in the corner and jumps as you scroll the page. Also thanks for the welcome this is a really good resource.

or if there is a simpilar code I would appreciate any help

<!-- Watermark Start -->
<script language="javascript">
if (document.images)var staticlogo=new Image(150,50);staticlogo.src="http://www.whereever/whereever/picture.jpg";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>
<!-- Watermark End -->

[tedster]

Yep, it's going to do that. You can play with the variables to get it to be somewhat less jarring, but it's most likely going to be a problem.

This particular code tests for two objects - document.layers and document.all Neither one is standard code. You can learn more about how to transition to standards on this page [stopbadtherapy.com]

This is a pretty big leap for a "New to Web Development" Forum. My heartfelt advice is to leave it alone. It's a fancy doo-dad that will not work cross-browser. Ask yourself how much it really does to enhance your website's message.

However, adventurous friend, if you're dead set on having that watermark look good, you've got some homework to do.

Here's another reference [html.miningco.com] that describes the two approaches to a floating watermark we've touched on here: CSS and DHTML. Study it well, and you may find the results you're looking for.

[Knowles]

I don't have Moz on this box so I can't check it right now.

It works fine on Moz1.1b I didnt notice any jittering at all.