Work in progress controller layout created with HTML/CSS/SVG

Yellow screen – SVG

Red screen – HTML button tags with CSS

Blue screen – both combined

View it live & the code on CodePen.io: http://codepen.io/AlexBezuska/pen/MwemEv?editors=110

jquery.timepicker and another quickTip

So here is another useful jQuery plugin I found while doing a signup form project at work, the jquery.timepicker.  As you may have guessed – this is similar to the date picker  componant in jQueryUI, but as the name implies it is for Times only. This particular project called for me to create a means for the user to enter a time range they were available for an event. I started to create my own custom UI for this, but then the lack of  time made me search for an existing tool.  After a quick search I found jquery.timepicker by John Thornton, here is the main demo site: jQuery TImePicker

I really love the simplicity of the plugin, I simply created a class called “timepicker” and gave that class to each of the input elements on the page that needed it.
Then I added this snippet of jQuery to the page:

/* All you need to get started once jquery.timepicker is included on your page:
*/
$('.timepicker').timepicker();

This is all you need to start a very basic time picker, but I wanted to restrict the user to a certain range, so I used the parameters that John describes on the jquery.timepicker site:

$('.timepicker').timepicker({
	'disableTimeRanges': [
    ['12am', '10am'],
    ['4:30pm', '11:59pm'],
  ]
});

quickTip: Out of sight – Out of Mind

jquery.timepicker
Let’s ditch these non-selectable times, and lower our chances of  confusing the user.

This worked great, but it does not hide the disabled times, it only grays them out and prevents selection, so today’s quickTip is how to remove them from sight, and provide a better user experience.

I found out that John wrote jquery.timepicker to give disabled times a css class of “ui-timepicker-disabled”, so it’s very easy to hide these elements using either CSS or jQuery.

jquery.timepicker 2
Here is the result, only see what you can pick, only pick what you can see.

I have noted both methods below:

// The CSS Method

.ui-timepicker-disabled{ display:none; }

 

// The jQuery Method

$('.ui-timepicker-disabled').hide();

Have a great day, and if you have a quick tip be sure to pm me on twitter @alexbezuska and I can share it on the site.

Learn. Create. Explore. Code. 
-Alex Bezuska

_s (underscores) A Completely Blank Starter Theme for WordPress

Screen Shot 2013-04-28 at 3.38.23 AMSo when you first get into theming for a Content-Management-System you will more than likely take one of the existing base themes included with the CMS and start snooping around in the various files. You might just edit the ‘style.css’ file or equivalent – or you might go straight for the jugular and strip out all the html leaving only the relevant tags the CMS uses to fill in dynamic content, then add in your own markup around them. This is what I did when learning Drupal, and now that I am working with WordPress I started down the same path for a couple of client sites – but now I have found a real gem for any WP theming beginners out there and that gem is underscores.

A completely blank theme agnostic to any design direction to give you a blank canvas to work your creative magic however you want. No pre-supposed boundaries or grids, just a clean slate.

I really dont know what else to say – its exactly where you should start as a WP themer – and its open source and being refined and updates all the time via the GitHub repository.

Check it out here:

http://underscores.me/

And let me know how it worked out for you.

-Go make the web a better place.

-Alex Bezuska