The Coding Paparazzi

In parts 1 and 2 of this article on the sub-subMenus for Blogger with Artisteer (see "Sub-SubMenu for Blogger with Artisteer, part 1" and « Sub-SubMenu for Blogger with Artisteer, part 2 ») , we have seen how to extend the number of levels of sub menu items for the models ( "templates") created by Artisteer (version 2.3) for Blogger.  In this part 3, we will improve the visual appearance of these menus by adjusting their width ( "width ") to the size of the option titles they contain.  Note that even if you do not want to use multiple levels of submenus and stay in one, this visual adaptation may still be interesting for you.  It may also be for other users Artisteer using other types of template for Blogger, especially pure HTML templates.  Such alterations will also itself the subject of a future article in order 'clarify its use.

Without any further waiting, here's the new replacement code for the function artDisplayTopMenu below:

// New version for artDisplayTopMenu(); allowing for second and third sub-menu levels.
// First level: option name must begin with a '-'
// Second level: begin with a '-+'
// Third level: begin with a '-+='

// Not HTML escaped so // <![CDATA[ ... // ]]> must be used:
// <![CDATA[

function artDisplayTopMenu (menuitems)
{
    ComputeWidth (menuitems);

    var i = 0;
    var subList = false;
    var subList2 = false;
    var subList3 = false;

    for (i = 0; i < menuitems.length; i++) {
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
      
      var sstyle = '';

      if (item.length >= 3)
         sstyle = item[2];

      if ( ((itemname.indexOf("=") == 2) && !subList3)
        || ((itemname.indexOf("+") == 1) && !subList2)
        || ( (itemname.indexOf("-") == 0) && !subList) ) {
          document.write('<ul>');

      } else if ( ((itemname.indexOf("=") != 2) && subList3)
	|| ((itemname.indexOf("+") != 1) && subList2)
                || ((itemname.indexOf("-") != 0) && subList) ) {

        if ( (itemname.indexOf("=") != 2) && subList3) {
          document.write("</li></ul>");
          subList3 = false;
        }

        if ( (itemname.indexOf("+") != 1) && subList2) {
          document.write("</li></ul>");
          subList2 = false;
        }

        if ( (itemname.indexOf("-") != 0) && subList) {
          document.write("</li></ul>");
          subList = false;
        }

        document.write("</li>");

      } else if (i != 0) {
        document.write("</li>");
      }
      
      document.write("<li>");

      if (itemname.indexOf("-") != 0) {
        if (window.location == itemlink) {
          document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else if(itemlink == "http://./") {
          document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else {
          document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        }

      } else {

        if (itemname.indexOf("=") == 2) {
          document.write('<a href="'+itemlink+'" style="'+sstyle+'">'+itemname.substr(3,itemname.length)+'</a>'); 
          subList = true;
          subList2 = true;
          subList3 = true;

        } else if (itemname.indexOf("+") == 1) {
          document.write('<a href="'+itemlink+'" style="'+sstyle+'">'+itemname.substr(2,itemname.length)+'</a>');
          subList = true;
          subList2 = true;

        } else {
          document.write('<a href="'+itemlink+'" style="'+sstyle+'">'+itemname.substr(1,itemname.length)+'</a>');
          subList = true;
        }
      }

      if (i == (menuitems.length-1)) {
        if (subList3)
          document.write("</li></ul>");
           
        if (subList2)
          document.write("</li></ul>");

        if (subList)
          document.write("</li></ul>");

        document.write("</li>");
      }
    }
}

function ComputeWidth (menuitems)
{
    // L'élément span 'ruler' doit être formaté exactement (fonte, grosseur, style (italique, caractères gras, etc.) comme les liens
    // dans vos sous-menus et vous le mettez quelque part dans votre modèle Blogger mais avant le menu.  Vous pouvez le mettre
    // visible pendant l'étape de développement pour vous assurez qu'il a le bon formatage exact.

    // The span element 'ruler' must be formated exactly (Font, Size, Style (italic, bold, etc.) as the links in your submenus and it must
    // be put somewhere in your template but before the menu.  While developing, you can make it visible to verify that it has the correct format.

    // Example: <span id="ruler" style="visibility:hidden; font-family: 'Times New Roman', Georgia, Times, Serif; font-size: 14px; font-weight: bold; letter-spacing: 1px; "></span>

    var rulerSpan = document.getElementById ('ruler');

    // If the 'ruler' <span> element is not found, we are creating a new one here but it will have the wrong formating if you don't modify
    // the following code to your exact requirement.  You can drop this but then, the default width of the submenus will be used.

    if (! rulerSpan) {
      var s = document.createElement ('span');

      // Two different ways to define the style of the element.  Don't forget that the case (lowercase and upercase) is important.
      if (true) {
        s.style.visibility = 'hidden';
        s.style.fontFamily = "'Times New Roman', Georgia, Times, Serif";
        s.style.fontSize="14px";
        s.style.fontWeight="bold";
        s.style.letterSpacing="1px";
        s.style.position = "absolute";
        s.style.top = 0;
        s.style.left = 0;
      } else {
        // Two different ways of using a string to define all the style properties.
        var sstyle = "visibility:hidden; font-family: 'Times New Roman', Georgia, Times, Serif; font-size: 14px; font-weight: bold; letter-spacing: 1px; position: absolute; top: 0px; left: 0px;";
        s.setAttribute("style", sstyle);  // Firefox only.
        s.style.cssText = sstyle;         // Firefox & IE.
      } 

      // Two different places on where to insert the new 'span' element into the DOM (Document Object Model) of the page.
      if (true) {
        // Trying to make an appendChild(s) on the 'body' will be an error because this will try to add it at the end
        // of the current list of child but there are some open tags at this point.    
        // document.body.appendChild (s);  // Error to try this!
        document.body.insertBefore(s, document.body.firstChild);
      } else {
        var b = document.getElementById ('LinkList99');
        b.insertBefore(s, b.firstChild);
      }

      rulerSpan = s;
    }

    // Main line of the menu.  We always start from this main line, so there is no need to look
    // if the current itemname has any sub-level tag ("-", ...) at its beginning at this level.
    var i;
    for (i = 1; i < menuitems.length; ) {
      var item = menuitems [i];
      var itemname = item[0];

      if (itemname.indexOf("-") != 0) {
        i++;
      } else {
        // A sub-level has been found; we go down computing it's length and the length of any sub-sub-level that it might contains.
        i = ComputeWidth2 (menuitems, i, rulerSpan);
      }
    }
}

function ComputeWidth2 (menuitems, k, rulerSpan)
{
    var i, j, g, g2, l2;
    var item, itemname;
    var maxLen = 0;

    // Scan the array from position k to find all elements at the same level and their maximum length.
    // If an element from a down level is found, the function is called recursively; if an element from an upper
    // level is found, this mark the end of the current group; the maxLen is written to all of the groups elements
    // and the function return with the index of the first element after the end of the current group.

    for (i = k; i < menuitems.length; ) {
      item = menuitems [i];
      itemname = item[0];

      if (itemname.indexOf("=") == 2)
        g2 = 2;  // Third level of submenu.
      else if (itemname.indexOf("+") == 1)
        g2 = 1;  // Second level
      else if (itemname.indexOf("-") == 0)
        g2 = 0;  // First level
      else
        g2 = -1;  // No submenu: back to the main line.

      if (i == k)
        g = g2;  // Starting point for the group.

      if (g == g2) {
        if (rulerSpan) {
          rulerSpan.innerHTML = itemname.substr (g+1, itemname.length);
          l2 = rulerSpan.offsetWidth;
       } else
          l2 = 0;

        if (l2 > maxLen)
           maxLen = l2;

        i++;

      } else if (g2 > g) {
        // Another sub-level found; we go down and came back with the index of the next element after that sub-group.
        i = ComputeWidth2 (menuitems, i, rulerSpan);

      } else {
        // An upper level element has been found, it's time to finish this group and go back.
        break;
      }
    }

    // If the ruler has not been found, we keep the default length as specified in the Artisteer template.
    if (maxLen != 0) {
      // Adjust the following value of 28px to take into account the margin around the links of your submenus.
      // Ajustez ici la valeur de 28px pour tenir compte des marges entourant les liens de vos sous-menus.
      var swidth = 'width:' + (maxLen + 28) + 'px;';

      // At this point, "i" is the index of the first element after the end of the current group (or the end of the array).
      for (j = k; j < i; j++) {
        item = menuitems [j];
        itemname = item [0];

        // We mark only the elements that are part of the current group and jump over any sub-level element.
        if (itemname.indexOf("=") == 2)
          g2 = 2;
        else if (itemname.indexOf("+") == 1)
          g2 = 1;
        else if (itemname.indexOf("-") == 0)
          g2 = 0;
        else
          g2 = -1;

        // We mark the current element with the maximum width that has been found for the current group.
        if (g == g2)
            item [2] = swidth;
      }
    }

    return i;
}
// ]]>

Obviously, this new version of the function artDisplayTopMenu is compatible with the method that we have already seen in Part 2 for replacing the use of the Blogger's "Configure Link List" with a static list of options supplied in the form of JavaScript code.  All you have to do to use the other method is to rename the function in the code above from artDisplayTopMenu to artDisplayTopMenu2 and insert the new intermediary function artDisplayTopMenu as it has been described int this Part 2.  (Remember that you must also add a bogus argument (dummy) in the dynamic list of Blogger as described in this Part 2.)

If we look more closely at the code provided, we see that this new version of artDisplayTopMenu first includes a call to ComputeWidth:

The role of this function is to (recursively) scan the array menuitems for calculating the required width for each sub-menu and to store at the position [2] of this array this calculated value. This is the width that needs to be written for each link <a href="..."> of each submenu; and it's stored in the format "width: NNpx;" with NN representing the number of pixels required.

Upon the return from this function, the following code will extract this new value for the width that has been calculated and add it to the writing of each HTML link <a href="..."> as a style attribut:

Let us now take a look at this function "ComputeWidth". First, we see that it is divided into two parts: the first initializes some variables and then starts analysing the array "menuitems" for elements that are part of a sub-menu (all other elements are, of course, part of the main menu). When such an item is found - which mean that we are at the beginning of a first level sub-menu -the ComputeWidth2 function is called with the index of this element passed as parameter.  This second function will search for all the other elements belonging to the same sub-menu, will determine the greatest width of text needed to display them all and will then enter this value in the array "menuitems" at the position [2] for each element to be part of this same sub-menu.

"ComputeWidth2" is also the function that will call itself recursively for analysing any sub-level menu that will be encoutered while analysing a first level sub-menu.  When a sub-menu if finished - with all of its sub-level sub-menus as well - the function return with the index of the next element pass the end of the current sub-menu.  The calling function can then resume its analysis of the submenu or of the main menu (if the calling function was ComputeWidth) that it was analysing before encountering a sub-level menu.  The whole hierarchy of the main menu with its submenus and their own submenus is in this way recursively analysed.

As this process is done recursively, you can see that it will be very easy to add additional levels if we wish too.  This is something that we'll see in a forthcoming article; where we'll take a look at some more advanced functionality to add to our menus.

In order to facilitate its comprehension, I've added some more comments to the code provided for these two functions.  Howeer, there are some points that need to be discusssed in much greater details. The first one is the method used to calculate the width in pixels of each option.  For this I use the technique seen in the article "Determining string length in pixels [-JavaScript / Ajax / DHTML answers]"; which use an hidden <span> text element into which each piece of text is written and then its exact length in pixels found by retrieving the offsetWidth property of the <span> element.

To use this method, we must first add an element <span> - with an ID equal to "ruler" - to the template and format it exactly the same way as for the submenus' options.  For doing this properly, we must not forget to add the styling properties that are beeing inherited and, of course, we are only interested int the properties related to the size of text; excluding other properties like its colors. To be sure that you have the correct formatting, you can also choose to display this <span> element instead of keeping it hidden during the development process.  This way, you will quickly notice it if you have made any mistake in its formating.

If this <span> element with an ID of "ruler" is not present in the template or is not found - for example because it has been written later in the HTML code, after the menu section, the function ComputeWidth will create one, format it with a basic style and install it at the beginning of the HTML code (or DOM) of the page.  Therefore, it's not strictly necessary for you to create this <span> element but in this case, you should change the basic style used in the function ComputeWidth so that the basic style will fit your needs:

(In the code provided at the beginning of this article, two different ways for setting this style are shown and obviously, you can choose which one is better suiting your case.)

To be sure that this element will not change in anything the display of the page, its position is declared as of type "absolute" in the style.  This way, its size will have no effect on the display of the HTML elements that follow.  Note that even by using a position of type "absolute", this doesn't mean that you can insert this element anywhere in the HTML page.  When this code for inserting the element of the menu is executing, there are many <div> elements that have been opened but not closed (these elements will be closed only after the last items of the menu have been written).  Inserting a new element at the end of the list at this step means inserting it inside an open <div> element while is it beeing analysed/treated by the browser; something that many won't like.  In the case of IE, most likely you<ll get an javascript error or worse, the page won't display at all as the following figure is showing:

The method used in the provided code insert the element by calling "document.body.insertBefore (s, document.body.firstChild)" and is totally safe because this new element will then be inserted at the very beginning of the DOM's hierarchy, therefore making it impossible to be inserted into an open <div> element.

The second point worth to be mentionned here is the margin required around the menu titles. The method used for calculating the exact length in pixels of each title will ignore the calculation of margin requirements; so this is something that we'll have to add. The code in the function ComputeWidth2 () takes this into account by adding a fixed value of 28 pixels, which matches the style of my menus (with margin of 14 pixels per side) but you can obviously adapt this value to your needs:

Notice that if you add a proper padding to the style (of formating) of the <span> element; you won't have to correct the value for the margin because the value of this padding will be included into the length in pixel of the text element.  However, if you add a margin to the style instead of a padding; its value won't be taken into account for the length in pixel.

You can see the end result of this adjustment function menus on the demo site "Test3 - Sub-SubMenu with Artisteer" :

You can see on this figure that the widths for the sub-menus of level 1, 2 and 3 have all been correctly calculated and if you take a look with either Firefox or IE6, the result is totally correct. However, on IE7 and IE8, there is a big space that appears between the second and third sub-levels (the latter being indicated by the arrow) as it's indicated by the circle in the previous figure.

The display problem with IE7 and IE8 comes from a minor problem in the stylesheet as it is generated by Artisteer and which defines for the left margin of the links <a> elements of the submenus a default value of "auto":

This has the effect of centering more or less the last submenu in its area, as you can see by comparing his position with the position of the previous sub-menu in the figure below, where I have superimposed the two:

The solution is simple: setting the left margin to zero (0) instead of "auto":

Personally, I have no idea why the value of this margin is to "auto" by default instead of being set to 0. This value of "auto" for the margins is usually used for centering an element on the page but in the case of a sub-menu, I see no reason why this value should be variable and left to the discretion of the browser. Having a margin to be variable is probably one the last thing that you want to see in a sub-menu; especially when there are multiple levels involved.

The final result for our menu is shown on the demo site "Test 3.B - Sub-SubMenu with Artisteer":

You can see on this demo that all the sub-menus are now displaying correctly (red arrow), with a correct width and without any unwanted space between them.  This is not only for Firefox and IE6 but for IE7 and IE8 as well. The screenshot above was made with IE7.

This concludes the Part 3 of the article on the sub-menus for Blogger with Artisteer. In Part 4 and 5, we will first see some more advanced techniques to enable us to create (and debug) our menus faster and then in some later parts, we'll take a look on how to add some new exciting features to our menus on Blogger.  We will also take a look on how to use these menus with Artisteer templates other than Blogger.