JavaScript tweaks

I’ve been getting some feedback on the toggle-able sidebar sections I implemented last week.

Okay, so it was just one email from Jamie but hey, feedback is feedback.

Anyway, the main feature request I received (stop laughing!) was to make the toggling sticky. In other words, once a section is clicked and becomes hidden, that section should remain hidden no matter when the page is revisited.

Cookies to the rescue. I rejigged the JavaScript file a little bit so that a cookie is set or unset whenever a section is hidden or revealed. When the page loads, the cookies are read and the corresponding sections are hidden.

Now, the only downside I can imagine to doing this is if a browser has been set to "ask me" every time a cookie is set. Then again, if anyone is browsing with that kind of configuration, they’re going to be used to clicking a lot of confirmation dialogues.

There’s another unrelated bit of JavaScript that I wanted to introduce to the site but unfortunately, that hasn’t worked out too well…

Cameron Adams wrote a clever little script to address an accessibility issue with select menus, namely that using "onchange" to submit a form only really works when using a mouse. If you use a keyboard then the form will submit before you’ve had the chance to choose the option you want. Cameron’s script solves this issue by intercepting key presses and checking whether tab, enter or escape was pressed.

The script works well for keyboard navigation but unfortunately it breaks the mouse navigation in some browsers, specifically Mac browsers.

In theory, when you select an option from a menu using the mouse, the following events are triggered: the <select> element is focused, then it’s clicked and (once an <option> has been chosen), it’s changed. The corresponding event handlers are "onfocus", "onclick" and "onchange".

I did some testing in Safari and I found out that, in reality, the "change" is triggered before the "click" and that "focus" isn’t triggered at all. Internet Explorer 5 on the Mac does something similar.

There isn’t much I can do about IE5 but I clicked that little bug icon in Safari and sent a report off to Dave Hyatt’s team of busy bees.

In the meantime, I’m just relying on the "onchange" event to submit the theme-switching form. Obviously this is less than ideal for anyone navigating with a keyboard.

I’ll keep working on it.

Have you published a response to this? :

Previously on this day

17 years ago I wrote Friday Fun

3D Pong.

18 years ago I wrote Residence permits and Mac OS X

Today was a good mail day.