Archive: The DOM
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!
Learning AJAX: Lesson 2 - Adding A Link Using The DOM
Posted on Monday, July 9th, 2007
Having made my feelings about not using AJAX before creating a site that can be used fully without it, I have moved on to the next part of my example. Previously, I had a random quote generator that displayed a different quote when you refreshed the page. My aim is to use AJAX techniques to enable you to display a new quote without refreshing the page, but by clicking a link instead. To do so we will need to do some DOM scripting.
The Markup Doesn’t Change
Currently, the example does not have a link to click to replace the quote with a new one. We could add one into the markup so that it could trigger our javascript function that we are still to write, but if a user without javascript enabled visited our page then there would be a useless, broken link. From here on in, the markup for the page will stay the same and everything is to be added dynamically by javascript.
Continue reading “Learning AJAX: Lesson 2 - Adding A Link Using The DOM” »
How To Size Your Font Based On Your Reader’s Screen Resolution
Posted on Monday, February 12th, 2007
Through the magic of MyBlogLog statistics, I found someone trying to use one of my javascript codes. It is always touching to find out that someone has found your work useful and it spurs you on to better things.
In this case, the user wanted something slightly different out of the code than what I had provided. Changing a page’s font size was the code in question here, but rather than changing it using the link method I had provided, they wanted to display a different font size based on a reader’s screen resolution. This is an inspired idea, I thought, as monitors get bigger and resolutions get smaller and text on screen disappears. This is why I use 1024×768 otherwise I wouldn’t be able to read anything!
Continue reading “How To Size Your Font Based On Your Reader’s Screen Resolution” »
Stylesheet Switcher - Part 3: Revenge Of IE
Posted on Wednesday, August 30th, 2006
I was just running through my examples yesterday evening, checking they work in IE7 when to my horror my stylesheet switcher failed miserably. I ran to IE6 to see if I had overlooked the problem for IE in general and it turned out that I had. I guess that since the majority of visitors to this site use Firefox (in which the function works perfectly) no-one else had noticed either. The strange thing was that it was only the final version that didn’t work, the first version, using just links rather than the dropdown box, did work. This means that the stylesheet switching function was working fine and there was a problem with the dropdown box.
Continue reading “Stylesheet Switcher - Part 3: Revenge Of IE” »
Stylesheet Switcher - Part 2
Posted on Friday, August 18th, 2006
Yesterday I began to create a stylesheet switcher using javascript and the HTML DOM. I finished up with an example of the work so far, but I failed to address a few of the points in my requirements, namely:
- Use a dropdown box to select styles
- Populate the dropdown box with stylesheet names from the title attribute of the link tag
- Graceful degradation in browsers without script
- Future proof javascript
Today I will tackle these issues.