02-18-2013
To make a HTML form easier and friendlier for users to use, HTML5 incorporates quite a few new input types. While url, tel and email types have been quite useful when using a mobile device (special keyboard layouts), I find the biggest pain point is with input date and time. Most of the times you don’t know what format to input the date in (month first or date first), whether you should use dash versus slash, whether you should include the year etc.
Many solutions have been used to solve this problem. jQuery plugins datepicker and timepicker are really helpful on desktop. Mobile browsers have done a good job using native date and time picker (Android and iOS) when the input type is specified.
How do we combine both of these solutions to create a single responsive web form? The answer is really simple.
My first response was to just call the datepicker() method on any and all input[type=date] elements.
jQuery( document ).ready( function( $ ) {
$( 'input[type=date]' ).each( function() {
$( this ).datepicker();
} );
} );
There is a few problems associated with this:
input[type=date] does not work very well with datepicker. That means whatever value you select using the datepicker will not be registered on the input field.datepicker() is not very useful on mobile devices. The pop up window isn’t the most user friendly thing.
In order to solve these two problems, the answer would be to:
- Use
input[type=text] on desktop as well as call datepicker() method.
- Use
input[type=date] on mobile (touch-enabled) devices and not call datepicker().
This can be achieved using Modernizr to detect whether the device is touch-enabled, and JavaScript to swap out the input[type=date] element with one of type text.
This could be done with the following snippet:
if ( !$( 'html' ).hasClass( 'touch' ) ){
$( 'input[type=date]' ).each( function() {
$( this ).clone().attr( 'type', 'text' ).insertAfter( this ).datepicker().prev().remove();
} );
}
This code basically copies the input element, converts it to input[type=text], calls the datepicker() method on it and then removes the previous element.
Admittedly, this method seems like a bit of a hack. At least it will be until jQuery UI datepicker plugin is updated to work with input[type=date]. After that, we can just use Modernizr to selectively call it on desktop browsers without having to do the whole copy and remove business.
Give credit where credit is due: the clone/ remove code is not originally mine. I found it on stackoverflow. I modified it a little bit to make it work with my situation.
Here’s a codepen I set up to demo this.
The example I’ve used is for datepicker(). timepicker() should also work in a similar way.
02-10-2013
That awesome feeling of a 3 day weekend when its only Saturday and it feels like Sunday, aka the most miserable day of the week in my book, and you realized you still have one more day at home.
While most people hate the blizzard and the snow, I actually kinda love it. I’m a little sad now that all the snowing is over. I love waking up in the morning and see everything covered in snow. I guess I’m one of those rare people who genuinely love winter and the snow. And yes, I do a lot of shoveling too today, and more tomorrow, and I actually don’t seem to mind it.
It is now officially Vietnamese new year, aka Tet! Although sometimes I wonder if it counts to wait till Eastern Time, since the lunar calendar is only used in Asia.
At any rate, Happy New Year to everyone! Have a safe, peaceful, prosperous and blessed year of the snake!
01-29-2013
In this video, John Cleese explains how we all can achieve some creativity in our daily life, and does so with a great sense of humor and conviction. This is perhaps one of the best speeches I’ve listened to this year (and considering that January is only closing, there’s not much competition). As one of the commenters said, if this was on TED, it would be one of the most popular one.
Some of the great ideas I gleaned from watching this, although to be honest any sentence said by him in this talk is quote-worthy, including the lightbulb jokes, are that It is easier to do small things we know how to do that are urgent than to do big things that we’re unsure of, like thinking and Some of the most creative people are able to stick with a problem longer and deal with the discomfort, than those who are supposed to be “decisive”. These ideas resonate well with me in my daily life.
P/S: You can’t help but like a guy who has such a cute and cool website www.thejohncleese.com. The best part is that it was made with WordPress too!
12-01-2012
I have finally got around to update all the images on this blog to make use of Lightbox. Woohoo!
Lightbox has been around for a while, and there are many WordPress plugins that allow you to automatically update your blog with it.
However, I have found them to not be very satisfactory for a few reasons. None of them take advantage of the latest version of lightbox plugins. My personal favorite is fancyBox, which is responsive as well. Most of them are not responsive, and none of them allows you to group all the images within a post to be in one gallery, which I think is really important.
Following Bryce Adam’s incredibly helpful WPTuts tutorial on Add a Responsive Lightbox to your WordPress Theme, I have been able to implement Lightbox on my blog using the latest version of fancyBox. As a front-end developer, this is just a much more intuitive approach for me, rather than using a plugin without knowing what it does.
I followed step 1 and 2 but implemented step 3 a little differently to allow my version to automatically add all images within a post to the same gallery. I know that WordPress has a built-in gallery function, but I don’t use it that often and much prefer adding single image as I need to.
Here’s my version of the Javacript file:
// Initialize the Lightbox for any links with the 'fancybox' class
$(".fancybox").fancybox();
$('article').each(function() {
var id = $(this).attr('id');
// add fancybox class to any .jpg, .png, .jpeg and .gif file, as well as a rel attribute to denote that it belongs to a certain post
$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']", this).attr('rel', id).addClass("fancybox");
});
If you are not sure of the unusual jQuery selector, it means selecting an anchor tag a element with href attribute that ends with .png etc.
As an example, here are some pictures I’ve taken from my recent trip to Chicago that I would like to share. All I did is using the regular WordPress media uploader to import the pictures, without any Gallery configuration.
P/S: Writing this post has finally made me sit down and implemented prism.js for this website too! It is actually quite easy to do. DOUBLE WIN!
