Preventing Title Widows Revisited

The first time I tried to use Chris’ snippet, I tried to apply it to all my Joomla titles in a template I was building, not realizing that there are a few conditions that render the script ineffective.

My original selector looked something like this:

1
$("h1, h2, h3, h4, h5, h6, .contentheading, .componentheading").each(function...

And here is what I noticed afterwards:

  1. If the title contains only one word, it actually disappears,
  2. More often than not, you will have nested tags in your titles and they would get lost when the script runs

So to fix both issues, we just have to account for those possibilities:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("h1, h2, h3, h4, h5, h6, .contentheading, .componentheading").each(function() {
    if($(this).has('a')) {
        var wordArray = $('a', this).text().split(" ");
        if(wordArray.length > 1) {
            wordArray[wordArray.length-2] += " " + wordArray[wordArray.length-1];
            wordArray.pop();
            $('a', this).html(wordArray.join(" "));
        }
    } else {
        var wordArray = $(this).text().split(" ");
        if(wordArray.length > 1) {
            wordArray[wordArray.length-2] += " " + wordArray[wordArray.length-1];
            wordArray.pop();
            $(this).html(wordArray.join(" "));
        }
    }
});

Note that the same can be true for small, strong, em, and other tags, etc. The point is just to be careful.

Here’s Chris’ original article on preventing title widows just for reference.

break

Current (First!) Poll

Which of the following do you think will have a greater impact on your final decision of hiring a particular web designer? (Pick two)

View Results

Website Designed & Developed by Rodrigo Flores © 2010