The Watermark

To make room for “Live Updates” on the sidebar of our LRCP site, I decided to move the main fundraising goal bar(s) out to the margin of the page. I think it’s important to have this imagery to remind folks that we still have some ways to go before we’re at our goal, and it also spruces up the page a little.

I wanted to make it a bit more noticeable to visitors, however, and decided to make image scroll with the page. Often, this is called a “watermark” — at least, as far as I’m aware. You wouldn’t know it by how long it took me to find a suitable script that does this, however. But I’m guess the main reason it was so hard to find was that this little trick went out of style a few years back.

Normally, I’m loathe to add these gimmicky little things to sites, because I think it really distracts the reader. But in this case, I think it’s a good distraction/reminder of the donation area we have.

Problem #1: Finding a way to do it
I’m not an artist, and I’m also not a coder. So, I can’t write these type of scripts myself. I mainly rely on tutorials and freely available pre-written scripts to accomplish these types of things.

Unfortunately, when searching for “floating watermark” I ended up with a lot of hits in the search engines for how to add a watermark to an image to keep it from getting stolen. Obviously, not what I was looking for.

By chance, I remembered that stuff like this is often accomplished using Dynamic HTML (DHTML), and added that term as well as “script” to my search: “watermark script dhtml”. Suddenly, I had all the hits I needed.

I’ve used Dynamic Drive scripts before, so I went with the one that came up for this particular need. I generally don’t like About.com’s web design guru, as some of her tutorials seem a bit dated, so I avoided that hit. (Although, on closer inspection, it turns out that’s she’s using Dynamic Drive’s scripts.)

Installing
Dynamic Drive is using a javascript, which requires me to put something in my HTML, but also upload a separate file that will process the script.

So, first I need to insert some code into my page. This code has two purposes. The first purpose is to tell the browser that the image is going to go “here” — where-ever I put the code. If you take a look, you’ll see that we first create a div with “style=position:absolute”. This means that whatever is in this div (which will be our image) is going to be placed on our page in an “absolute” position. Absolute positioning, with CSS, allows an element to cover other elements, and be placed in a specific spot on the page regardless of how other elements are positioned with CSS. If I wanted, I could also add to this div an attribute like “bottom:20px” which would tell the browser to push the image 20px away from the bottom edge of the screen. However, our javascript will already do this for me, which we’ll get into in a minute.

The next line of the script just “calls” the actual javascript, thus telling the browser that for further instructions, it needs to call up our javascript file.

Configure the script
Next, I needed to configure the javascript. This is quite simple to do, as javascript files are kinda like text files. To take a look at the javascript file, go here.

As you can see, the script is very well written, and walks me through what needs to be configured near the top of the file — pretty self-explanatory.

Once I’m done configuring, I upload it to the same place where my page files are. With WordPress, you’re going to put the script in the same folder where your “wp-config.php” file resides.

Problem #2: Browser differences
In a perfect world, every browser out there would do things exactly the same, and everything we create on our websites would look exactly the same on every browser. Unfortunately, that never happens.

After I had uploaded my javascript, I opened up the LRCP main page to see how it looked — but it wasn’t there! I use Firefox, and so I was immediately suspicious that this was a browser compatibility issue.

I figured up Internet Explorer 7, and sure enough the graphic was exactly where it was supposed to be, and was behaving just as it should (scrolling down so that it always stays in the bottom right-hand corner of my screen).

Thus, I realized that I was going to have to create a way for Firefox users to see the image properly. On further investigating, I realized that the image was showing up for Firefox, but in the very bottom left-hand corner of the page. The position in the bottom left-hand corner of the page is the default absolute position for an element, so this tells me is that for whatever reason, Firefox can’t process the script I’m using.

Firefox has about 15% market share for browsers, and I’d be willing to bet that the LRCP folks are probably not high-adopters of this browser. Nonetheless, if the solution is not too onerous, I want to make sure that those that do use Firefox (including me!) can see the image.

Separate the peas and carrots
I figured the easiest way to create a solution for both Firefox and IE users is to create a way for the browser to tell Firefox to display the image in one way, and tell Internet Explorer to display the image using the script. I already knew that I could absolutely position the image, so I figured that I could simply put the image in the upper right-hand corner of the screen, and just leave it there for Firefox folks.

But how to do this? I figured that a good php “if / else” script would work, so I searched for “tutorial

Another pre-written script, of course! I looked on the web for “php if browser,” and found this page. Their “Simple PHP browser detection” script was exactly what I was looking for.

Take a look at the script, here. I won’t go over the whole thing, but scroll down to the bottom and you’ll get to the good part.

When we get to this point, “if ( $user_browser == ‘mozilla’ )”, the php script is telling the browser that IF the browser is Mozilla (the architecture that Firefox is built on), then do the following. Directly after that, you’ll see that I tell the browser to have the image placed statically in the upper right-hand corner of the page, 5 pixels away from the upper border, and 5 pixels away from the right border.

Next, you’ll see the php command which tells the browser, in code-speak “otherwise, if the above isn’t true, then do the following.” Below that “else” command, you’ll see our original script for Internet Explorer.

This entire browser detection script gets put into the page, at the location where I originally just had the IE script.

Now, when you pull up the page in Firefox or Internet Explorer, you get an acceptable version of our goal bar image!