Unintentionally Blank

Phil Nash on the Internet, Web Standards and Accessibility

JavaScript - Don't Try To Be Too Clever

Jun 23, 2008

by Phil Nash

You know who's waiting to spoil the day, Internet Explorer. A couple of people reported that my font sizing script was not working in IE7 or 6 and I've finally got around to checking out why. When I rewrote the code to add class names to each of the sizing elements, I tweaked a couple of things to make it work better, make the file size smaller and make it more standards compliant code. My mistake? Standards compliance.

Internet Explorer does not understand setAttribute when used with style. There are a few lines in which I changed from using element.style.size = xx to element.setAttribute('style','size:xx'); and this broke the script in IE. Don't try to be too clever, and more importantly for me, check whenever you make any change, no matter how small it may be.

Thank you to those who pointed it out, the issue is solved and the script has been tested in Firefox 2, Safari 3, Opera 9.5, IE6 and 7 and it works. Please download it and use it and check out the working demo with the updated script.

Using the Script

To use the script, download it using the link above and save with a suitable name (fontsizer.js is a good example). Upload it to your site and add the following code to the <head> of the page you want to use it on:

<script type="text/javascript" src="fontsizer.js">
</script>

Then you need to include an element, a <div> for example, with the id fontControls. The script uses that element to append the font size controllers to when the page loads.

Then, load up your page and it should work. If you need any more help, please get in touch and I will do my best to help you out.

Unintentionally Blank is Phil Nash's thoughts on web development from 2006-2008. Any code or opinions may be out of date.