Break it up

| Javascript | 5 Comments

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.

5 Comments

Thanks a bunch for making this script available. I'd been experiencing the same problem with my divs expanding and shifting to the left due to blogsnob ads. So you can imagine how I was feeling when I found your script!

Happy to help out in the big bad world of internet in any small way possible. Glad it worked!

Great script... but how can I get it to work so I don't have to give a different ID to every div on the page where I use the script?

By definition, every ID has to be unique. However, a possible workaround might be to define a class to be used for every div, for example <div id="div_id">...</div>. Then by using var objs = document.getElementsByTagName('div') you could scan through the returned array and check if objs[i].class == 'div_id'. This might be a bit more convoluted than my original script, but I think it should work for you.

Ummm... I dont know hardly any javascript so although I can see what you mean, I have no idea how to change it so that it does that. What exacttly would I have to change to the script?

(BTW: I need this as I'm making a phpBB template skin: http://www.plastikaa.com/p_demo/index.php?s=2 what this will be used for is to ensure that the peoples usernames dont mess up the layout of the skin.

Also would you mind me using this script as part of the code for the tempalte skin that I finally release? ... of course if you say yes I will place in the html source that the code is your work and also a note in the read me file aswell.

Leave a comment

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png
  • winter-is-coming.png
  • donald-trump.png
  • Rex-indian-headdress.png
  • Liam-future-famous-golfer-2016-10.jpg
  • number-one.png
  • Mom-and-me-2016.png
  • 636101580191153661-Kiffen-0003675-02.jpg
  • the-haskell-road-ro-logic.png

Recent Comments

  • Break it up: Ummm... I dont know hardly any javascript so altho ...
    - plastikaa
  • Break it up: By definition, every ID has to be unique. However, ...
    - Kiffin
  • Break it up: Great script... but how can I get it to work so I ...
    - plastikaa
  • Break it up: Happy to help out in the big bad world of internet ...
    - Kiffin
  • Break it up: Thanks a bunch for making this script available. I ...
    - rei

Golf Handicap

Information

This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2279 entries and as many as 1881 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

First met Thea in Balestrand, Norway 6-14-1980 ago.