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.
First in a series of three articles from Apple on Ruby on Rails development on Mac OS X Leopard. Definitely worth a bookmark.
Ruby on Rails is a popular and powerful open source web framework for rapidly creating high-quality web applications to help you keep up with the speed of the Web. Rails is thriving on Mac OS X, and Leopard comes pre-installed with Ruby, Rails, Mongrel, Capistrano, Subversion, and other tools that help to streamline the development and deployment of Rails applications. In addition, the Organizer feature of XCode 3.0 keeps your development workflow efficient.
This article gives you a full tour of Ruby on Rails 2.0 on Leopard—starting with building a web application using the latest Rails features with Xcode 3.0, and finishing with deploying the application to a production server running Leopard Server. Along the way we’ll explore unique features and benefits that Leopard brings to the party. In the end you’ll be better equipped to consider the advantages of powering your web application with Rails on Leopard.
This is the first in a series of three articles:
- This article on Development, where you learn to build a basic RESTful Rails application using Xcode 3.0;
- Customization, where we discuss working with views and web forms, adding AJAX support, and supporting an iPhone interface;
- Deployment, where we set up version control, write a Capistrano recipe, and deploy on Leopard Server.
Together they will give you a great start in working with Rails on Mac OS X Leopard.
full article
Found this tongue-in-cheek look at what a web designers/developers time is spent doing on a project… Funny, but scarily realistic!
via
Check out the SitePoint CSS Reference - useful for anyone writing CSS.
via
Found this in my feeds today - genius way of making very stylish headings without resorting to image replacement.
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.
read more
Yet more chart drawing goodness. This takes a different approach to the Google model by generating really good looking graphs all on the client-side in javascript - very nice!
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers.
via
The chaps over at Google have come up with a neat webservice - an easy way to get charts onto your webpages, the Google Chart API.
Google has finally released Google Charts API, which returns a PNG-format image in response to a URL. Several types of image can be generated: line, bar, and pie charts for example. For each image type you can specify attributes such as size, colors, and labels.
You can include a Chart API image in a webpage by embedding a URL within an <img> tag. When the webpage is displayed in a browser the Chart API renders the image within the page.
via
Color Wizard is an online colour scheme generator.
There are many of these kind of tools around, but I quite like interface on this one. The randomise feature is also quite useful.
via
Veerle comes up with another look at styling tables with CSS. A great read.
In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.
read more
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’
