Tip: Save space with edit box titles
January 24th, 2008 | Published in Google Desktop API
Desktop gadgets are often small, and it is sometimes a challenge to present all the information you need. If the gadget has a lot of edit boxes, one idea is to set the title (or label) of the edit box inside the edit box itself when it's not active. The Carbon Footprint Calculator gadget uses this technique. You need to handle the onfocusin and onfocusoutevents as shown below.
function OnEditIn(editbox, text) {
if (editbox.value == text) {
editbox.value = "";
//Indicate the field is active. Un-italicize and un-gray the text.
editbox.color = "#000000";
editbox.italic = false;
}
}
function OnEditOut(editbox, text) {
if(editbox.value == "") {
editbox.value = text;
//Gray out and italicize the font for the hint.
editbox.color = "#AAAAAA";
editbox.italic = true;
}
}We pass two arguments to the OnEditIn and OnEditOut functions:
-
editbox: The
nameproperty of the edit box. In our example, it ise1. -
text: The title of the edit box. In our case, we pass the
strings.xmlvariableelec, which has the valueElectricity.
Above, the user has clicked on and is currently editing the Electricity edit box. You can see how the other edit boxes display their titles.
Have a tip you'd like to share? Send it to gd-developer AT google DOT com.