Archive: Javascript
FontSizer Reloaded - Changing Font Sizes With JavaScript
Posted on Friday, November 9th, 2007
I broke this script and have fixed it! Please read about it and download the script from this post.
A long time ago I wrote a script that changes font sizes. In the year since, I have learned a lot about JavaScript and accessibility and looking over the code I wrote I was ashamed! I will dissect the mistakes I made in another post, but for now I have re-written and vastly improved the script.
Improved Functionality, Improved Accessibility
The script now does everything for you without you having to change your markup, so it degrades nicely when JavaScript isn’t available and it uses (mostly) standards based JavaScript (but don’t get me started on Internet Explorer support for setAttribute).
Once the DOM has loaded the script will check to see if the font has already been set by trying to read a cookie (cookie script was originally from Quirksmode). If the cookie is found then the font size of the body element is set to the previous value. If no cookie is found then the script creates an element and measures the height of it to work out the current font size (thanks to a script on detecting font resizing at A List Apart) and sets that as the cookie. It then adds three links to the document, appending them to an element of your choice. The three links increase, decrease and reset the font size, saving the changes to the cookie.
How To Use It
Now all you need to do to use the fontSizer is:
- Download the script (there is an updated version with class names below)
- Change the string “fontControls” at the very end of the script to the element you want the font sizing links appended to.
- Upload the script to your server
- Include the following line in the
<head>of your document:
<script type="text/javascript" src="fontSizer.js">
</script>
When you visit the page you did this on, you should find that three links appear: A+, R and A- (they’re not pretty, but customisation is left as an exercise*). On clicking A+ the font size of the whole document will increase, clicking A- will decrease the font size and R will reset it to the original size. The script has been tested and works in the following browsers:
- Internet Explorer 5.5, 6 and 7
- Firefox 2
- Opera 9
- Safari 2
- Camino 1.5
I have also provided a (very simple) example. So, if you want to add an unobtrusive, accessible way of increasing your website’s font size, please download the fontSizer script and use it!
If there are any problems, please let me know and I will do my best to help you out.
As requested in the comments, I have updated the fontSizer to include class names for styling the links. The “A+”, “R” and “A-” will now come with the classes “increaseSize”, “resetSize” and “decreaseSize” respectively. If you want to change them, just have a look into the source code and you should see where they are set. The new version is available to download now.
* I have always wanted to say that!
Speeding Up Unobtrusive JavaScript By Beating window.onload
Posted on Tuesday, November 6th, 2007
I am looking to rework a couple of my scripts here at Unintentionally Blank as in the time since writing them I have learned a lot about accessible, unobtrusive JavaScript. My old scripts no longer cut it and it is time to improve them. Before I start, I wanted to beat window.onload, the event that tells your JavaScript functions that everything has loaded and you can use the DOM now. I had heard of solutions to this before, but now I was to start developing these scripts again I wanted to find the best solution.
Why Take On window.onload
Unobtrusive JavaScript relies on externalising all your JavaScript code and calling it in via <script> declarations in your HTML document’s <head>. With this method, adding functions to elements in the document needs to be done by attaching event handlers which classically was done with window.onload. However, window.onload only fires once the document and any elements in the document have loaded. So, if you have large images or lots of them the window.onload event will not fire until everything has loaded. This has the potential of leaving any elements you want to give events to go without them, potentially allowing users to click on these elements and not receive the enhanced behaviour that your JavaScript was just waiting to provide.
Beating window.onload by adding event handlers when the DOM, but not necessarily the content and images, has loaded reduces this time and quickens the page’s response.
The Solutions
Looking around the internet threw up a number of increasingly complicated solutions. Dean Edwards seemed to come up with the original solution which was steadily improved until a final version as released (and subsequently used in the JQuery library, I believe). Peter Michaux followed up with some increasingly complicated stuff to remove the time between the page becoming visible and the events being attached, but the Dean Edwards method seems to work for most applications on a small scale.
Following in the footsteps of Dean and packaging the function up into a standalone solution was Jesse Skinner with his addDOMLoadEvent. Not only did this implement the solution nicely, with all the updates that have occurred since the original solving, Jesse also compressed the function as best as possible. The current version stands at only 671 bytes in size and works in Internet Explorer, Firefox, Opera 9 and Safari, plus degrades nicely to use window.onload for any browsers that don’t support the technique.
Coming up soon then, will be the return of my scripts, faster, more accessible and generally better than ever before thanks to this and other techniques I have picked up over the last year. It will be like an early Christmas present, I can’t wait!
Learning AJAX: Lesson 4 - Using The XMLHttpRequest To Get Your Data
Posted on Friday, November 2nd, 2007
Time to finish off my short series on simple AJAX. I started a while ago with an explanation on not using AJAX, then I backed that up with an unobtrusive way of adding a link to a page using JavaScript so that we only use AJAX when JavaScript is available. In the last post I explained, simply, the XMLHttpRequest and now I will show you what to do with it, culminating in the completion of a very simple, AJAX powered random quote generator.
Continue reading “Learning AJAX: Lesson 4 - Using The XMLHttpRequest To Get Your Data” »
Web Accessibility — Javascript
Posted on Thursday, October 18th, 2007
Continuing in my series of posts on different things to think about when considering web accessibility this week I want to look at JavaScript.
I actually had some inspiration in this post from my girlfriend. I accidentally left JavaScript disabled one night after doing some testing on a site and came home the next day to be told there was “something wrong with the internet.” I quickly realised what had happened and rectified the situation, but the sites that she thought had broken may surprise you. Three major ones caught my attention and there’s a fourth I’d like to mention as well.
Javascript: Getting IE To Return this
Posted on Thursday, September 20th, 2007
Internet Explorer can make the simplest piece of code hard. It turns a simple function into a headache. The standards say one thing, but Internet Explorer doesn’t just disobey those standards, it comes up with a different function and a different idea of what that standard even meant. All I want is that when you click on an element to trigger a function, you can refer to the element using this. Let me explain.
Simple Javascript Functions… Really?
I am gaining a lot of experience and practice with javascript in my new job and I am really enjoying it. I’ve dealt with some complex stuff and some seemingly simple stuff. But sometimes it is the simplest of functions that cause the biggest problems.
All I needed to do was create a page with a few <textarea>s that held text for someone to copy. To aid in this, I was to write a short javascript function that would automatically select the text when the <textarea> was clicked on. Here is the function that will do it:
function selectText() {
this.focus();
this.select();
}
Attach selectText() to the onClick event for each <textarea> and I was sorted.
Except For One Thing…
Internet Explorer, in all its wisdom, returns the window object as the result of this regardless of the element that triggered the event. Firefox and all other sane browsers return the element as you would expect. Quirksmode explains this much better than I can.
I spent forever searching for a way to return the element that triggered the event so that I could use the function, finally stumbling across a mention of event.srcElement in a forum. Looking it up, I discovered that this was the function I needed. However, using it took a more roundabout method than hoped.
When attaching an event to an element, you can only give the reference to the function, passing parameters is not allowed. To pass event.srcElement to the event that I was attaching I needed an anonymous function. Let me illustrate with code:
For standards compliant browsers:
textareas[i].addEventListener(’click’, selectText, false);
For Internet Explorer:
textareas[i].attachEvent(’onclick’,function () {
IEselectText(event.srcElement);
});
Got There In The End
Here is the code I finally produced, with a little example of how it works.
So, if you want to use this don’t forget event.srcElement.
(Unless there’s a much better way, but I spent a good while searching for this and I didn’t get anything better!)