Ask the CSS Guy

Folks, this post has nothing to do with CSS.

My scripting skills are still in the beginner stage. The only JavaScript library I've been using is EJ - Essential JavaScript, which is very small, very readable for a newbie like me, and easy to work with for the very basic DOM manipulation I've worked on in projects. It even uses $('someID') as a document.getElementById replacement so I can use the dollar signs like the big boy libraries.

But when a project demands some special effects (like moo.fx or scriptaculous), I thought I could just pull in my favorite library and slide, grow, shrink, whatever, without any hiccups. Not so. I found jquery, and tried to plug it in and use alongside my existing scripts. That's when I noticed some "getElementsByTagName is not a function" errors.

It turns out that my use of $('someID') was the culprit. jquery's use of the dollar sign is much more involved than EJ's, and it was causing some hiccups. So I changed the EJ "library" to use getId('someID') instead of the $. Now it's still more efficient (at least as far as me typing it out) than using document.getElementById, and I get the benefits of using jquery where I need it, too, with no more conflicts (yet).

As I grow more familiar with jquery, I look forward to making better use of it, and eventually exclusive use of it. In the meantime, I'm attempting to get the best of both worlds - a powerful library that I don't understand vs. a less efficient library that I "get" (no offense to Robert Nyman about the efficiency remark).

This post comes at a time when jquery has just announced a new version (1.1.3), and I am expecting Pro JavaScript Techniques by jquery's author any day now from Amazon. I so look forward to understanding all this.

Karen writes

I am working on developing a reporting form for a mobile device as a part of NASA's Constellation project and I'm trying to figure out how to do entirely CSS tooltip pop-ups onclick instead of a hover effect, without use of Javascript DOM since it is not supported in IE Mobile 5. I've been trying to figure out ways but so far haven't found a good method. Do you have any ideas?

Yes, I have ideas, but I have no way of testing this in IE Mobile 5.

We could start with a basic CSS hover tooltip example. My first thought is to tweak it to work with :focus instead of :hover.

Here's a simplified :hover example.

If we just swap out :hover with :focus, we get a method that works in Firefox, but not in IE6 or IE7 (or Safari).

Let's try :active instead of focus. It works fine in IE7, but not the other browsers.

Let's combine :active and :focus and see what happens. It works fine in IE7 and Firefox, but not in IE6 or Safari.

In conclusion, not only do I know next to nothing about the mobile world, I can't find an example that works in all regular browsers consistently. Perhaps you know your target audience well enough that you know you just need it to work in IE5 Mobile and no other browser. In that instance, my only suggestion would be to test one of the above methods to see if they work. If they don't, I've got nothing further to offer, but I would appreciate hearing your results.

If anyone else knows a possible solution, feel free to share.