0

I am trying to create a Table of Contents on my SharePoint page and I was successful in css but it is enclosed in a content editor and after I add it it looks fine but doesn't add the links so that I can go to that section of the page and it also numbers things outside of the content editor, so instead I wanted to use javascript to accomplish this.

here is my css which works in styling correctly:

<style>
table.TOC {
border: 3px solid black;
}
#wikiTOC {
  width: initial; 
  font-weight: bold;
}
.TOCheader {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
.TOC_H2 {font-size:20px; font-weight: normal; margin-left: 10px; padding: 10px;}
.TOC_H3 {font-size:16px; font-weight: normal; margin-left: 30px; padding: 10px;}
.TOC_H4 {font-size:12px; font-weight: normal; margin-left: 50px; padding: 10px;}
</style>

And here is the javascript that is not working correctly:

<script type="text/javascript">
$(document).ready(function(){
    var L2, L3, L4;
    $("h2, h3, h4").each(function(i){
      theLevel = $(this).prop("tagName");
      theClass = $(this).prop("className");
      if(theClass != "ms-webpart-titleText"){ 
      if (theLevel=="h2") {
         L2 = L2 + 1;
         L3 = 0;
         L4 = 0;
         theLevelString = "" + L2;
      }else if (theLevel=="h3") {
         L3 = L3 + 1;
         L4 = 0;
         theLevelString = "" + L2 + "." + L3;
      }else {
         L4 = L4 + 1;
         theLevelString = "" + L2 + "." + L3+ "." +L4;
      }
     $(this).attr("id", "heading_" + i);
     $("#TOC").append("<a href = '#heading_" + i + "' title='" + theLevel + "' class = 'TOC_" + theLevel + "'font-size: 2.0;>" + $(this).text() + "</a><br />");
     }
});
});
showTOC();
</script>

If anyone has an alternative way to accomplish this, that would be extremely helpful.

Thanks

1

I did this for a wiki. I added a new page layout instead of using a content editor, but the process should be quite similar. This will pick up any h1 - h4 header located on the page and include it in the TOC. It will add a hyperlink to the item in the TOC so you can navigate to that section directly.

  1. Place the <div> where you want the table to be.

    <!-- Table of Contents -->
    <div id="wiki-index">
             <div class="toc">Table of Contents</div>
    </div>
    <!-- Table of Contents -->
    
  2. Under the <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> use a script to find the 'h' tags that you want to be included in the table

    <script language="javascript" type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".ms-rtestate-field h1, .ms-rtestate-field h2, .ms-rtestate-field h3, .ms-rtestate-field h4").each(function(i){
    $(this).attr("id", "title" + i);
    if ( $(this).is("h1")) {
    $(this).attr("class", "toch1");
    }    
    if ( $(this).is("h2")) {
    $(this).attr("class", "toch2");
    }
    if ( $(this).is("h3")) {
    $(this).attr("class", "toch3");
    }
    if ( $(this).is("h4")) {
    $(this).attr("class", "toch4");
    }    
    $("#wiki-index").append("<a href='#title" + i + "' title='" + $(this).attr("class") + "'>" + $(this).text() + "</a><br />");
    })   
    }); 
    </script>
    
  3. Under the script add in the style you want to use for the table. This is what I used before

    <style>
    #wiki-index{
    width: 250px;
    border: 1px black dashed;
    background-color: whitesmoke;
    float: right; 
    margin-top: 37px; 
    margin-left: 10px;
    padding: 10px;
    padding-top: 0px;
    }
    #wiki-index .toc{
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    padding: 5px;
    padding-left: 0px;
    }
    #wiki-index a[title=toch2] {
    font-size:15px; 
    font-weight: bold;
    } 
    #wiki-index a[title=toch2] {
    font-size:12px; 
    font-weight: bold; 
    margin-left:5px;
    } 
    #wiki-index a[title=toch3] {
    font-size:11px; 
    font-weight: normal; 
    margin-left: 15px;
    } 
    #wiki-index a[title=toch4] {
    font-size:10px; 
    font-weight: normal; 
    margin-left: 25px;
    } 
    </style>
    
0

You cannot add javascript directly to a content editor. You can add javascript to a content editor by uploading a text file to somewhere on the sharepoint site and then referring to it in the web part settings. Assuming your issue is the javascript being removed from your content editor.

If you are using SP2013 you can also use a script editor web part to accomplish this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.