My Selectors, Let Me Show You Them

Work continues on the MORPG. I’ve slowed quite a bit, largely because the burst is over, and partly because I want to make sure what I’ve done so far is good enough that it won’t cause trouble later on when I start getting into the really complex stuff (heh). This is good, because it’s already shown me a few things I could have done better, and I’ve gone back and improved them.

One thing that had me stuck for a bit was the character creation page: users get to select their characters class (Fighter, Caster, or Balanced) and an elemental affinity, using big ‘ol buttons that are kinda’ cool and light up when you hover over them and stay lit up when you click one to select it. It’s clean and simple and works really well; it’s very elegant. At least, that was the idea. Getting the stupid buttons to stay lit when a user clicks is a bigger pain than it should be: it requires javascript wizardry, and mine–while adequate enough to accomplish this simple trick–isn’t good enough for my own standards. Sure, I can get it to work, but the code is ugly and cludgy. Javascript tends to look that way to me anyways, but I’m not a huge fan of most of its uses (’cept AJAX, AJAX is spiffy). Here’s the code I used to highlight our buttons:

function $(element) {
 return document.getElementById(element);
}
function strip(element) {
 $(element).className = '';
}
unction activate(group,object){
 if(group == 'class'){
  strip('fighter');
  strip('caster');
  strip('balanced');
  $(object).className = 'active';
 }
 if(group == 'affinity'){
  strip('holy');
  strip('earth');
  strip('air');
  strip('neutral');
  strip('fire');
  strip('water');
  strip('shadow');
  $(object).className = 'active';
 }
}

Notice that those first two functions, $() and strip(), were created only to clean up the code in the third function, activate(). If I hadn’t done that, the code above would be an even more jumbled mess. So we have an ugly script that keeps our button lit up when a user clicks it. Is there a better way? Perhaps one that doesn’t even require the general ugliness of javascript?

There is. So bleeding-edge, in fact, that I both didn’t know it existed and was not surprised at all to find out that it doesn’t work in any version of Internet Explorer. Here’s how we do it:

input:checked+label {/* style rules */}

…that’s it. What took three functions in javascript takes one simple selector in CSS3

This method does have it’s own problems. No version of Internet Explorer supports it. Firefox 3 Beta 3, Opera 9.25, and Safar 3 Beta do, but I doubt earlier versions of those browsers do (well, maybe Opera). It’s so much simpler, though, that I’m hard pressed to really care.

Update: The character creation page is finished (for now). I ended up wiping all registered users while testing it, though. If you registered before, you’ll need to register again… or just wait until the thing is finished. ^_^

1. 

   chadwick757 said on February 25, 2008 @ 6:15 PM:

   So why should i care about all this stuff.  You haven’t even made me a character in the RPG!  and you screwed me out of a parking spot.  so why?

2. 

   Maikeru said on February 26, 2008 @ 6:07 PM:

   You wouldn’t. Only one of my readers would even understand what this post is about.

3. 

   chadwick757 said on February 27, 2008 @ 11:17 AM:

   hey i read your  post