jQuery DOM Manipulation Before Document Ready

By Cody

I frequently come across the problem when coding certain aspects of a website, that some code can get repetitive. Not only does the repititous code bulk up the file, it gets extremely annoying to write or copy and paste.

A typical solution would be to use some sort of JavaScript to manipulate the DOM after it loads and alter as necessary. For example, say you have a pod (as on the left side of this page With an updated design, I have yet to incorporate this back into the site), that can vary in size but needs to expand depending on its content. A solution would be:

<div class='pod'>
 <div class='pod-top'></div>
 <div class='pod-mid'> ...Your Content... </div>
 <div class='pod-bot'></div>
</div>

So, for all intents and purposes, this isn’t much of a problem. But, say you wanted to make the HTML more simple. Wouldn’t it be nice to simply be able to use:

<div class='pod'>...Your Content...</div>

every time you wanted to create a new pod?

Of course it would be. So, what next? Well, we can use some JavaScript, say, jQuery.

$(document).ready(function(){
  $(".pod").each(function(){
    $(this).wrap("<div class='side-pod'></div>");
    $(this).before("<div class='side-pod-top'></div>");
    $(this).after("<div class='side-pod-bot'></div>");
    $(this).wrap("<div class='side-pod-mid'></div>");
  });
});

Now this poses another issue. The loading of the page will seem quite choppy, since the DOM needs to finish loading before the Nodes can be accessed by jQuery via the $().ready() method. Of course we can pull the manipulation outside of $().ready(), but unless this occurs after particular node, the code will would be rendered useless. And even if the JavaScript is at the end of the document, before </body>, we’ll still run into a choppy load.

In an attempt to accomplish a seemless load experience while minimizing the required code, I began to explore a plugin option for jQuery. What I’ve come up with, is the jQuery DOM Listener Plugin. It works the same as any other plugin, $(document).listen(".pod",{success:makePod}) where “makePod” would be a standard JavaScript function to perform the manipulation as shown above. If you look at the jQuery DOM Listener page, you’ll notice that top pod will load significantly faster than the second. This is because I have the listener waiting for the first pod to load, and then manipulate it as necessary, while the second is being changed within the $(document).ready();

Basically, the plugin attaches a timeout that continues until one of following conditions are met:

1. Search Limit Exceeded
2. DOM is Ready. (In this case, the search is passed off to the find() method and the timer is cleared)

It is possible to ignore both of these cases, and have the listener run continously, which is turned off by default. The timer relies on two things: tolerance(delay) and search limit. Together they will equal the total number of milli-seconds to listen for (ie- a tolerance of 50 and limit of 100 would listen for 5000ms or 5 seconds, after that it will clear the timeout).

I have yet to fine tune the default settings, but in any case, they can be over-ridden to fit your particular need. (Documentation to come soon).

View the jQuery Listener example page for a demonstration of benefit of using the listener function.

Any thoughts on the plugin, please let me know.