Tag Archives: javascript

HTML "name" attribute, Firefox misbehaves

It's been a long time since I wrote something about web-dev, that's because I code less web-stuff recently 🙂

"id" vs. "name" attributes

so far, I thought that "id" should be used for unique IDs, and "name" can be used for non-unique names, i.e. multiple HTML tags with the same name. I've been using document.getElementsByName(str) to get an array of elements with the same name.

Today I've figured out that it's only partially legal: the name attribute can be used only for specific elements (such as INPUT), but cannot be used on many elements (such as DIV). For some reason, Firefox accepts the name tag for any HTML element, while IE follows HTML 4.01 and doesn't accept name tags for "illegal" HTML tags.

Proof of concept

The next piece of JS/HTML code, gives different results on both browsers:

<div name="foo">bla</div>
<script type="text/javascript">
alert(document.getElementsByName("foo").length)
</script>

Results:

  • Firefox 3: 1
  • IE 7: 0

Here is a nice explanation with a full list of "name"-allowed HTML tags.

'onmouseout' event of a container div

Today I wanted to catch a 'mouse-out' event in a div. Every time the mouse leaves the div, I want to call a function So.. there's the onmouseout event which, at first sight, does exactly what I needed.

<div id="parent" style="height: 500px; width: 500px;" onmouseout="alert('out!');">
<table id="child"><tr><td>child text</td></tr>
</div>

HOWEVER - if the div contains child elements (it usually does.. like above example), when mouse moves from the "bare naked" div directly to its child element, an 'onmouseout' event is called from the div, while the mouse is still inside the borders of the div. And the worst news is that it's not a bug! 🙂

So straight to the sad solution: onmouseleave event does exactly what I needed, but isn't standard and is IE-only (same goes for onmouseenter). As Rick summed it in the post which solved my issue today: "Bummer."

So bummer, but the good thing is that among the reads, I've found this must-read article which talks about the order browsers handle the events, and how to deal with it.

Time zones – how to do it right

After some struggling with how the Daylight Saving Time change affected my code, I realized that one shouldn't mess with the time zone offsets on his own (i.e. Add or Subtract hours manually from the UTC time), because underlying libs already implement it - and probably better (yes, including DST changes, works flawlessly!). Here are the new simple rules I set to myself:

  • Absolute time: Store dates only relative to UTC (usually [milli]seconds since Unix epoch or another reference date. The familiar Timestamps are measured as UTC and not as Local Time!
  • Absolute-to-Local: When local date matters, convert UTC-to-local (and vice versa) using the already-existing methods:
  • Absolute-to-somewhere-on-the-globe: instead of the OS-defined local time zone settings, PHP seems to have a way, but for JavaScript I haven't found anything unfortunately.

Bottom line: stick to UTC as much as you can, it's good for you.

Trivia line: Morocco is GMT+0 and has no Daylight Saving Time (so it's identical to UTC). Good for them, eh?

Ajax Parallelism

I've been asked to run few ajax requests in parallel.
Apparently the "A" in ajax stands for "Asynchronous", so each HTTP request made is non-blocking and unlimited HTTP requests should be made in parallel.

However, the browser limits the number of connections to a specific HTTP server. This is not a bad browser design: it's according to HTTP 1.1.

This can be tweaked (and thus breaking HTTP 1.1 compatibility):

FF: about:config -> network.http.max-persistent-connections-per-server

MSIE: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\MaxConnectionsPerServer (create it even if it doesn't exist, DWORD value)

Refs: http://support.microsoft.com/kb/183110