Andy Burns’ SharePoint Blog

Do with without CSS for those headlines with funny fonts – use sIFR to replace your text with a Flash image of the text. Neat, although you’d need to be a bit of a typography nerd to panic over it that much…

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: Read more »

So, I’d been thinking of writing something like this. Basically, it allows you to fetch and XML page through the XMLHTTPRequest thingy, apply a style to it, and display it as a page. Cool!

Peterned has a good idea for getting the :Hover of an element to work properly – use HTC files.

Good browsers (Mozilla, Opera and the like) allow you do define a style for hovering over, well, nearly any item. Naturally, Internet Explorer only supports a:hover – that is, hover for anchor tags. This sucks, and Peterned has written an HTC file that will, if the client is IE, rewrite the styles dynamically and assign the appropriate functionality to them.

Pretty cool.

Here’s an interesting attribute in CSS I didn’t know about
-moz-border-radius
The style below is :
font-size: 12px; background-color: #ffffff; -moz-border-radius: 8px;
border: 2px solid #3366cc; padding: 7px;

A box with a border! Of course, this only works in Mozilla

Another box with a border!

Tags: CSS, Rounded Corners

So, this whole ‘Ajax’ thing set me thinking – why not try to make all ‘normal’ user interface components – date, numeric, combo boxes, autosuggestion boxes, image rollovers, menus, tooltips, etc. – why not make them all into libraries that you can include in a page, and then configure through the attributes of a node. E.g.
<input name='someDate' type='text' value='' subtype='date'
format='yyyy-mm-ddd'>
Then the .js file you include reads inputs, finds dates, and add the functionality you need.

I’ve already done this for combo boxes – I’ll put it on my site soon – and so I started looking into menus, and found some neat things:

• Almost entirely CSS menus
• Windows ‘Start menu’ like lists, similar to above but with more javascript (would need to work out the image reloading issue this seems to have though!)
• More CSS dropdowns
• Suckerfish Drop-downs

I didn’t know you could do so much with CSS. Clearly, it has come along since I last really got stuck into it!

Mandarin Design shows something interesting – using CSS to provide Magazine formatting. You don’t see that much in websites – mostly they have ‘website’ style. The page itself isn’t that well formatted – but the things it describes is interesting.

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;}">

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

The interesting bit is the overflow. There is also overflow-x and overflow-y, although Mozilla and IE render the scrollbars differently – Mozilla outside the DIV and IE inside the DIV.
<div style="height:200; width:200;
z-index:1; overflow:auto; background-color:#fff;
color:#000">