I went to a local computer store the other day to buy myself a new keyboard. I lost the ‘space’ on the old one.

My fellow colleague pho went with me and that was fatal… He made me do it… I bought Logitech G-15 gaming keyboard.

Damn! The keyboard is great! And apparently, my MX510 mice is in love with my new keyboard.

Multi-color sIFR is updated.

For Mac users – please, be careful with the .as files – they should be open only with Flash, and not the code editor with which you usually edit your HTML and CSS files. Some code editors change delimiter strings into unusable characters.

Feel free to report troubles, if any.

It’s Sunday evening and you ran out of anything useful for a dinner. Yeah, you could order a pizza or something, but then you’d wait for it 30 mins or so. And your son is kranky. Sounds familiar? Yes, I often found myself in such situation.

If you have some leftovers, most importantly a slice or two of yesterday’s bread, a spoon of milk and an egg, you can make him a quick French toast. For those of you who by any chance didn’t know how to prepare this simple meal, let’s explain. Continue reading ›

So, until today, I had the anti-spam plug-in here at the blog. It basically functions in a way that it compares the content of the comment with URLs from the black lists on the surbl.org and if the URL is found, it redirects you to http://127.0.0.1/ (a.k.a. localhost).

My assumption (and you’re here to tell me if I’m wrong) is that all those lists eventually become filled with legitimate (non-spam) URLs. And that would explain why some of my visitors (thanks to Jens for reporting it) couldn’t submit their comments. All I can say is – sorry for the inconvenience!

Do you remember the Dom scripting book by Jeremy Keith? Well, the guy is going to speak at the one day workshop about the AJAX at the Digital Sandbox, NYC.

Why I’m telling you this? Because, unfortunately, I had to refuse a special invitation from the organizers (sorry, guys)… (Ed: First, I missed the @media, now it seems I’m going to miss this one, too.)

Nevertheless, if you’re going, don’t forget to pick up your Survival Kit (or better said a ‘Surprise’ Kit) and, of course, say ‘hello’ to NY in my behalf.

Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).

The structure

Each radio button and/or checkbox input element should be surrounded with <label> tags. Here’s the example:

<label class="label_check" for="sample"><input name="sample" id="sample" value="1" type="checkbox" /> Sample Label</label>
<label class="label_radio" for="sample"><input name="sample" id="sample" value="1" type="radio" /> Sample Label</label>

The presentation

We are going to remove inputs far away to the left and instead place a background image to each label. Radios and checkboxes will be toggled, because clicking/spacepressing the corresponding label toggles them on or off.

See the CSS sample:

label.c_off,
label.r_off,
label.c_on,
label.r_on { padding-left: 20px; }
label.c_off input,
label.r_off input,
label.c_on  input,
label.r_on  input { position: absolute; left: -9999px; }
label.r_off { background: url(radio_off.gif); }
label.c_off { background: url(check_off.gif); }
label.c_on  { background: url(check_on.gif); }
label.r_on  { background: url(radio_on.gif); }

The behavior

And finally, some JavaScript trickery to handle all the className switching. In Safari, labels are not clickable, hence a few extra Safari speciffic lines.

var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {
    if(!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off;
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.checked = true;
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.checked = false;
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.checked = true;
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.checked = false;
    };
};

Also, be sure to check the previous post about how to preload all those interface graphics.

Update

Sample web sites:

• Nacional (‘remember me’ checkbox and search filter radio buttons)
• Hellgate: London (search filter checkboxes)

Last week I received an e-mail form a guy asking about how to preload interface images for submit button in forms, like the one at the web.burza contact form. The method is quite simple, really. Continue reading ›