Michael Gaigg: Über UI/UX Design

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/>');
15Jan0

Highlights of Week 02/2010

Posted by Michael Gaigg

  • Does usability exist? How Usability is like Intelligence (by Jeff Sauro) - very interesting analogy to intelligence and a first approach to relating the three usability areas Effectiveness, Efficiency and Satisfaction and how (and how much) they contribute to Usability 'u'.
  • The Case Against Vertical Navigation (by Louis Lazaris) - While I think the argumentation in this blog article is mislead by current design trends and biased in some way, I find 'shaking our world' good from time to time so we can re-think the way we're used to doing things.
  • Bad Usability Calendar 2010 - What would be the New Year without another one of their great Usability Calendars - Enjoy!
  • Curating Comments Threads (by Chris Coyier) - interesting discussion and good points about how to make comments more meaningful.
  • Live, Free webcast: Confessions of a Public Speaker - Probably you've heard already, Scott Berkun has his book out, and he's offering a free, 90 min. webcast about it, don't miss, sign up now.
  • The future of UI will be boring (by Scott Berkun) - Scott seems to be on mushrooms lately judging by the level of activity. Here another really good read about the future of UI design, love the 'rookie trap'.
  • jQuery 1.4 has been released (by John Resig) - right in time for jQuery's birthday, big news for a great JavaScript library, better iframe support, flexible events. My tip: get it!!
Suggested reading:
11Dec0

Highlights of week 50/2009

Posted by Michael Gaigg

Every day I run into fantastic articles and stumble across hilarious and must-see web sites. I'm amazed how much great content is created and maintained hour by hour, day by day. I wish I had more time to read and learn more, not to mention synthesize and write about it.

That's why I start this weekly thread that will summarize all the goodies & greats - in short: Highlights - of the week so you can skim through them during a spare minute on the weekend or first thing Monday morning.

I try to cover all my basic interests (UCD, Usability, Accessibility, Web development, Code samples, Business, Marketing, Social web, Technical news, Philosophy and whatever else I run into 😉 Feel free to share interesting links and bring special content to my attention - I'd love hearing from you.

So here we go,

Highlights for week 50 of the year 2009

16Jun0

The Three-?-stick

Posted by Michael Gaigg

The Three-?-stick is going around ... and and so it came around. Björn from the Webzeugkoffer (excellent webdesign blog in German) picked up the stick by answering 3 questions that I will answer now too:

The three questions

Which Editor do you use for (X)HTML and CSS?

I'm using Macromedia Dreamweaver. I'm still stuck at MX 2004, but I really got used to the color coding and other superficial things - it's like toothpaste, once you are hooked you'll never change again (don't ask for the trade pls).

...and notepad 😉

Which little tool became a true time saver for you?

Can't live without Firebug - seriously, can't live without it. That's not a little tool? Ok, what about ColorSet, love that also.

Flash - what do you think of that technology?

Call me a purist, but I'm really into DHTML. Unless somebody convinces me otherwise I can do what I need to do with HTML a JavaScript library like jQuery, Dojo, YUI or even the Facebook JavaScript Library.
I disliked flash when it got into 'mode' a century ago and still think that flash intros should die. Accessibility is still an issue also.

On the flipside our company created a really powerful ArcGIS API for Flex for building Rich Internet applications on top of ArcGIS Server, our internet mapping server. I might need to reconsider some of my previous believes.

I forward the three-?-stick to

19Nov0

Fast, faster, CloudFront – Speed matters!

Posted by Michael Gaigg

It's clear that speed matters to the users. Page visitors are impatient and nasty, they expect the page to load fast, Google-fast. Peter Da Vanzo from seobook.com suggests that this constant threat of loosing users even justifies to sacrifice graphics and features in lieu of speed.

Yesterday Amazon released their new service called CloudFront which is aimed to enhance network performance (lower latency) through a network of edge location around the world.

Amazon CloudFront locations world-wide

Amazon CloudFront locations world-wide: (A) London, UK (B) Frankfurt, Germany (C) Amsterdam, Netherlands (D) Dublin, Ireland (E) Newark, NJ (F) Ashburn, VA (G) Miami, FL (H) Saint Louis, MO (I) Dallas, TX (J) Seattle, WA (K) Palo Alto, CA (L) Los Angeles, CA (M) Hong Kong (N) Tokyo, Japan

Pricing is on a per-per-use basis without minimum fees and might be a really good hosting solution for companies with an international audience who care about their users.

John Resig and his team from jQuery reported large improvements where latency has shrunk to a quarter of the usual times.

Send me your experiences and thoughts!

Page 2 of 212