As a Content Management System developer, having a good tree plugin is key to organizing files in directories. With a small number of folders, any jQuery tree plugin will suffice. But, I’ve encountered some limitations with 1000+ folders and Internet Explorer compatibility.

Dynatree is my current favorite jQuery plugin. The code is maintained with very good browser compatibility (IE 8 works without any problems), excellent documentation, and lots of features. Supports checkboxes, drag and drop, persistence, and HTML/JSON/or Javascript data loads. If you have a large number of folders, it is best to use JSON as the data object since you can use AJAX to dynamically load the lists. Even without the “lazy load” option, the script runs fast with a single load of the JSON data.

If you run Internet Explorer 8 and encounter the following error:

“html parsing error unable to modify the parent container element before the child”

or

“Internet Explorer cannot open the Internet site http://<Web site>.com. Operation aborted.”

The error basically means that an element on the page is trying to get modified without being completely loaded. (e.g. deleting or appending to the object). Possible causes are lightbox style or flash messenger transitions that run the following code:

$("body").append

It appears to be specific to Internet Explorer 8 with the way it parses the DOM object.  Here’s a good reference to the problem on MSDN - 

Here’s my simple jQuery image rollover script. I modified it to work with absolute URLs. This works well if you have different servers hosting your image files.

See entire post for the code

There is a known issue with the DivX plugin causing Javascript errors ”tagName is empty or not an object”. This is due to the plugin interfering with existing Javascript on the page. Javascript elements that doesn’t use the tagName element will cause the browser to throw an error that stops any Javascript from running on the page. 

The only real fix is to uninstall the DivX plugin.

References:
http://labs.divx.com/node/16824

I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps called jGrowl.

It displays a floating div with your custom message for 5-10 seconds on the top of the screen and fades out. There are options to change the duration of the message, set the message as a sticky until it is closed by the user, position options, and animation options. It is useful for showing quick informational messages such as “Saving changes”, “Update”, and “Delete”. Two unique features with this plugin are the “sticky feature” and the ability to stack consecutive messages together.

I’ve created a quick tutorial on adding this jQuery plugin to your app.