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

jQuery and CSS ‘Wildcard’ element selection

UPDATE 08-26-2013
No need for any quotes on either unless it is a number example [class$=’23’], CSS and jQuery syntax is the same.

Quick Start Guide:
CSS and jQuery ‘WIldcard’ Syntax(‘type’ = class or id):
Starts with: [type^=keyword]  Ends with: [type$=keyword] contains: [type*=keyword]

 Try it yourself on CodePen!

This is a really awesome trick I found that you can do, comes in handy for dynamically incremented IDs :

To get all the elements starting with “awesomeSauce” you should use:

$("[id^=awesomeSauce]")

To get those that end with “awesomeSauce”

$("[id$=awesomeSauce]")

Also words for classes that start start with “awesomeSauce”  ex: “awesomeSauce123”

$('[class^=awesomeSauce]')

Or if you have multiple classes on an object, like ” best awesomeSauce123″ or you want to find an id or class that contains the keyword.

$('[class*=awesomeSauce]')

Giving Credit where credit is due:

http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors

ultra-minimal planner app I made

I had the idea create a small app with a table where you click a day to highlight it and click it again to remove the highlight so you can mark workdays.

Here is the finished product:

Screen Shot 2013-05-27 at 12.57.40 PM

It only took a couple minutes to write the markup, add a simple jQuery function,  and style it.  The jQuery toggleClass() method makes these type of things super simple, I mean look at the source and see just how easy these are to make.

Here is the working JS/CSS/HTML:
CodePen Link

Just a quick exercise I did for fun, really a trivial task with jQuery, and I had fun making it!

-Alex

 

jQuery Tip – Different Keys for the same Thing

So here is something I was struggling with and found a solution that might help other people trying to do the same thing. My goal was to have two keyboard keys do the same thing, in this case move the character in my game. So a player could use W A D S or the arrow keys. My code before was this:

                 case 40:  //down
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

	         case 83:  // also down
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

But you can do this instead to help reduce the amount of code, and organize your code better.

               
                 case 40:
	         case 83:  //Use either of these keys
	         	squid.css('top' , position.top + 50 + 'px')
	         		.removeClass("idle")
	         		.addClass("down");
	         		break;

I am still trying to figure out how to have key combos like W + D to move up-right or A + S to move down-left so my character can have 8 different directions to move, making it a bit more fluid. If you know how to do this drop me a comment, if I figure it out on my own or have time to google around for it some more, I will post it here.