Category Archives: Javascript

Enhance reCaptcha accessibility with disabled images

I’ve encountered an accessibility problem these days… default reCaptcha isn’t properly accessible when the images are disabled.

A solution is to detect the availability of images, and if they are disabled to manually adjust the styling of the problematic elements.
Basically doing this:

Now to share how that was accomplished.

1. Uploaded 2 files:

• blank.gif to the root of the domain
• captcha-accessiblity-enhancer to the root of the domain (it’s better to store all your JS file in a designated folder, but that is irrelevant for demo purposes)

2. Embeded the JS (before the body closing tag – </body>)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/captcha-accessiblity-enhancer.js" type="text/javascript"></script>

And that’s it. The people with disabled images will be able to properly use the reCaptcha now.

Internet Explorer & Elements with an ID get a matching global variable in JS

Object doesn't support this property or method

If you’re getting an odd behavior on your scripts in Internet Explorer, try adjusting their name (for example by adjusting their names with a unique prefix) just to make sure that there isn’t any element in the page you’re working on with the same ID as your variable name.

If you want to read a much elaborate explanation, go check out Rick Strahl’s post here: Internet Explorer Global Variable Blow ups, but the above should get you going in no time (and help you avoid some headaches).

jQuery Easy Slideshow Plugin

There exists no other JS sideshow plug-in for me…. just Cycler:

http://jquery.malsup.com/cycle/

Why bother using complicated alternatives… when you can do it in just one line?
$(‘.slider’).cycle({fx: ‘fade’});

Font resize detection

We all crashed into the problem where a website’s layout gets ruined when zooming in or out the font-size in the browser…

You can read a really good article from ALA giving a nice insight with regards to what approach should you take in the early development phases towards avoiding various zooming problems: http://www.alistapart.com/articles/fontresizing/

Most complex designs don’t allow so much flexibility such that you can make things really scalable via the CSS, so our most used option will probably be a touch of Javascript.
As on most of my projects jQuery is a standard, I chose to use a little jQuery plug-in that does the job of detecting the font-resize event really well:

http://wellstyled.com/en/javascript-onfontresize-jquery-plugin/

Once you caught the event you can do any kind of magic

What approaches did you take to solve such situations ?