Javascript Tutorial - Digg Style Selectors
If you’ve posted stories to Digg before then you’re familiar with the “Choose a Topic” form. This form allows you to select which category your Digg submission belong and then lets you submit the form, all without using radio buttons. This tutorial tells you how to achieve the same effect. But I warn you that this Javascript code will not be degradable. If it’s any consolation, if you disable JS on the Digg website their form will also not work. I’m not trying to encourage obtrusive Javascript, but this is a tutorial and not production code. If you want you can build on the code to make it non-obstrusive.
Digg’s Choose a Topic form
Our version of it (it’s better isn’t it?)
First, create a new HTML file with the following code, and call it anything you like:
<html> <body> <head> <title> Digg Style Selectors </title> <script language="JavaScript" type="text/javascript" src="digg_selector.js"></script> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> </head> <h1> Digg Style Selectors </h1> <hr /> <form action="CHANGE_THIS.php" method="POST"> <div id="container"> <a href="javascript://" class="digg_style_link" id="1"> Link 1 </a> <a href="javascript://" class="digg_style_link" id="2"> Link 2 </a> <a href="javascript://" class="digg_style_link" id="3"> Link 3 </a> <a href="javascript://" class="digg_style_link" id="4"> Link 4 </a> </div> <input type="hidden" name="hidden_data" id="hidden_data" value="nothing" /> <input type="submit" value="Submit" /> </form> </body> </html>
To note here is the inclusion of the “digg_selector.js” file which we will look at next. Also important is the hidden field with the id of “hidden_data”. Since what we’re doing is replacing the functionality of radio buttons with nicely styled links, we need another way to get the information submitted and we do that with the hidden field. That’s where the Javascript file comes in:
window.onload=function() {
var container = document.getElementById('container');
var containerAnchors = container.getElementsByTagName('a'); // get anchors
for(var j=0;j<containerAnchors.length;j++)
{
containerAnchors[j].onclick = handleClick;
}
};
function handleClick()
{
document.getElementById('hidden_data').value = this.id;
var container = document.getElementById('container');
var containerAnchors = container.getElementsByTagName('a');
// unhighlight all the links
for(var j=0;j++;containerAnchors.length;j++)
{
containerAnchors[j].style.backgroundColor = "#eceff6";
containerAnchors[j].style.color = "#3b5998";
}
// highlight the link that was just clicked
this.style.backgroundColor = "#3b5998";
this.style.color = "#ffffff";
}
This is simple - there are just 2 functions. Looking at the first one:
window.onload=function() {
var container = document.getElementById('container');
var containerAnchors = container.getElementsByTagName('a'); // get anchors
for(var j=0;j<containerAnchors.length;j++)
{
containerAnchors[j].onclick = handleClick;
}
};
When the page is loaded, we get all the anchors in the container div (these anchors are the digg style selectors/buttons or whatever you want to call them). Then, inside the for loop we attach an event handler to each anchor, which executes when the anchor is clicked. The event handler is a function called handleClick(), which we look at now:
function handleClick()
{
document.getElementById('hidden_data').value = this.id;
var container = document.getElementById('container');
var containerAnchors = container.getElementsByTagName('a');
// unhighlight all the links
for(var j=0;j<containerAnchors.length;j++)
{
containerAnchors[j].style.backgroundColor = "#eceff6";
containerAnchors[j].style.color = "#3b5998";
}
// highlight the link that was just clicked
this.style.backgroundColor = "#3b5998";
this.style.color = "#ffffff";
}
The line document.getElementById(’hidden_data’).value = this.id; gets a hold of the hidden field we talked about earlier, and dynamically sets its value to this.id . So what is this.id? Well, this refers to the anchor that gets clicked on. So this.id gets the id of the anchor. The hidden field is set, and when the form is submitted we can get the value of the hidden field in the $_POST['hidden_data'], assuming you’re using PHP.
Finally, here’s the CSS stylesheet, which needs to explanation:
body
{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
}
a:link {color: #3b5998}
a:visited {color: #3b5998}
a:hover {color: #3b5998}
a:active {color: #3b5998}
h1 {
font-family: Georgia, serif;
font-style: italic;
font-size: 20px;
font-weight: bold;
}
hr {
color: #A8A8A8;
height: 1px;
}
#container {
margin:0;
margin-top: 20px;
margin-bottom: 20px;
}
.digg_style_link {
color: #3b5998;
padding: 3px;
margin: 3px;
margin-bottom: 20px;
background-color: #eceff6;
text-decoration: none;
border: 1px solid #d4dae8;
}
That’s pretty much all there is to it.
very cool & good code, thank you very much for sharing.
Can you share this code on my JavaScript library?
Awaiting your response. Thank
Hi, i just thought i’d post and let you know your blogs layout is really messed up on the K-Melon browser. Anyhow keep up the good work.
@Javascript Countdown Timer: yeah sure I’ll do it ASAP
@Watch Bleach: Doh
Haven’t heard of the K-Melon browser before but now you mention it I’m curious and will take a look!
Super post, Need to mark it on Digg
[url=http://www.statsdaemon.com/]Kicker[/url]
I really like this post. Thanks for this article, Anyone got any more info about it? I am now your blog