Today I was trying to change how the Table of Contents drop down menu worked in MindTouch Core.
The drop down menu is dynamically created as a list of headers on the page. For example if your page has an h1 header of Hello and an h2 header of You, the drop down menu would be.
1. Hello
1.1 You
As you see above, “Hello” and “You” are both links to their respective header on the page.
This is great for wiki's, but for the intranet site I am working on, we are using the headers manly for design this could be a problem. For example, it is not uncommon to have an h2 of “Hello” and an h5 of “You” because the odd numbered headers I have styled with a yellow background, but I still want it to appear under the h2 in the Table of Contents.
So in the above example the TOC will display like this.
1. Hello <--h2
1.1.1 You <--h5
This is confusing for my users so I wanted this.
Hello
You
Notice that it is still a list, but there is no number structure.
I looked at the markup via Firebug (in Firefox) and found that this should be easy. The numbers I wanted to remove where in a span. (i.e. <span>1.1</span> and the span was in a <li> inside of div with a class of pageToc.
Figuring this would be easy, I just added this to CSS.
.pageToc li {
display: none;
}
After adding this to the CSS it worked GREAT in Firefox, but not so well in IE 7/8. The numbers were gone, but there was still a big space where the span used to be. At first I thought that the span just some how wasn't going away, so I tried all sorts of CSS with NO luck.
Above is the TOC without the numbers viewed in Firefox
Above is the TOC without the numbers viewed in IE7/8
After a lot of frustration I actually looked at the source and noticed that the markup had a space before the anchor links (i.e. Hello and You) I am not sure why MindTouch did this and it might just be a bug or something they overlooked.
I had to look at the source because I could not tell viewing the markup via Firebug (in Firefox) that the spaces were there.
However when I viewed the webpage with Internet Explorer’s Developer Toolbar and I could see them a little better. As you can see below you can see the Text – Empty Text Node. The problem with Developer Toolbar is that it doesn’t display closing tags, so I didn’t catch this right away.
After all that troubleshooting I was happy to know at least what the issue was. Now I just need to add some jQuery to remove those blank spaces. Below is the jQuery I have come up on page load.
$(document).ready(function(){
// Used to replace the spaces in the TOC menu before the anchor links
$(".pageToc li").each ( function ( i , val )
{
$(val).html($(val).html().replace(/\s<a/ig, "<a"));
});
});
I had to use Regular Expression to replace only in front of the anchor. I created another post to go a little further into JavaScript's Regex Syntax.
After I added this jQuerry script all was good and now I had the following TOC display.
I know this isn’t a common thing to do, but it works well for my customer’s intranet site, and the way they use the headers in content more as display elements than hierarchy elements.
I hope this helps anyone in the same boat.