blog.paulgueller.com

I saw this post on the CSS Tricks Snippet Feed which addresses a commonly desired form behavior: to provide default text in an INPUT element that disappears when the user enters that field. The example provided works, but I have a couple issues with it:

1. Uses inline JavaScript, and must be reapplied to each element affected
2. Repeats the contents of the value attribute
3. The default text is not replaced if the user exits the field without entering new data

So I created a possible solution, using jQuery:

HTML

1

<input type="text" value="Place default text here" />

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery( function(){
  $( 'input[type="text"]' ).each( function(){
    $(this).attr( 'title', $(this).val() )
      .focus( function(){
        if ( $(this).val() == $(this).attr('title') ) {
          $(this).val( '' );
        }
      } ).blur( function(){
        if ( $(this).val() == '' || $(this).val() == ' ' ) {
          $(this).val( $(this).attr('title') );
        }
      } );
  } );
} );

This script first iterates over each of the text input to assign a semantic text attribute, helpful not only in storing the default value, but also providing a tool-tip for reference as the user interacts with the page. It then assigns behaviors for both the onfocus and onblur events, eliminating the need to respecify data for comparison. The script is cleanly separated from the markup and, using jQuery, additional specifications may be made so as to only affect children of a particular FIELDSET or only those that possess a certain class.

I hope you find this snippet useful, and feel free to comment if you have additional information to share.

A number of companies use 37 Signals‘ Basecamp, a hosted project management, collaboration and tracking application online. It features a rich interface and many layers of administration and accountability.

Branching from an early open-source version of Basecamp, activeCollab is an alternative that can be installed and managed on a company’s own servers or local network, but has become a licensed product since it left beta.

Enter ProjectPier, which I installed and have started using for many of my clients after reading about the application. From the developer site:

ProjectPier is a Free, Open-Source, self-hosted PHP application for managing tasks, projects and teams through an intuitive web interface. ProjectPier will help your organization communicate, collaborate and get things done Its function is similar to commercial groupware/project management products, but allows the freedom and scalability of self-hosting. Even better, it will always be free.

It was easy and intuitive to set up new clients and assign them to projects, and create milestones and to-do items for everyone. Other key features that I found useful include:

• sharing and tagging of important files
• communication and notification settings, including e-mail and RSS
• custom theming and form creation

If you can live without many of the Ajax-y bells and whistles that Basecamp touts, as well as the real-time whiteboard and team time-tracking, ProjectPier is a solid application for collaboration. Download the source code and try it out!