Don't you just hate it when you include some external piece of (javascript) code from another site, and it breaks up the layout of your web page?

This is the problem I've been having with Blogsnob. The kind folks there provide a free service for members of the blogging community, enabling you to increase your blog's exposure via simple text-based ads.

All you have to do is insert the following code somewhere and hope everything works out okay:

<script src="http://blogsnob.idya.net/ad.php?id=n"
  type="text/javascript"></script>

I have placed this at the very bottom of my right-hand margin. This margin is set to a width of around 160 pixels and it is meant to stay that way.

The only problem with inserting this piece of code is that you do not know ahead of time how much text and/or images might be thrown into your site. Now I trust the service for what it is, and most of the time it seems to be working alright. However, sometimes I get really long words containing say 50 characters in a row. This breaks up my layout. In order to accommodate this exceptionally long word, the poor 160 pixel wide margin is expanded so that a much larger vertical bar appears. You see, HTML has no character wrapping, only word wrapping at the white-space borders. My main content area is covered up on the right side and shifted to the left. Bummer, man.

So what's a poor soul like myself going to do? Well, I have chosen to solve this using good old Javascript based on the DOM-interface. Here is what I do. First of all, I bracket the inserted code above like this:

<div id="blogsnob">
<script src="http://blogsnob.idya.net/ad.php?id=n"
  type="text/javascript"></script>
</div>

Note that I have wrapped the ill-behaved section of code with another div-tag and I have labeled it "blogsnob" accordingly.

Then just right after the spot where I have inserted the code above, I add the following function call:

<script language="javascript" type="text/javascript">
<!--
mxw("blogsnob");
//-->
</script>

Alright, so what does this magical function called mxw() really do? Well, it looks within the div-tag that I labeled as "blogsnob", recursively parses through the nodes and child-nodes, and grabs each TEXT-element. If it then finds any words which are longer than a pre-defined maximum length, say 20 characters (mxw_max = 20;), then it will truncate this bugger to this given length. Pretty neat, huh?

Just in case you were curious what this function looks like, and assuming that you not only have a good knowledge of Javascript, but also at least some limited experience with that thing called DOM, then here it is:

<script language="javascript" type="text/javascript">
<!--
// Maximum allowed length of text words.
var mxw_max = 20;
//
// mxw(id)
//
// Wrapper function which checks that certain DOM
// is supported before calling recursive mxw2(). 
//
function mxw(id)
{
  if (!document.getElementById) return;
  var n = document.getElementById(id);
  if (!n || !n.nodeType) return;
  mxw2(n);
}
//
// mxw2(id)
//
// Checks all text of given node and all its
// descendant nodes, truncating each word that
// is longer than allowed length mxw_max. This
// is an extra safety valve preventing unwanted
// overrun, e.g. of sidebars and/or margins.
function mxw2(n)
{
  if (n.nodeType == 3 /*Node.TEXT_NODE*/)
  {
    var flag = 0;
      var words = n.data.split(" ");
    for (var i = 0; i < words.length; i++)
    {
      if (words[i].length > mxw_max)
      {
        flag++;
        words[i] = words[i].substr(0, mxw_max-2) + ". "; 
      }
    }
    if (flag > 0) n.data = words.join(" ");
  }
  var children = n.childNodes;
  for (var i = 0; i < children.length; i++) mxw2(children[i]); 
}
//-->
</script>

Hope you like it and find it useful for your own web pages somewhere. You're welcome.