JavaScript - Don't Try To Be Too Clever
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.