Strictly, not a coding thing, but it’s about font style. How to Spot Arial and The Scourge of Arial are interesting reads.

For years now I’ve been interested in typography. It seems to me that it’s one of those overlooked things – that web page looks okay, until someone who knows about type works on it, and then it looks great.

I agree with the article, I don’t like Arial – the weight of the top of the ‘a’ seems wrong. Not sure what to use instead – at the moment I use Tahoma and Trebuchet a lot, but I’m not entirely happy with either. And yes, I’m sticking with the free fonts – I’m not a specialist, I ain’t paying for fonts (blimey but some of them cost…)


Styling Checkboxes with JavaScript

I’ve been reading recently about how to do Styled Checkboxes. Well, this was something I was working on too – and naturally, I like my way more.

How it works
When the page loads, the JavaScript in checkbox.js checks all of the INPUT tags on the page. If they are a checkbox, and have BOTH and imgOn and an imgOff, then the INPUT tag has its style set to hidden, and the appropriate images are added to the DOM. They’re floating, though, and so are positioned where the checkbox was on the page.

When you click on one, it changes the state of the underlying checkbox (it’s still there, just hidden), and displays the image appropriate for that state.

When the form is submitted, the checkbox is submitted as normal.

As a user leaves the page, on unload the code in checkbox.js tries to tidy up after itself, although I’m a little concerned about memory leaks after some interesting articles I read recently.

Known Issues

  • These controls are not part of the tabindex. My friend Bruce Sandeman has been working on a version of this where the images are ‘tabable’, but is struggling to turn the border of the images off. I’ve included the code anyway – see checkbox2.js. I’ve not reviewed it yet, so user beware!
  • It’d be nice to hand all events on to the original checkbox for handling.
  • At the least, some sort of mouseover/mouseout? It’s not so obvious that these are checkboxes, at least with the demo images I’ve chosen.
  • I’m a little concerned about memory leaks given some things I’ve read recently and my use of closures. If anyone knows how to prove/prevent any leaks, let me know, that would be cool

How to Use

Real tricky this – include the checkbox.js file in your HTML page.
<script src="checkbox.js"></script>
Then, in the HTML for each of your checkboxes, add two new attributes – ‘imgOn’ and ‘imgOff’. The value of these attributes should be the path to the images you want to use for the checked (‘on’) and unchecked (‘off’) states.

<input type="checkbox" value='2' imgOn='tick.gif' imgOff='cross.gif' />

and with luck, that should be you done.

See the code below: Continue reading “Styling Checkboxes with JavaScript”

Styling Checkboxes with JavaScript

An interesting technique

Here’s an interesting technique of drawing a user’s eye to an area on a page, by using a colour that fades after a couple of seconds. I know that it’s supposed to be for areas updated by the user (and I can think of at least one project for doing this), but it might work else where. I must give this a go, see what it’s actually like. It’s going to either be really good, or really bad…

(Update – having migrated my blog to WordPress, I find that it uses this technique. And it’s quite nice. It works well)

An interesting technique

Vertical Text in Internet Explorer


Vertical Text

CSS seems to lack an real control over text direction – it should, but of course the reality is different.

What I found was a way of making vertical in IE using some of those pointless filters, and the support IE has for top to bottom, right to left languages. It’s a bit sneaky in doing this – but it works in IE, at least. I haven’t found a way of doing it in Mozilla.
<div style="{ writing-mode:tb-rl;
filter: flipv fliph;
white-space: nowrap;}">

Vertical Text in Internet Explorer

Alpha channel PNGs in IE

Gifs suck. PNGs (Portable Network Graphics) are much better – more colours, freedom from intellectual property rights, and (best of all) an alpha channel for transparency. Some good articles:

PNG opacity (with some nice examples)

Fuzzy Drop shadows (like on Google Maps)

Transparency with HTC files

And again

– Choosing what image to serve in PHP on the server

Related: Opacity in CSS, being able to see through DIVS – CSS Transparency for IE, CSS Opacity

Alpha channel PNGs in IE