/    Sign up×
Community /Pin to ProfileBookmark

Make those Radio Buttons and Check Boxes beautiful!

Copy linkTweet thisAlerts:
Jul 13.2005

I have been working on a solution to styling some of the elusive form controls which have, so far, resisted any easy, accessible and elegant styling- as far as I know, anyway!

Well, the result of my labour is available here for all to use and learn from: [url]http://www.gamingheadlines.co.uk/wod/formstyle/index.html[/url]

Constructive critisism welcome!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@buntineJul 14.2005 — You have done a good job here. Works excellent on my machine, too. The checkboxes are not preloading, though.

Regards.
Copy linkTweet thisAlerts:
@WoDauthorJul 14.2005 — I slashdotted it and got a lot of feedback stating it doesn't work in XY situation so there is still some work to be done.

The biggest conundrum, however, is that it fails when JS/CSS are enabled but IMAGES are disabled- now how on earth can I work around that!

You can forgive me for not preloading, right, come on ?
Copy linkTweet thisAlerts:
@KravvitzJul 14.2005 — Your script looks good, at least at first glance. ? I'll have to give it a better look later.

This is a common problem. Since you are already using JS, here is a theoretical work around.

You could use an image proloader script to load an image.

You could set your initialization functions to only run when the onload event of that image occurs.
Copy linkTweet thisAlerts:
@graatzJul 15.2005 — it's very pretty, however i'm a little put off at the difficulty distinguishing which checkbox or radio I'm at when I click.. since the mouse pointer is static for the whole div, it gives the whole thing a 'fake' kinda look.. if that makes sense....
Copy linkTweet thisAlerts:
@WoDauthorJul 15.2005 — It's actually wrapped in a span, which you can make whatever size you like- in theory.

I have updated the script and fixed the images problem. The script will now detect if images are disabled and not execute.

Also, I have prevented the image flicker problem in IE6 by dropping the hrefs from the links and giving them a tab order instead.
Copy linkTweet thisAlerts:
@KravvitzJul 16.2005 — Which browsers have you tested it in?

function preloadImages()
{
img1 = new Image();img1.src = "CheckboxUnchecked.gif";
img1 = new Image();img1.src = "CheckboxChecked.gif";

<i> </i> img2 = new Image();img1.src = "CheckboxUncheckedA.gif";
<i> </i> img2 = new Image();img1.src = "CheckboxCheckedA.gif";

<i> </i> img3 = new Image();img1.src = "CheckboxUncheckedB.gif";
<i> </i> img3 = new Image();img1.src = "CheckboxCheckedB.gif";

<i> </i> img4 = new Image();img1.src = "CheckboxUncheckedC.gif";
<i> </i> img4 = new Image();img1.src = "CheckboxCheckedC.gif";

<i> </i> img5 = new Image();img1.src = "RadioboxUnchecked.gif";
<i> </i> img5 = new Image();img1.src = "RadioboxChecked.gif";
<i> </i> }
What's odd about this code?
Copy linkTweet thisAlerts:
@WoDauthorJul 25.2005 — The distinct lack of var before each img*?

Search me, I googled image preloading and used the first solution I came across as a dirty hack!
Copy linkTweet thisAlerts:
@KravvitzJul 25.2005 — The distinct lack of var before each img*?[/QUOTE]
besides that.

Look at the numbers used on each image variable.

2 through 5 are never actually used.

Really, they should be numbered 0 through 9 or 1 through 10 so that each image has it's own variable instead of sharing one variable for two different images.
×

Success!

Help @WoD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...