HTML5 is making coding easier.  No other way to say it.  In the past to create default text in an <input> field you had to do a bunch of different hacks or background image swapping… Now you can do this following:

<input type="text" />

“My Placeholder Text” is the text presented to the end user.  Different web browsers handle the attribute differently but when the end user begins typing, the text disappears and is replaced with whatever text they are typing.

This solution is great except we still have to account for IE7/8/9 (seriously how is IE’s unreleased browsers the only one that may support html5.  How behind the times is Redmon), Older FF, Safari and Chrome.   To make this work with those browsers I employ a Modernizr.  Simple go to Modernizr, click to build your own Production code.  In this case we only need Input Attributes.  Finally to bring it all together I used a cool little bit of code from This Guy, to make it all work.

/**
 * HTML5 Placeholder Text jQuery Fallback with Modernizr
 *
 * @url http://uniquemethod.com/
 * @author Unique Method
 */
jQuery(function()
{
 // check placeholder browser support
 if (!Modernizr.input.placeholder)
 {

 // set placeholder values
 jQuery(this).find('[placeholder]').each(function()
 {
 if (jQuery(this).val() == '') // if field is empty
 {
 jQuery(this).val( jQuery(this).attr('placeholder') );
 }
 });

 // focus and blur of placeholders
 jQuery('[placeholder]').focus(function()
 {
 if (jQuery(this).val() == jQuery(this).attr('placeholder'))
 {
 jQuery(this).val('');
 jQuery(this).removeClass('placeholder');
 }
 }).blur(function()
 {
 if (jQuery(this).val() == '' || jQuery(this).val() == jQuery(this).attr('placeholder'))
 {
 jQuery(this).val(jQuery(this).attr('placeholder'));
 jQuery(this).addClass('placeholder');
 }
 });

 // remove placeholders on submit
 jQuery('[placeholder]').closest('form').submit(function()
 {
 jQuery(this).find('[placeholder]').each(function()
 {
 if (jQuery(this).val() == jQuery(this).attr('placeholder'))
 {
 jQuery(this).val('');
 }
 })
 });

 }
});

I pulled this together with help from the amazing community that exists around web.dev. The solution is from: a comment at a blog.  After digging for awhile I finally found this and it worked like a charm.

So here is how we do this:

 

First you need Jquery, and Jquery UI with tabs.  I also included “fade” support but you can customize your own build.  From there, simply implement the tabs as is clearly outlined in the docs.

Next is the magic:

$('#tabs-set').tabs({
 'select': function(){$(this).index($(document.location.hash));},
 'load': function(event, ui){document.location.hash = ui.panel.id;},
 selected: -1
 });

This in its simplest form allows you to link to a given tab from outside the page.  A good use case is a homepage slider that needs to link to different areas of a sub page.  The url for this is: http://domain.com/page#tabid.

I built this into a WP install and it works great.

NOTE: selected: -1 simply hides all tabs on page load.  For my specific instance this was important. Many others won’t need this.

We needed to implement this for our great client Seattleite.com.  We built a Events system for them using custom post types (CPT) but needed to create a date based archive so that someone could click on a calendar day and be taken to that day and see all events for that day.  This solution is geared around an events custom post type but could work with many other types, using the post-date instead of a custom field. Continue reading “WordPress 3 custom post type date based archive” »