tips – Alex Bezuska

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

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

Webfonts, why hassle with ’em?

On our beloved web It used to be that if you wanted to have a cool custom font you would have to create a document in PhotoShop, save an image containing your text and add it to your site as an img tag. You might remember a time when fonts didn’t even matter because your site would be a ton of image slices generated by PhotoShop, Golive, or maybe you have been creating websites long enough to remember Adobe ImageReady!
Since those days things have evolved, next you might have used a transparent png file so you could have more options when it came to background color and what the text/image could be floating over.

But what is the present-day solution for fonts on the web?

You might use Photoshop and desire your code to look more like your mockup PSD, or you might be like me and design from the start in code, in which case you might have gone though a period of reling on basic webfonts, or you might have checked into a paid webfont service, or used Google Web Fonts and seen some the open source fonts which are now available.

All are great options, but what if you want something to look exactly how you want it to?

To get custom fonts on your site you can now use the @font-face property of CSS3, but will it work cross-browser?
Yes and No,
The fact of the matter is you can do it yourself, but what about formats? There’s .woff, .ttf, .svg, eot, .ot, etc, which ones do you need? Will you remember to add the right fixes for IE?

Why waste your time when you can use ForntSquirrel!

Simply upload the font you wish to use, in pretty much any format, and let the site do the rest. It will generate a zip archive with all of the files you need, including the font in various formats, and a css file containing the cross-browser compatible versions of @font-face.

I usually copy the css out of the file it provides and add it to my current css file for the project, drop the font files in a folder called /font or /fonts, change the paths to the font files in the css to be correct for my application, and that’s it! You can just change the “font-family:” property of to what you want to call the font, and add it to whatever css selectors you wish to use it on, and you have your custom font ready to go, wherever you need it.

I hope this helps you as much as it helped me, and lets you make better design decisions based on having more options!

-Alex