The Accidental Developer

Users Paste Differently

I’ve been using a relatively generic Javascript textarea counter for several years to restrict the input length on form textareas. I’m not sure where the specific version I’m using came from, but you can find dozens like it on Google.

Almost all of them rely on the onKeyDown and onKeyUp events to trigger the script. However, some users still manage to submit text that exceeded the limits, even though the application required Javascript. I could not for the life of me reproduce this issue…until today.
› Continue reading

Tags: forms, Javascript, textarea

Why Doesn’t TinyMCE load in IE?

looks like it is all due to the insertAdjacentHTML call being used in another library. In my case, wz_tooltip. Oh wow did this hurt me. So that horror of a project that keeps on poking its head up sent in another small request… put tinyMCE or FCKeditor into one page on the website. Offered 5 hours. Well TinyMCE is already installed, so I figured this was a chance to recoup a little of my loss on this project. Sure enough, I activated TinyMCE with about 5 lines of code, checked that it worked in Firefox, and billed my money.

Next morning I get a call. The thing doesn’t work in IE. So I try a few quick and obvious things, move around where it gets loaded, try a few different load orders. No luck. Grr. I was going to type out my whole damn process, but I realized that’s not what people want to read…

Short version is: the wz_tooltip.js library conflicts with the TinyMCE library ONLY in Internet Explorer. This is because of a call to insertAdjacentHTML which is an IE-only javascript call (thanks again for embrace and extend M$). As a workaround, you can modify the wz_tooltip file by commenting out from line 397 (inclusive) (thats: if(wztt_body.insertAdjacentHTML) ) down to line 400 inclusive (thats : else if(typeof wztt_body.innerHTML != wztt_u && document.createElement && wztt_body.appendChild) ) And now I’m off to submit bug reports.

What a waste of a morning.

Tags: internet explorer, Javascript, tinymce

The Javascript Dollar Sign ($) Function

Recently, I’ve been seeing a lot of Javascript functions prefixed with a dollar sign ($) or simply named $. I thought, what sort of magical property does the dollar sign have in Javascript? What sort of esotericism had I uncovered?

I checked the O’Reilly Rhinoceros book, and found that the dollar sign has no special properties.

However, I have come to discover that dollar sign function has become the more-or-less de facto shortcut to document.getElementById(). Let’s face it, we all use document.getElementById() a lot. Not only does it take time to type, but it adds bytes to your code as well.

Here’s the version from prototype.js, which can return more than just a single element:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Because it has become a common shortcut to document.getElementById(), it means that various Javascript libraries should play nicely together: if the dollar sign function in one .js file is overwritten by the same dollar sign function in another .js file, everything should still work. That also means that creating your own dollar sign function that does something different is probably not a good idea.

In case you were wondering, the underscore has no special properties either. But let’s face it, $(‘myVal’) looks more like programming than _(‘myVal’).

Tags: Javascript

Does releasing code to the public inspire extra effort?

About 2 years ago, I created a javascript image/photo gallery to embed gallery functionality into a web site using only client-side processing. Although I created it for a specific purpose, it was generic enough that I decided to make it available for other people to use on their sites.

Imagine my surprise when people took me up on that offer.

› Continue reading

Tags: Best Practices, code reviews, Javascript, open soure