God I hate browsers!
Trying to finish off a website that I've been working on in my spare time for ages now, set myself a timescale to do it in, gave myself what I thought would be plenty of contingency time, but as always happens in your "spare time" other things kept coming up and I just haven't had much time to work on this site. The customer is rightly chasing it as its now several weeks late.
One thing that has really been bugging me, and should be a simple task, is a drop-down menu. Its a content managed site written by myself, the customer can add their own pages and manage the menu's etc, therefore the menu has to be dynamic, and multi-level. I got this kind of working, however there were some formatting issues, plus one big issue with the menu's flickering. This was down to mouseover/mouseout issues, where moving from a parent menu item would call the onmouse out, the moving of the mouse into the child item would trigger onmouseover, they would get into a bit of an argument with each other and things would just go a bit crazy (not good for anyone suffering from epilepsy). In the end due to numerous other issues I decided to re-write the whole thing myself (I had cheated and got a supposed cross-browser drop-down menu control off the net).
So, got to work on it this morning, by early afternoon it was looking quite good, with nice transparent backgrounds, fading effects, etc (nicer than the original
). However, one thing that was still an issue was the flicker. Then I found a neat event called "onmouseleave" (after 11 years of web development I don't think I've ever seen this, maybe because I've never needed it), which is slightly different to onmouseout in that it doesn't fire if hovering over a child element - worked great for my menu's. Sat back, called myself a genius, had a pint of Coke to celebrate my amazingness, then got back to it and realised I hadn't get tested it in Chrome and Firefox - as soon as I did this the flicker returned, but even worse than before. Did some more research and found loads saying that onmouseleave isn't supported by chrome and firefox - DAMN! So, got to re-writing again, trying to do my own functions to see if the mouse was over a child before hiding, etc. etc. Messed it up completely so reverted to the previous version.
Then the problem hit me. The problem all afternoon with the mouseleave. It appears it is supported in Chrome and Firefox. The problem was me. All these problems caused by something very, very simple, very very stupid, yet very very easy to miss. A rogue apostrophe. In my JQuery I'd put $("'MainMenu_Level1").mouseover - notice the ' before MainMenu. Nicely hidden away with the ". Removed it, now works beautiful in all browsers.
I'm now not sure whether I hate IE more for making out that my code was fine but that it wasn't supported by Chrome etc, or Chrome etc. for being so bleeding pedantic! Or maybe myself for being a tit.
Right, back to work.