Simple way to add watermarks to your textboxes for a little flair in your input forms

I have always used the TextBoxWatermark control that is supplied with the AjaxControlToolkit which is very easy to use and I highly recommend it.  But recently I was asked to figure out a way without using 3rd party tools, hence in JavaScript.  At first I figured it was going to be simple, just clear the text when you click on the box and maybe change the background color.  Simple, that works.   Thats when I ran into my next problem.

I wanted a textbox that was forr passwords, it would start out and say 'password' but then when you clicked on it, that would disappear and it would become a type="password" box (display text as: ******).  It worked flawlessly! ...in non-crappy browsers.  IE7 dumped all over my dreams yet again and left me with a Javascript error.  Turns out you can't change the type property in IE7 (apparently it works in IE6???) which is completely stupid.

So, I did some good old googling which brought me here to find out that in order to change type, you now have to make an entire new object and swap it out with the old one.  So after that, it works, but my focus is all screwed up: I click on the blank, the password text disappears, but the cursor is not in the textbox I just clicked?!  That brought me here which showed me a crazy way to reset focus on a lost object:

window.tempObject = newObject;
   setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);

Now everything seems to work just fine.  BUT, they aren't.  For one thing, I had had an onblur statement in my textbox originally (not in the example, but for discussion purposes) and since the new object did not have an onblur, I had to make sure to re-add that back in.  Also, the same loss goes for CSS class, but that might want to change, so I added a new field into the function to take into account a new CSS class.  If it is left blank, it will inherit the old CSS class if there is one, or simply have no class like Britney Spears. 

Ok, so I *thought* that would be easy, but IE comes back again to spite me.  For most browsers, you can set Object.setAttribute("onblur", "JSmethod") but IE decides that isn't good enough, so you have to to this Object.onblur = function(){js_function(god, damnit, ie);}; (from this thread).  Ok, now that we have that fixed, we can look at the CSS class.  It's mostly the same, but this is yet another IE specific problem.  You need to include two different declarations: Object.setAttribute("class", "css_class"); for most browsers and Object.setAttribute("className", "css_class"); for IE.  This time the IE fix/hack will not work for cross-browser compatibility.  So here is the finished JS:

Remember though that you will have to validate that the original values are not in the textboxes when the user submits, as they will not be empty initially.  Here is a fully working example to mess with, it shows how to use it both for a simple watermark/mask and also with a password field change.  It also includes how to add javascript function calls and deal with changing (or persistent) css:

If you have a form that limits characters entered into a textfield, using this simple approach you can automatically jump to the next control, making it easy for your user

Say you have a zip code field that takes in 5 numbers, next you have a state dropdown.  Your user should be able to type in the 5 digit zip code, then boom, the focus is automatically shifts to the dropdown.  It is very simple to implement.  It just requires the following JS function:

function next(currentControl, maxLength, nextControl)
   {
    if(document.getElementById(currentControl).value.length >= maxLength)
    document.getElementById(nextControl).focus();
  }

and then just call this from a textbox in html:

<input id="Text1" onkeyup="next('Text1', '5', 'Text2')" type="text" />

Or if you are using an asp.net TextBox control:

txt1.Attributes.Add("onkeyup", "next('txt1','5','txt2')");

it's just that easy... here is an example using both asp.net and just html:

Recently on a forum the question was asked how to redirect using a dropdown and not using any server side scripting - the answer turns out to be pretty simple

All that is needded is a simple Javascript function that takes in a drop-down list as an input, takes the value of the selected option and run it through a location.href.  Here is the JavaScript:

function Navigate(drop_down_list) {
   var number = drop_down_list.selectedIndex;
   location.href = drop_down_list.options[number].value; }

Then all you need to do is add a dropdown list setting the values to the urls you want to navigate to, and the onclick event set to Navigate(name_of_dropdown) and you are all ready to go. Here is a quick example:

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

 I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good.  Even though they don't really go with any of my sites, I wanted to know how they were done.  I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!). 

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier.  It works for single-line textboxes as well as checkboxes.  You could easily take the concept to a multiline textbox if you just added some larger images.  The code is pretty self-explanatory, so I won't get into the details here.  I included the .png files so you can customize the colors if you want - just drop in the code and go.

This is a great way to add a little visibility to your users, it adds an icon next to your file links, showing them visually what it is

I take no credit at all for this, all the credit belongs to http://pooliestudios.com/projects/iconize/ 

This is a great tool - and very simple when you look at it I got rave reviews when I implemented this on our in-house web-based fileshare system at work.  Hopefully it can help you out too!

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:

<body>

  <div class="wrapper"> 

    Put your content here

    <div class="push"></div>

  </div>

  <div class="footer">
    Footer Here

  </div>

</body>

All credit goes to http://ryanfait.com/sticky-footer/ - thanks this is great!

Everyone has a javascript toggleDiv function somewhere, but this is the cleanest one you will ever see

All this is is an expand and collapse of whatever you want it to expand/collapse - it is made for divisions with the 'block' declaration, but could also be used for inline elements if you simply changed it to 'inline' 

function toggleDiv(divid){
  var div = document.getElementById(divid);
  div.style.display = div.style.display == 'block' ? 'none' : 'block';}

Basically it is just a condensed if/then statement.  Keep in mind it will only work on the very first click if you already have 'display' set to 'block' or 'none' at first, otherwise it will take 2 clicks.  It is about as simple as it gets.

A slick way to make rollover tooltips with nothing other than a little css and some html - also works well for image thumbnail rollovers as well

In the past, I have made tooltips with JavaScript, and that can get lengthy and messy - I prefer to use JavaScript as little as possible. So I recently figured out a way to make tooltips and picture enlarging rollovers that is very simple and uses nothing but css and html.

Ok, first thing we need to do is to understand how this is going to work: basically, you are going to embed your tooltip with an element inside your link; for this exampe, I chose span as it is already there and easy to work with. Then we must hide that text with display:none; in css.

Now I want the tooltip to stay close to the link that you hover over to get it (you could use this to put the link anywhere on the page as well) so I have to make the link relative, and the embedded span will be positioned absolutely, and sice it is positioned absolutely to the reatively positioned link, it will appear relative to the link (wow... that looks confusing when I put it down in text).

Now with that out of the way, we just have to add a :hover state to the class and change it's display to display:block; to make it visible. Add a little formatting and you get the following css:

As you can see, I set width:100px; as I am using a full sized image and I wanted to shrink it. Here is your image rollover


And there you have it, a simple way to get css rollover tooltips. They can be pretty useful when you want to stick something in your page but it may be intrusive or ugly to be there all the time.

A very simple example can be downloaded from the steal some code repository or just pick it up here: css_tooltips.zip (67.91 kb)