homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
Floating Water Mark
Not sure if this is in the category
jantmo

10+ Year Member



 
Msg#: 63 posted 9:42 am on Sep 4, 2002 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 63 posted 10:00 am on Sep 4, 2002 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 63 posted 10:01 am on Sep 4, 2002 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 63 posted 10:05 am on Sep 4, 2002 (gmt 0)

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

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

Nick

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 63 posted 10:11 am on Sep 4, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 63 posted 1:36 pm on Sep 4, 2002 (gmt 0)
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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 63 posted 2:46 pm on Sep 4, 2002 (gmt 0)

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

10+ Year Member



 
Msg#: 63 posted 2:52 pm on Sep 4, 2002 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved