Archive for June, 2009

Javascript: Creating an Image Watermark

Well, this is my last javascript post for a bit, seeing as this is just an offshoot of my last post Javascript: Dynamically Altering CSS Properties. In this post, we’ll go over creating a simple Javascript watermark for a textbox using an image. If you are curious how to create a watermark with just text, read my other post on how to create a textbox text watermark. A textbox watermark can help encourage its use and reduce confusion for your users. I typically employ a watermark for textboxes that exist outside of a form (they only gather one piece of needed information such as a zip code as opposed to an entire address).

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function hideWatermark(theID)
{
    var element = document.getElementById(theID);
    element.style.backgroundImage = 'none';
    element.style.backgroundColor = 'white';
}
function showWatermark(theID)
{
    var element = document.getElementById(theID);
    if (element.value.length == 0)
        element.style.backgroundImage = 'url(\'IMAGE_LOCATION_HERE\')';
    else
        element.style.backgroundColor = 'white';
}

On focus (when the user clicks on the textbox) the hideWatermark function is called. The javascript takes in a string of the textbox ID. It then sets the background image to none, and the background color to white. On blur (when the user clicks away from the textbox, putting focus on any other element), the showWatermark function is called. This javascript also takes in the same ID. It then checks to see if the content of the textbox is empty, if it is, it puts the background image of the watermark back in. If it is not empty, then it keeps the background color as white.

Here is the HTML that goes with the JS:

<input type="text" class="gatherZip" id="theTextBox" onblur="showWatermark('theTextBox')" onfocus="hideWatermark('theTextBox')" />

And the CSS:

.gatherZip{
   background: white url('IMAGE_LOCATION_HERE') no-repeat center center;
}

The image you create can say or imply whatever you want. As an estimate, try to keep the image no more than about 15 pixels high or it won’t fit in standard sized textboxes. And that’s it. A beautiful textbox watermark just for you and your users! Comments? Questions?

Javascript: Dynamically Altering CSS Properties

I’ve been on a string of javascript posts, starting with Javascript: Opportunities Abound and then Javascript: Changing Class Names to Alter CSS. Well now I want to talk about a variant of altering CSS classes, and that is just altering inline style. I use this infinitely more than changing a CSS class. You can do a lot of very easy and simple interactions for the user that are really quite easy. You can show and hide divs, change background colors or images (I’ll use that to create textbox watermarks in my next post), and much more.

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function changeInlineStyle(tagID){
   var theTag = document.getElementById(tagID);
   if (theTag.style.display == 'block')
      theTag.style.display = 'none';
   else
      theTag.style.display = 'block';
}

The javascript first takes in a string with the tag ID that you send to it in the HTML below. Then, it creates an object that represents that ID which is named theTag. Then with a simple if statement, the javascript checks to see if the object is visible. If it is, it hides it, if it is hidden, it shows it. This is great for toggling a div with certain content. You can change different aspects of style though. Try "backgroundImage" or "backgroundColor" to change background characteristics. You can mess around with any aspect of tag’s style that you want. Text color, float, width, height, whatever you want. I have found the most common ones I use are display, backgroundColor, and backgroundImage though.

Here is the HTML that goes with the JS:

<a href="#" onclick="changeInlineStyle(targetTag);">
<div id="targetTag">This div will hide when the link above is clicked</div>

Yep, simple as that! When the link is clicked, it calls the javascript function, sending over the id to identify the tag it should work with. In this case, the link targets the div below it. Simple as that! I’ll talk about textbox watermarks next. Comments? Questions?