Serializing Objects in Javascript

It's worth noting that this post is rather old at this point. I don't use the function listed in this post anymore and haven't for a rather long time. If you are using it and it's working for you, great! But as Ron in the comments sections points out, there are a few issues with regards to strings and special characters. I recommend following the link he posts if your needs merit a very robust version of JSON serialization. I'm leaving this post up though, as I think it's helpful for folks who want to understand the general concept of recursion and serialization.

Recently, in a personal project I'm working on, I came across a need to be able to represent any Javascript object as a string. This isn't a problem since just about every object in Javascript can be represented with JSON (Javascript Object Notation). Every modern browser can parse JSON for you easily enough through eval(..), and Gecko-based browsers even have the ability to reverse the process ("uneval" if you will) and give you back a string representation of an object through a call to .toSource().

If you need this ability in any other browser though, you're gonna have to write it yourself. I needed this ability, so I wrote it (and posted it here for your enjoyment!)

Continue reading Serializing Objects in Javascript

.split(..) broken in IE

I discovered last weekend, something about IE which I had previously never known (probably because I use Firefox/Firebug to write and test most of my Javascript). It turns out that the implementation of .split(..) is broken in IE (for more complex cases). If you stick with the simpler cases when using this function, then you probably won't have ever noticed this. For example, the following works just fine:

var s = 'This-is-a-hyphen-delimited-string';
var split = s.split('-')// returns  ['This', 'is', 'a', 'hyphen', 'delimited', 'string']

The above code will work in just about every browser under the sun, including IE, but of course, it's the simplest case scenario for the .split(..) function. Many programmers will probably be aware that you're not limited to passing in a string; you can also pass in a regular expression, which IE (mostly) supports, but this is where things can start to fall apart on you (in IE anyway).

Read on to learn more.

Continue reading .split(..) broken in IE

Mouseenter and mouseleave events for Firefox (and other non-IE browsers)

Generally I favor Firefox and other W3C browsers over IE, and I think most people know that about me. Still, I like to think that I'm a fair person, and that means giving credit where credit is due. And sometimes, IE deserves credit where other browsers fall short.

Such is the case with two non-standard (but rather convenient) events that IE exposes: mouseenter and mouseleave.

The mouseenter and mouseleave events are similar to the more familiar mouseover/mouseout events, but with one important difference:

The mouseenter and mouseleave events don't bubble.

Now you might think then, that duplicating this effect is just a matter of stopping event propagation in non-IE browsers, but it's actually more complicated than that.

Read on to learn more.

Continue reading Mouseenter and mouseleave events for Firefox (and other non-IE browsers)

Retrieving Elements by Class Name

Everyone is already familiar with document.getElementById(..). Sometimes though, you don't want to (or can't) retrieve an element by its id. What would be nice was if there was some way to "query" for all elements of a certain CSS class name and then return them all in an array. Well there is no such function, but there's not reason we can't write one!

Read on to learn more.

Continue reading Retrieving Elements by Class Name

Converting to Pixels with javascript

A few entries back, I wrote about CSS Computed Style. In that blog entry, I discussed a cross-browser javascript function to retrieve the computed style of a DOM element on the page.

If you need a quick refresher… javascript doesn't allow you to access arbitrary style properties of a DOM element via .style unless you've previously set that property using javascript OR if you've defined the style using an inline style attribute of the DOM element.

This is where CSS Computed Style can really come in handy. By retrieving an element's computed style, you can retrieve style properties just as they were when you defined them in your CSS file (regardless of whether or not you've ever set them in javascript).

But there's a gotcha (isn't there always). If you remember, IE doesn't really support computed style. Instead, IE offers .currentStyle which, while similar, is most definitely NOT the same thing.

Perhaps the most inconvenient shortcoming of .currentStyle is the fact that it fails to normalize all units to pixels, as the W3C recommends.

In this blog entry, I'm going to explain how to write a function that will convert these non-pixel values to pixels for you.

Read on to learn more.

Continue reading Converting to Pixels with javascript

CSS Computed Style

Programmers who are new to javascript are often delighted to discover that it's remarkably easy to modify the style of some existing DOM element, like so:


var myDiv = document.getElementById('myDiv');
myDiv.style.left = '10em';
myDiv.style.backgroundColor = '#369';

The above code snippet will grab a reference to the element on the page whose id is myDiv, and modify that element's .left css property to '10em' and its .backgroundColor css property to '#369'. Nothing earth-shattering here.

Conversely, javascript programmers are often dismayed that the following may or may not work:


var myDiv = document.getElementById('myDiv');
myDiv.style.top = parseInt(myDiv.style.top) + 100 + 'px';

Notice that I said may or may not work. In what cases will it work and it what cases won't it work? Glad you asked (because the answer is easy). Read on to learn more.

Continue reading CSS Computed Style

setTimeout Revisited

In my last article, I talked about the problem of passing object parameters to a setTimeout(..) function and how that problem can be solved by using closures. While that method works, I failed to mention that there is an alternative approach if you happen to have the luxury of developing only for the Netscape/Mozilla model (lucky you).

Now, before you stop reading because you think a technique that only works in Mozilla doesn't have much value, let me say that after I explain this technique, I'm going to explore a way to duplicate the technique in IE.

But first things first. Let's explore what setTimeout syntax Mozilla offers us to handle this problem.

Continue reading setTimeout Revisited

On Demand Javascript Loading (with XMLHttp)

Some permalinks on this blog have recently changed. Are you sure you weren't looking for Converting to Pixels with Javscript?

Generally, when you want to link a javascript file in one of your HTML pages, you would do something like the following:


<script type = "text/javascript" src = "./myfile.js"></script>

This is fine in many cases, but what happens if you want to give your users the ability to customize the web page? Suppose you want your users to be able to add widgets and the logic for each of those widgets is cleanly separated into individual files? One option might be to simply include every javascript widget file that the user might want to invoke. But that's going to increase page bloat when (in many cases) it isn't necessary. Wouldn't it be better if we waited until the user requested a widget and then dynamically loaded the necessary javascript to create that widget?

Through some innovative use of XMLHttp, we can achieve exactly this. Read on to find out how.

Continue reading On Demand Javascript Loading (with XMLHttp)