Nothing frustrates me more than having to hone in my mouse pointer on a tiny radio button. That’s why many web forms today are allowing the area around the radio button to be clickable. I personally believe that if a radio button and its label is isolated in its own td or div tag the entire div or td should be clickable. A more common approach to this issue is making the label clickable.

Let’s take this example

The idea is that when a user clicks ’1 to 24′ the first radio button is selected, when ’25 to 99′ is clicked the second radio button is selected, and so on.  As usual to pull this off we need three resources: some HTML, CSS, and javascript (jQuery since we want this to be easy, right!).

(more…)

As we know, jQuery not only makes things once considered impossible on the web possible, but makes those things pretty easy to do. I just built a sliding navigation for pukkared.com portfolio and thought I’d share here. Pulling this off requires both CSS and javascript knowledge. I’ll do my best to explain the CSS involved, but maybe Adri can follow up on this post with some more detail on why it works. I’ll also note that practically this navigation would be dynamically driven, but for the sake of simplicity I’m going to hard code the navigation. Maybe I’ll follow this up with a post on outputting your navigation from your database.

(more…)