On the Form we have a field called "Action" too and we can inspect its value to find out what the user wanted to do. All works well and it's a trick I've used a few times in the six years since I first talked about it.
Yeah, and? Well, the other week I talked about making nice-looking buttons. How about we marry up the two techniques and make an accessible Form with nice-looking buttons!?
Let's say we want the user to choose between three buttons on a questionnaire form -- Yes, No and Skip. The HTML is like so:
Pretty boring, right? It's crying out for some extra style. The trouble with using CSS to style input-type buttons is that once you add any styles they start to look all a bit weird and it's nigh on impossible to get a consistent appearance across all browsers. That's why I prefer to using images as buttons (see link above).
Here's the same form but with a button-like image used as the background of the buttons:
It could look a little better still though. How about adding some icons to the buttons to help the user distinguish between them. The trouble with this is that the humble <input> element won't let you add child elements and we've already added a background, so we can't add another and we don't want to use a separate background image for each button now, do we!?
This is where sprites come in! Here's the image I'm going to use as a sprite:
With a sprite we can use this single image as the background for all three and simply offset it's position by the right number of pixels to make it appear like a different button. The advantage of sprites being that there's less network traffic to load 1 image than to load 3 (or more), so the page loads quicker!
Using the sprite I can make the form look like this:
Now it's more user-friendly as it's a lot more obvious which button is which. Not that I'd advocate the over-user of icons, but in certain places they can really help out.
To do this we simple added an extra class of "yes" or "no" to the first two buttons. Then in the CSS we added the following rules:
Make sense? It just moves the sprite image upward the right amount of pixels to show the right icon.
Now, some of you may be thinking the flaw in this is that I have to hard-code the button labels? Well, to get round this I use Computed For Display fields called "ButtonLabelYes", "ButtonLabelNo" and "ButtonLabelSkip". These fields hold the value to show in the buttons.
Inside your WQS you can then do something like this:
if document.Answer(0) = document.ButtonLabelYes(0) then
You can see a working demo of this here. If there's interest in it I'll update the downloadable version of that database. Just let me know.
The Perfect Desk Quest - 2013 Update (Part 2) | Blog
Wed, Dec 11th 2013 3:10a Jake Howlett Back in March I updated you all on how my on-going quest for the perfect desk was coming along. Here now is another update. Question: Can you ever have too many monitors or enough "real estate" desktop size? Answer: No! Here's how my desk looks now: From left to right, there's a (newly-added) Dell U2713H (showing OS X), a Dell U2711 and a Samsung SyncMaster 245B (both showing the same Windows 7 PC). All in there are 9,676,800 pixels glaring back at me!! Aside from adding a brand new monito [read] Keywords: desktop
Recovering a Laptop After Forgetting Windows and BIOS Password | Blog
Wed, Dec 4th 2013 3:10a Jake Howlett My sis-in-law loves a bargain (she's from Yorkshire!) and recently rang to ask me (via her sister, my wife) if I'd be able to recover a laptop she'd been offered, before she went ahead and bought it. Apparently the owner of the laptop had forgotten the Windows password and had written the laptop off as worthless, so was willing to sell for next-to-nothing. I said yes, I'd able to do something with it. What I didn't realise was that it might have a BIOS password, which it did! Initially I' [read] Keywords: google
Rockall Design Now in its 11th Year! | Blog
Fri, Nov 1st 2013 4:00a Jake Howlett Rockall Design ltd (the little company I run from the office-slash-garage in my garden) was 10 years old yesterday. It's customary on this day each year that I plot a chart of turnover growth over the years. So, here it is: As you can see it's been a bumper year. Last year I put down what, at the time, I thought was a good year to: Long hours and 'hard' work. But mainly luck! This year is much the same. Although, if I thought I was doing long hours back then I had no idea what was in stor [read] Keywords: domino
Using Font Awesome Icons in Fireworks | Blog
Mon, Oct 14th 2013 4:00a Jake Howlett The font-based web icons from Font Awesome is brilliant. Especially when used in conjunction with Bootstrap. You can quickly and easily add any one of the icons to your HTML buttons (or many other elements for that matter). Like so: Sometimes though, you can't use web fonts. Either you can't rely on them being supported or, for some other reason, you just want to use an image file. That was the case for me recently and I wanted an image file of an exclamation mark. Here's how easy it was usi [read] Keywords:
Bootstrap Advanced Date Picker Plugin | Blog
Fri, Sep 6th 2013 4:00a Jake Howlett For some time now I've been creating date fields in Bootstrap-based websites that look like this: Clicking either in the field or on the button next to it launches a date-picker, like this: In the Notes Form the Date Field is configured in such a way that it accepts dates in the format 12-Dec-2009 (while storing them in normal Notes DateTime format of course). The field properties are like so: It all works well and users like them. Not least because there's no confusion over whether it' [read] Keywords: domino
Quick Tip: Login To Same Site as Two Different Users | Blog
Tue, Aug 20th 2013 12:00p Jake Howlett Here's a tip I discovered kind of by accident in one of those "I wonder if" moments. It came about after discovering a Fiddler tip that lets you trace localhost http traffic. The solution is simple: you simply add a trailing space, so that you surf to http://localhost./ At first I'd assumed that this was some odd quirk in the way browsers handled host names. Turns out it's actually working the way it should. Technically speaking all FQDNs should have a trailing space, in order to make them [read] Keywords:
How To: Virgin Media + BT Infinity = Reliable Internet Connection? | Blog
Mon, Aug 12th 2013 4:03a Jake Howlett The quest for an always-on internet connection is almost at an end! As if to assure me it was worth it, within 24 hours of Virgin Media connecting my secondary (failover) broadband connection the "primary" BT line went down. Again. For the third time in as many months. This time, however, I was prepared and had a backup connection and could carry on working. The BT engineer that came this time was very helpful. Bordering on apologetic for the fact I'd had so many visits of late. So much so he [read] Keywords: admin
Modern Day Communication Reliability | Blog
Thu, Aug 8th 2013 4:09a Jake Howlett Two weeks ago today I mentioned that I'd ordered a Virgin Media cable internet connection as a redundant 2nd connection in case my first goes down. Today the engineer is due to come and connect me up. Yep, a two week wait to get connected. Luckily I'm already on the internet, otherwise there's not a chance I'd ever wait that long. Anyway, I booked a date and the AM time slot for the visit and went about "waiting". Then, yesterday I got the message below: Which sent my overly-paranoid an [read] Keywords: twitter
Error Correction in Lotus Notes Maths | Blog