Javascript the 3rd leg of my blog
As you already know modern web design is walking on 3 legs.
- Semantic markup for content
- Cascading Style Sheets for display
- Unobtrusive ECMA script (called Javascript) for behaviour
Missing leg
You could see that my blog has been missing one leg up till now. I has been using XHTML 1.1. Strict (which now validates - I had a small problem with search form), CSS 2.0 divided into 3 files - layout, colour and typography (they validates as well). I find it very useful this way. It keep the code nice and clean and finding anything is a piece of cake. The idea comes from DOM-scripting guru Jeremy Keith.
So the next on my agenda is to create some interesting javascripts(JS). I have read two books about JS and I have studied the basics of JS during my CIW course but I am still not very comfortable using it. I will have to play a lot more with the code to get the whole idea.
The first project
Here comes the first project. I am going to implement DOM-script which will be replacing font size values in my CSS to give users the possibility to increase the font size directly from the page. Users who now how to do it using browser function (usually CTRL+) can do it this way but for the rest there will be my script
The script will fire after the page is fully loaded. It will generate list of 3 items which will be used as hooks for font size switching. The list will be generated only if the browser is capable of handling the script, if not no code will be generated. This solution will prevent having useless elements on the page when scripting is not supported by end-device such as screen readers or search engine robots what would happen if I put the code directly into the html. The script will be obviously external, linked from the head of html which is (or maybe should be) standard solution these days.
More more more
Other scripts will follow. At the moment I use 2 forms on my blog. One came with wordpress and another is plug-in. Both of them are absolutely fine but I do not like the way the form checks are done so I have decided to create some scripts for them as well.
In the future when my knowledge of JS will be better I would like to change the appearance of the script which will change the font size the way scrolling bars work or implement some drug and drop solutions. But I ma not there yet so stay tuned.
Update - 29th January 2007 - 17:30
As you can see I have successfully implemented the font resize javascript. It is still not perfect but it works. There is a place for improvement specially in code. The function creates cookie which stores the information about the users font-size selection. Somehow the cookie does not work correctly in IE 6.0. It works in latest Firefox, Netscape, Opera, IE 7.0 and IE 5.5 as well. I have not found out yet where is the problem. If you guys have an idea please let me know.
