JSing

Just been doing some js work recently, so thought I'd post a few notes here for possible future reference.

The first was that I had a div that was meant to be displayed when another element was hovered over. I was doing this using mouseenter and mouseleave events. But in Safari 5.1.4 (only version I have to test on - I think it's equivalent to an old iPhone browser), this wasn't working. Inspecting the element the event was attached to, I could see the event handler had been attached correctly. But the mouseenter and mouseleave events seemed to just not be fired - the handler would not be called.

After some searching I found this question: How to emulate mouseenter and mouseleave DOM events for old browsers?, which says Unfortunately, there is a lot of browsers the wont recognize those new events... ...Safari 5.1. The solution in my case was to switch to using a combination of CSS :hover (to display the element) and mouseover (to position the element). I had to refactor my code slightly so that the element to be displayed came straight after the element that when hovered causes it be displayed. That way I could do .elThatIsHovered:hover + .elToDisplay { display: block; }.

Another thing I have been doing is refactoring some js to make it more OO. Some useful guidance on this is:

• Private Members in JavaScript
• Static self member in javascript
• Private Static Members in Javascript
• Analyzing JavaScript Class Patterns Performance

The other thing I did was implementing geo lookup based on the user's language preference set in their browser. Because the language will be something like 'en-gb', you can parse the last two chars to get the user's country. Assuming, of course, that their browser has their language set correctly. Chrome, Safari, IE, and FF all seemed to be set correctly on my PC without me having to do anything. How to get the user's preferred language is detailed here: JavaScript for detecting browser language preference.