Classic Digg-Style Radio Buttons with CSS and jQuery


By

I’m sure many Internet users can remember the old days when Digg was a booming social news community. Although the company has fallen fast off the tracks in recent years, their original design patterns will always be around for inspiration. Especially when you consider the modern HTML5/CSS3 trends in website design.

For this tutorial I want to explain how we can build custom radio button links similar to the old Digg category selection. You can click on any set of links which will also trigger an active state on the correlated radio input. This is one of the best ways to style a web form using a bit of simple JavaScript to enhance the user experience.

Digg-style radio buttons with jQuery - preview demo screenshot

Getting Started

Obviously I’m still using the default HTML5 doctype tag along with some of the typical script includes. I’m using the latest jQuery 1.8.0 and Google’s HTML5shiv library. For our CSS and JS I’ve created two external files named style.css and script.js.

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Digg-Style Radio Select Buttons</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Now where the HTML code starts getting interesting is around our form data. I’ve created a blank form with no submission method, just typical radio input fields. The list is way too long to copy over in it’s entirety. But I have included a couple examples so you can see what we’re going for:

<form name="diggform" id="diggform" method="post" action="index.html">
  <header id="cathead">
    <h2>Choose a Topic</h2>
    <p>Tell us where your submission should be listed. Select a category below which best represents your news.</p>
  </header>
	
  <!-- radio list -->
  <input type="radio" name="category" value="apple">
  <input type="radio" name="category" value="design">
  <input type="radio" name="category" value="gadgets">
  <input type="radio" name="category" value="hardware">
  <input type="radio" name="category" value="technews">
  <input type="radio" name="category" value="linuxunix">
  <input type="radio" name="category" value="microsoft">
  ...

Note the name attribute for these inputs are all set the same. This is how you create a set of radio buttons which are all possible selections from the same field. When you submit the form you have access to the variable by the name category(ex: $_POST['category']).

The value attribute is what data is actually being passed into the backend script. So if we select the Apple radio button and submit the form, that represents our current data being passed. Now to customize this I want to create a tabular structure of links in rows that you can click to trigger a selection on any of these radio buttons.

Constructing the Links

Now for this portion of the document you could choose to use a table element. The links are split into rows so it’s always a possibility. However since the rows do not contain the same amount of links I’m just using a <div> with the added class .row.

<div class="row">
  <h3>Technology</h3>
  <a href="#" class="c" id="apple">Apple</a>
  <a href="#" class="c" id="design">Design</a>
  <a href="#" class="c" id="gadgets">Gadgets</a>
  <a href="#" class="c" id="hardware">Hardware</a>
  <a href="#" class="c" id="technews">Industry News</a>
  <a href="#" class="c" id="linuxunix">Linux/Unix</a>
  <a href="#" class="c" id="microsoft">Microsoft</a>
  <a href="#" class="c" id="mods">Mods</a>
  <a href="#" class="c" id="programming">Programming</a>
  <a href="#" class="c" id="security">Security</a>
</div>

Each of the anchor links will behave as inline-block elements floating next to each other down the row. The ID attribute should be directly correlated to the value attribute on each radio button. This is probably the quickest way we can make a direct selection using jQuery.

But before even jumping into the script let’s examine a few of the default CSS properties. I’m using a block-style effect on the links with extra padding and hover state colors.

#catlinks .row { 
display: block; 
border-bottom: 1px solid #dbdbdb; 
margin-bottom: 5px; 
padding: 11px 4px; 
padding-bottom: 18px; 
font-size: 1.2em; 
}

#catlinks .row h3 { display: inline-block; color: #5c5c5c; font-weight: bold; width: 140px; }
#catlinks .row a { font-size: 0.9em; font-weight: bold; padding: 7px 8px; margin-right: 3px; border: 1px solid #fff; }

#catlinks .row a:hover { border: 1px solid #dbdbdb; background: #eee; }

#catlinks .row a.sel { background: #6b7fdd; color: #fff; border: 1px solid #6470a9; }
#catlinks .row a.sel:hover { background: #4964e1; }

I’m also using an added class of .sel to denote any currently selected links. It’s important to remember that radio buttons are all part of a set, and so you can only have one option selected at a time. Thus adding the .sel class is a quick way to scan the page and find your currently selected value.

But also in the CSS code we can add one line to hide all radio buttons on the page. Using display: none; it’s a really simple procedure to remove inputs of the type “radio” from viewing. But if you need to debug the script it may be worthwhile to comment out this line in the CSS.

input[type=radio] { display: none; /* comment out to display all radio buttons */ }

Working Out the jQuery

For the final tidbits of this web app let’s look into my extended frontend scripts. I’ve created a new document named script.js which should hold all the internal jQuery actions.

We only need to manage one event handler which is the click event onto any link inside the .row elements. We gave the anchors a class of .c but this can be quickly confused inside a jQuery selector string. Here’s the first few lines of my script file:

$(document).ready(function(){
  $(".row a").on("click", function(e){
    e.preventDefault();
		
    if($(this).hasClass("sel")) { 
      // already selected 
    } else {

After the .on() click event handler I’m passing the event into a new function. We can use the e.preventDefault() to limit any normal activity from the anchor links. This means the href value should be completely ignored and we won’t get that hash character added onto the end of the URL.

We also want to check if the current link has a class of .sel added already. If so then we know this radio button has already been selected and we don’t need to do anything. Otherwise the user has clicked on a new link to be selected and we run this code:

      $("a.sel").removeClass("sel");
      $(this).addClass("sel");
			
      var rid = $(this).attr('id');
      var value = '[value="'+rid+'"]';
			
      $('input:radio[name="category"]').filter(value).attr('checked', true);			
    }
  });
});

The first line checks against all other anchor links with the class .sel found anywhere in the document. Since this new link needs to be selected we remove any other classes and add it onto the new selection.

Next I’ve set up two variables – the first pulls the current ID value from the selected link. Remember we need this for targeting the proper input element. I created this 2nd string variable using the jQuery attribute=value selector syntax. What makes this final selection hard to follow is that we’re searching through a huge list of input elements.

Starting with input:radio[name="category"] we get the whole list of input radios grouped under the name “category”. Then jQuery’s .filter() method can be used to limit our results down to one unique radio input with a matching value attribute. This can be run many times over in the same document and you should always end up with the proper radio button selected!

Digg-style radio buttons with jQuery - preview demo screenshot

Final Thoughts

I hope this tutorial can show you how extensible the modern age of web design has become. Developers from around the world can benefit from incorporating these techniques into dynamic layouts. Additionally many of these trends will also work on mobile devices, which has a rapidly growing audience of smartphones and tablets.

You should check out the live demo and feel free to download a copy of my source code. You can use this technique for any projects both personal and commercial. But also see if you can enhance any features to suit your own needs better. Or additionally you can share your thoughts or questions with us in the post discussion area below.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.