Sometimes it is not totally obvious what you are looking for the user to enter into a text box.

Take this one here:

It is not obvious what we are looking for in this form, By email might is probably an email address. In person is probably an address. Online? That could also be an email address, a skype name, a msn messenger account name, a website…. you get the idea. Other, well, that could be anything, but what is that second box for? To be fair, the form has values in it telling what should be done, I removed those for the sake of the example. That is indeed one way of doing it, but that means that someone has to select all of the text and delete it when they get to that box. I don’t know about you, but I find it a little annoying when I have to do that… So, I started looking for a solution, and I found one that uses jQuery (my javascript library of choice). I could have written it myself of course, its not that hard really:

if(form.input is empty) {
   form.intpu.value = form.input.text
}
if(form.input is clicked){
   form.input.value = ""
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

I decided to modify that slightly, so that if the form was filled with the value found in text it would be lighter than normal, so:

if(form.input is empty) {
   form.intput.value = form.input.text
   form.css("color", "#999")
}
if(form.input is clicked){
   form.input.value = ""
   form.css("color", "#000")
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
   form.css("color", "#999")
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

Here is the final result:

Oh ya, a bonus is that when they hover over it and have javascript turned off it will show the hint as well, and it is screen reader friendly! Accessability is good!

If anyone wants the code I can post it.

I was making a new template for my site. I was originally going to make it all curvy and web 2.0… but I figured, since I am not the best at the visual design of things I went with this. I like it.

While I was making it, I was looking at using jQuery to do the curvy web 2.0 things. Now, if you have not used jQuery before, you should check it out, it is simple and there are a million plugins for it. There is one for corners (which I was going to use), there is a lightbox one, so on and so forth. It is also really small, the version included with the latest wordpress install is 1.2.3 which is about 30 KB. The latest version is 1.2.6.

Since I was not going to make it all curvy I decided to add an easter egg to my blog using jQuery.

At first I kept getting the error:

Error: $ is not a function
Source File: http://localhost/blog/
Line: 22

That is apparently because Wordpress uses a lot of different javascript libraries and apparently they have done a bit of rewritting. instead of using the $(”") to start your jQuery javascript, you use jQuery(”"). This took a bit of searching and testing to find out, but in the end I got that figured out. It was then on to the code to make the easter egg work. Here it is:

jQuery(document).ready(function(){
 jQuery("h4").click(function(){
  jQuery(this).fadeOut("fast", function() {
      jQuery(this).html("π").fadeIn("fast");
      });
  });
});

Step by step:
1 -> Load this when the page loads
2 -> Whenever a h4 is clicked (there is only one here so its fine to do it this way)
3 -> Fade out what we clicked on fast
4 -> fade in pi

Nice and easy (and it looks cool too). This could be put to much more practical uses like translations or possibly a slide show of images (fadeIn pause fadeOut, fadeIn next image). For now it will just be a small easter egg that I added to my site.

Oh, and apparently the google syntax highliter has decided not to work in this version of wordpress so, I am now using wp-syntax instead.

Oh ya… and you have to have these lines in your code before you call any of the jQuery functions.

<script src="./wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script src="./wp-includes/js/jquery/jquery.corner.js" type="text/javascript"><!--mce:1--></script>

(PI is an inside-ish joke by the way)

Edit: You do not need the jquery.corner.js part… unless you want fancy corners.. you would also have to download it too… if not you will get an error.

Ok, I think there is a bug somewhere, if you click through using the page links, and do a search the pi thing will work. If you rely on the cache (go to the same page by clicking on the title link of a post/page) it does not work at all. (At least in FF3)

Apparently it won 2nd prize at a mashup camp. Though, I think I may be a robot…

I like how the guy with the beard shows up twice…