Posts tagged "html5"

Early this year I wrote a post titled Auto-populating input fields with Prototype. Looking at the code now, I realize that it's not very pretty. I'm rewriting this site's JavaScript in MooTools, and the new code is quite a bit more elegant.

// provide input hints
window.addEvent('domready', function () {
    $$('input[placeholder]').addEvents({
        focus: function () {
            if (this.hasClass('placeholder')) {
                this.removeClass('placeholder').set('value', '');
            }
        },
        blur: function () {
            if (this.get('value') === '') {
                this.addClass('placeholder').set('value', this.get('placeholder'));
            }
        }
    }).fireEvent('blur');
});

I really appreciate the fact that MooTools provides addEvents in addition to addEvent. As a result, the code above is clearer than a well-written Prototype equivalent.

Yesterday I wrote a simple class which auto-populates input fields, and thought it worth sharing. I was originally inspired to write this code by Roger Johansson's post titled Autopopulating text input fields with JavaScript. While I approached the problem from a slightly different angle, I made sure to avoid the pitfalls Roger mentions.

|| date: 9 June 2010 || time: 11:31pm || || I've written an update to this article for those interested in || auto-populating input fields with MooTools. || || [2]: /autopopulating-input-fields-with-mootools/

I've begun retrofitting this site with HTML5 elements. I'm thoroughly enjoying the process (I love meaningful markup).

One of the first HTML5 elements I've introduced is the time element which, through its datetime attribute, provides a machine-readable version of dates and times.

<time datetime="2009-11-01T16:41:53+13:00">1 November 2009</time>

I wrote a function to generate the machine-readable dates and times for blog comments.

/**
 * echoes comment's date and time in format 2009-11-01T03:41:53+13:00
 */
function comment_datetime()
{
    $comment = get_comment($comment);
    $local = strtotime($comment->comment_date);
    $gmt = strtotime($comment->comment_date_gmt);
    $seconds = abs($local - $gmt);
    $hours = (int) ($seconds / 3600);
    $minutes = (int) (($seconds - $hours * 3600) / 60);
    $output = get_comment_time('Y-m-d\TH:i:s');

    if ($local == $gmt)
        $output .= 'Z';
    else
        $output .= ($local > $gmt ? '+' : '-')
                . str_pad($hours, 2, '0', STR_PAD_LEFT) . ':'
                . str_pad($minutes, 2, '0', STR_PAD_LEFT);

    echo $output;
}

While looping through comments in your WordPress theme, call the above function to print a valid datetime string.

<time datetime="<?php comment_datetime(); ?>">