Michael Gaigg: Über UI/UX Design

10Aug2

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

Google fonts available

If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

  • easy to implement (as I will show)
  • well supported by IE, Firefox, Safari and obviously Chrome
  • open-source
  • free (I should have mentioned first huh?)

End Result

Tangerine font

Code Example

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>
<style>
body {
	font-family: 'Tangerine', arial, serif;
	font-size: 2em;
}
</style>
</head>
 
<body>
This text is in <strong>Tangerine</strong>.
</body>
</html>

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.

The variant parameter can be omitted for use of default.

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

<link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'>

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).

Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time.

The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses.

Are you using any other Font library?

Tagged as: , , , , , , , , 2 Comments
29Mar0

jQuery: Handle Dropdown (select), Checkboxes and Radio selections

Posted by Michael Gaigg

Almost daily I work with lists, be it dropdown, checkbox or radio selections. I need to select values, submit selections, hide/show containers depending on the selection etc.

I tend to forget all these cool jQuery notations that make every programmers life easier. How nice would it be to have a little cheat sheet? So I decided to summarize my findings (and share them with you).

Obviously jQuery is powerful and gives you a multitude of possibilities so this list is neither exhaustive nor covers all possible application scenarios. Mix, match, combine and extend the samples as you wish and feel free to post your additional solutions in the comments section.

See the test page.

Dropdown

I'm using the following sample list:

<select id="ddlCategories"> 
   <option>- Select a category -</option>
   <option value="books" selected="selected">Books</option>
   <option value="videos">Videos</option>
   <option value="dvds">DVDs</option>
</select>

Get value of selected item

Pure and simple, despite what you might read in other tutorials:

alert("Selected value: " + $("#ddlCategories").val());

Change text of a particular item

Let's target item with value 'videos':

$("#ddlCategories option[value='videos']").text("Videos and tapes");

Change color of a particular item

This could be useful to show that the category is currently unavailable or a certain item is out of stock.

$("#ddlCategories option[value='videos']").css("color", "#CCC");

Get number of options

Don't forget to subtract options that don't count, e.g. the empty "- Select a category -" option.

alert("Number of options: " + ($("#ddlCategories option").length - 1));

Set a particular option

Set the option 'videos' to be the selected item.

$("#ddlCategories option[value='videos']").attr("selected", "selected");

Checkboxes

Our sample checkbox list:

<div id="chkCategoriesContainer">
	<input type="checkbox" name="chkCategories" value="none" checked="checked" />None<br/>
	<input type="checkbox" name="chkCategories" value="books" />Books<br/>
	<input type="checkbox" name="chkCategories" value="videos" />Videos<br/>
	<input type="checkbox" name="chkCategories" value="dvds" />DVDs<br/>
</div>

Check all items in the checkbox list

This could be invoked e.g. through a link named 'Check all'.

$("input[name='chkCategories']").attr("checked","checked");

Uncheck all items in the checkbox list

Same here, uncheck all, a very common requirement.

$("input[name='chkCategories']").removeAttr("checked");

Make the second item being checked

List is zero-based, so the second item is nth(1) ;) 

$("input[name='chkCategories']:nth(1)").attr("checked","checked");

Show the value of each checked item (requires a container!)

In this case we simply alert the value, but we could might as well write it to another output field, container or whatever you may wish.

$('#chkCategoriesContainer :checkbox:checked').each(function() {
	alert($(this).val());
	//$('#outputField').append(', '+$(this).val());
});

Radio

Our sample list again:

<div id="rdoCategoriesContainer">
	<input type="radio" name="rdoCategories" value="none" checked="checked" />None<br/>
	<input type="radio" name="rdoCategories" value="books" />Books<br/>
	<input type="radio" name="rdoCategories" value="videos" />Videos<br/>
	<input type="radio" name="rdoCategories" value="dvds" />DVDs<br/>
</div>

Get value of checked item

alert("Selected value: " + $("input[name='rdoCategories']:checked").val());

Append item to container

The item will be added to the DOM and is available to jQuery immediately.

$('#rdoCategoriesContainer').append('<input type="radio" name="rdoCategories" value="tapes" />Audio tapes<br/>');
Tagged as: , , , , , , , , , , , , No Comments
27Oct0

How to Disable Button on form submit in .NET

Posted by Michael Gaigg

This problem seems to be almost too obvious to be posted here but it took me quite some time to actually figure it out how to do it correctly - so I'd might just share it with you.

Disabling the submit button helps users comprehend that their action is in process and waiting for a response can be expected. It also prevents them from clicking the same action more than once which could lead to serious troubles (duplicate entries, application exceptions, etc.)

Problem

How do I disable a form submit button on a .NET page that does client-side validation?
The problem is that the button cannot simply be disabled because it would not be enabled again if the client-side validation prevents the form from being submitted.

Solution

.NET

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="SubmitForm(this);" />

JavaScript:

function SubmitForm(source) {
ret = true;
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
ret = Page_IsValid;
}
if (ret) {
source.value = "Processing...";
source.disabled = true;
__doPostBack(source.name, "");
}
return ret;
}

Tagged as: , , , , , , No Comments
7Oct1

The importance of the JavaScript parseInt radix

Posted by Michael Gaigg

Problem:

Just recently I had to implement an HTML form that allows users to enter percentage values. Like every good programmer I added client-side validation to check that the input values are between 0 and 100.

Using the JavaScript function parseInt(txtValue) with txtValue being the value of the input field our tester was able to submit the form with a value of 0137.

My first reaction was to restrict the maxlength attribute of the input field to 3 characters only. Even though this is a good and recommended practise there was clearly something else wrong.

Explanation:

The parseInt() function parses a string and returns an integer. The signature is parseInt(string, radix) with

  • string (required) being the string to be parsed, and
  • radix (optional) a number (from 2 to 36) that represents the numeral system to be used

If the radix parameter is omitted, JavaScript assumes the following:

  • If the string begins with “0x”, the radix is 16 (hexadecimal)
  • If the string begins with “0”, the radix is 8 (octal)
  • If the string begins with any other value, the radix is 10 (decimal)

Solution:

So, what happened? Because I forgot to specify the radix and our QA tester tried the (however unlikely) case of 0137 JavaScript assumed it was an octal number and returned a value of 95. Lesson learned: Always specify the radix (if it decimal set it to 10 ;) !!!!

PS.: Only the first number in the string is returned!
PPS.: Leading and trailing spaces are allowed.
PPPS.: If the first character cannot be converted to a number, parseInt() returns NaN.

Tagged as: , , , , , , 1 Comment
   

RSS Recent Posts

Categories

  • expandAccessibility (13)
  • collapseCode Samples & Tips (4)
  • expandDesign Guidelines (11)
  • expandGo figure (7)
  • expandGood News (11)
  • expandHere and there (11)
  • expandThis Week’s Highlights (23)
  • expandUsability & UCD (14)
  • expandWeb Design (13)

Popular Posts

People that inspire me

Tags

508 Accessibility accessible analytics Ben Gremillion best practices book Cameron Chapman chrome color content contrast css design design guideline Design Guidelines esri facebook free google guidelines harry brignull jacob nielsen javascript jeff sauro Joel Reyes jquery level 1 level 2 level 3 navigation scott berkun section 508 speed techniques trends typography UCD ui usability UX w3c wcag web Web Design

What I'm Doing...

Posting tweet...