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.

Jeffrey Way provides a step-by-step screencast, accompanied by source code and plenty of documentation in the post titled You Still Can’t Create a jQuery Plugin? – NETTUTS.

I started following @jquery on Twitter sometime ago, and they have provided a lot of great links and information.

One interesting link is to an article about methods for presenting information and creating systems to enhance user experience:

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Read the full article on Noupe.

The jQuery foundation has created a new site showcasing designs that Use jQuery. They currently have only about 30 samples organized by effect/function category, but they do accept submissions so show off that great interface or behavior that you’ve created!

I recently stumbled upon a list of 54 Kick Ass Creative Logos which in turn led me to Logo Faves, who accept submissions from designers, and describe themselves as:

A collection of best designed logos around the web is showcased in Logo Faves. We don’t want to be like other Logo repositories, our idea is to bring you all the best of best logos.

Also relying on suggestions and entries from webmasters to compile its collection, Web2.0 categorizes over 100 logos and displays the user-ratings for each.

FontFeed took a bit of a different approach in grouping popular web logos by style, and even though the article was published in 2006, it is still a great source of information.

So what are you waiting for? Check out some of the design resources over at For Web Designers and submit your best work!

Of course, you could always just use a pre-configured generator.

Looking for the perfect font system for your design, compare different styles side-by-side, or embed non-”web-safe” typeface in the layout? There’s a web application for that.

Highlights include:

• STC fontBROWSER – an online tool for browseing varoius fonts and viewing how your selected text looks with each.
• WhatTheFont – upload any image with characters and instantly find the closest matches within their database
• Typetester - compare different fonts for the screen, up to three at a time
• Font Burner – replace text on your page with one of 1000 vector-based fonts with a simple block of code

Check out the entire list of 21 Typography and Font Web Apps You Can’t Live Without.

Jon Hobbs-Smith from the UK web development firm TVI Design has compiled a list of 25 tips to making your jQuery-powered applications easier to script and faster loading. While some of the items may be considered common knowledge (such as return false; for click events to prevent default behavior) the list provides excellent links and resources to people interested in using the Write Less, Do More JavaScript Library.

Considering almost all the recent updates to the framework relate to improving speed, why not take fullest advantage of them in making your application as responsive as possible?

I recently discovered an interesting applet developed by Aharef in 2006 that uses the Processing programming language to graph the element tree of a given web page.

For instance the current markup on this site gets rendered like this:

According to the documentation and examples, the colors represent:

• blue: links (the A tag)
• red: tables (TABLE, TR and TD tags)
• green: DIV tags
• violet:  images (the IMG tag)
• yellow: forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
• orange: linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
• black: the HTML tag, the root node
• gray: all other tags

Processing is an open-source programming language and development environment used for prototyping and producing images, animation, and interactions within a visual context. The code-graphing applet requires Java, but processing.js has made the language more widely accessible and available for experimentation.

Every web developer that I know is sick and tired of making compromises and hacks to accommodate Internet Explorer 6 and other browsers that are not standards compliant. While graceful degradation (or progressive enhancement, depending on which philosophy you subscribe to) will continue to be a par for the course for the forseeable future, it would be great if we could fully take advantage of the available technologies and minimize crosss-browser tesing costs in our project budgets.

To this goal, Nick Stakenburg released a script that gently alerts the user that their browser could use an upgrade. Pushup detects the version of the client and briefly flashes a notice with a link to download an update. The entire package is fairly lightweight (only 11kb, zipped) and includes the images, sylesheets and JavaScript files to run. Implementation and customization information is provided on the download site, in addition to ports of the function for dojo and jQuery.

This doesn’t really help users whose IT departments prohibit them from updating, but if it helps those who are unaware that there is a better web experience to be had then it is worthy of praise and support.

If you haven’t heard of it already, sIFR lets you appease all those designers by integrating custom fonts onto your standards-compliant web page without turning them into images. On its own, it’s not a small or straightforward undertaking, requiring a number of additional CSS and JavaScript files to function. However, the recent release of the sIFR jQuery plug-in should make it more accessible to developers:

First, jQuery makes finding the item(s) that you want to replace as easy as using CSS. Then, the jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors, and any other configurations needed for the conversion. The jQuery sIFR plugin is fully configurable and can choose how little or how much you want to customize the display of the sIFRed text. Finally, the jQuery Flash Plugin does a most excellent job of embedding the sIFR flash into your web page. After all is said and done, you should have beautiful sIFR replaced text with consistent behavior across all major browsers.

All the resources are available for download from the developer’s site, as well a simple API and usage examples for easy customization.