You will have noticed this effect out on your travels on the internet - a text input field has some default text in it (often in a slightly dimmed colour), and when you click on the text box, default text disappears and then reappears when you click away from the box. It happens on the search box to the right here too.
I needed this same effect at work today so a quick Google came up with this great blog post - a lovely example of the exact effect I was looking for in both raw javascript and a version using the jQuery library.
The script searches the page that it’s inserted on for all form input fields that have a class of ‘default-value’ applied. Each form input field must also have a unique ID.
When the page loads the script changes the color of the text in the text fields it has found to the value of ‘inactive_color’. If the user clicks on the input field, the default text is blanked, and the colour changed to ‘active_color’. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to ‘inactive_color’, unless the user has entered some other text.
Here’s a copy of the jQuery version for my own personal notes, never know when that could be useful:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| /*
* Written by Rob Schmitt, The Web Developer's Blog
* http://webdeveloper.beforeseven.com/
*/
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
$(document).ready(function() {
$("input.default-value").css("color", inactive_color);
var default_values = new Array();
$("input.default-value").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
$(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
}); |
However, we don’t use jQuery at work, our entire site is based around Prototype and script.aculo.us, so I did a bit of butchering and here’s the code adapted to use Prototype:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| /*
* Written by Darren Oakley
* http://hocuspokus.net
*/
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
Event.observe( window, 'load', function () {
var default_values = new Array();
$$("input.default-value").each( function (s) {
$(s).setStyle({ color: inactive_color });
$(s).observe( 'focus', function () {
if (!default_values[s.id]) {
default_values[s.id] = s.value;
}
if (s.value == default_values[s.id]) {
s.value = '';
$(s).setStyle({ color: active_color });
}
$(s).observe( 'blur', function () {
if (s.value == '') {
$(s).setStyle({ color: inactive_color });
s.value = default_values[s.id];
}
});
});
});
}); |
Now all you need to do is give your input text fields a unique id, and the class of ‘default-value’, then the script will take care of the rest.
Following up from my old guide to installing PostgreSQL (for Ubuntu 7.10), I thought i’d better do an update for the latest releases… 
This quick walk-through are my notes for installing the PostgreSQL database server and the PgAdmin administration application on Ubuntu Linux, and also set up the server so it allows access to other PC’s on your network.
Before we move on, this guide was tested on the current release of Ubuntu Linux, (8.04 - Hardy Heron) and PostgreSQL 8.3, but it should also be applicable to older versions (of Ubuntu and PostgreSQL) and other Debian based distros.
Continue reading ‘Install PostgreSQL on Ubuntu 8.04’
Bio-Linux is a specialised Linux disro that provides both standard and cutting edge bioinformatics software tools on a Linux base.
I wrote a post on my old blog a little while back now detailing how to use the packages from Bio-Linux in Ubuntu Linux, but it got missed in the migration (sorry to all those who have been searching for it). Here’s a repost and update for Ubuntu 7.10…
Continue reading ‘Bio-Linux - Bioinformatics Tools for Linux’
I’m a bit of a command-line freak and like to spend a fair amount of time with the terminal open… As such I like to spend a small amount of time getting the terminal set-up nicely. Other than changing the default colour scheme and font, one (slightly) more drastic change is to replace the standard implementation of ls for one that is slightly more configurable.
The default ls on OS X comes from BSD and compared to the GNU/Linux alternative is slightly lacking when it comes to comes to changing how things look - so what I like to do is replace it with the GNU ls available in MacPorts - this allows me to get a terminal setup like below:
Continue reading ‘A Better Ls for Mac OS X’
If you are using the latest version of Ubuntu (8.04 - Hardy Heron), you might find these slightly updated instructions useful.
This quick walk-through are my notes for installing the PostgreSQL database server and the PgAdmin administration application on Ubuntu Linux, and also set up the server so it allows access to other PC’s on your network.
Before we move on, this guide was tested on the current release of Ubuntu Linux, (7.10 - Gutsy Gibbon) and PostgreSQL 8.2, but it should also be applicable to older versions (of Ubuntu and PostgreSQL) and other Debian based distros.
Continue reading ‘Install PostgreSQL on Ubuntu 7.10’
TableKit is a great javascript library for making your HTML tables fully editable. However, one problem is that you can’t add or delete rows from the tables…
I came up with a solution to this not so long ago, but it still had a problem - TableKit caches the tables on loading, so after we update the table body (adding or deleting a row) the sorting and editing of the table is completely screwed! 
However, with a little more work, and some help from one of the guys in the office - we’ve finally got this cracked!
Continue reading ‘Adding/Deleting Rows in TableKit Tables Revisited’
This post has now been updated. Please head over to the new post for something better…
Following on from my previous post on how to integrate the excellent TableKit into your Catalyst webapp (to make your data tables dynamically editable), here’s how i’ve gone about adding ajax inserts and deletes so that you can add and remove data rows in your tables.1
Continue reading ‘Adding/Deleting Rows in TableKit Tables’
One of the useful things that i’ve been asked to set-up lately is automatic logging of changes to several of our database tables.
My first thought was to do this in Perl (as the rest of the system is in Perl), but this would mean adding extra methods and calls in the Perl code to update the database (both the original tables and the new log tables). That seemed like a solution - a pain in the arse to implement, but a solution.
Thankfully one of the helpful chaps in my department suggested doing it all in the database with triggers as this is quite common in banks and the like. What a damn fine idea! Only a little SQL to write and no extra Perl.
Continue reading ‘Log/Audit Tables in Oracle’
This is old news to most people who have been using Oracle for a while, but to me this is something new that I learnt today. How to have MySQL like “auto-increment” id’s for your tables in Oracle. Here’s an example…
Continue reading ‘Auto-Increment ID’s in Oracle’
Catalyst is an MVC web-development framework for Perl, very similar in concepts, ideas (and even some of the implementation) to Ruby on Rails. I’m using Catalyst a lot in my job now, and one of the first challenges that i’ve had to go through is making dynamically editable tables for some of the views we are using (in other words, Ajax driven edit-in-place tables).
Following a short Google, there seemed to be only two ready-made options I could see: one, using the Catalyst controller module Catalyst::Controller::ROSE::EIP; or two, by integrating and using the stand-alone javascript package TableKit.
Continue reading ‘Making Editable Tables With Catalyst and TableKit’
