Aufgabe

Erstellt für Themen mit mehr als 4 Überschriften automatisch ein Inhaltsverzeichnis (anhand der h Tags h1 h2 h3 ...)

For more information visit: 

dougneiner.com

ist in den Beispieltemplates bereits integriert.

HTML Quellcode

<head>

     <!-- toc add Table of Contents for Articles having more then 3 headers; needs jquery-->
    <?php if ($start!=1 and substr_count($text, '<h')>3) {?>
        <script src="<?php echo $firstparturl;?>plugins/toc/jquery.tableofcontents.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function(){$("#toc").tableOfContents( $("#toccontent"),// Scoped to div#wrapper
              { startLevel: 1,    // H1 and up
            depth:      4,    // H1 through H3,
            topLinks:   true, // Add "Top" Links to Each Header
              });});
        <!-- smooth scroll:-->
            $(document).ready(function(){$('a[href^="#"]').on('click',function (e) {e.preventDefault();var target = this.hash,$target = $(target);$('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing', function () {window.location.hash = target;});});});
        </script>
    <?php }?>                    
<!-- ..toc -->

</head>

 

<body id="toc-top">

 

<?php     //$text write the content  add toc if there are more then 3 headers:
                        if (substr_count($text, '<h')>3 and $start!=1) echo "<h4>$lang_txt_022</h4><ol id=\"toc\"></ol><div id=\"toccontent\"><div style=\"clear:left;\"></div>$text</div>";else echo $text;?>

</body>

 

CSS

/*TOC Table of Contents CSS:*/
    h1, h2, h3, h4, h5 { position: relative;}
    a.toc-top-link     {position: absolute;width: 15px;padding: 4px;margin-left:10px;background:#fff;border-bottom:1px #999 solid;border-right:1px #ddd solid;top: 0;font-size: 7pt;text-align: center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
    #toc         {margin-top:0px;margin-bottom:30px;padding:7px;padding-left: 30px;margin-left:10px;background:#eee;width:300px;float:left;-moz-box-shadow: 1px 3px 2px 3px #ccc;-webkit-box-shadow: 1px 3px 2px 3px #ccc;box-shadow: 1px 3px 2px 3px #ccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
    ol         { list-style: upper-alpha;}
    ol ol         { list-style: decimal;}
    ol ol ol     { list-style: lower-roman;}
    ol ol ol ol     { list-style: lower-alpha;}