Forum for discussing general topics related to Couch.
2 posts Page 1 of 1
I made a sample automatic list of fields aka Table of Contents. Do you think it is worth further tweaking and styling?

Example gif -

toc.gif
ToC
toc.gif (943.56 KiB) Viewed 1397 times

Example code -

Code: Select all
<cms:config_form_view>
    <cms:field 'toc' no_wrapper='0' order='-1000' label="&nbsp;">
        <script>
        // handle links with @href started with '#' only
        $(document).on('click', 'a[href^="#"]', function(e) {
            // target element id
            var id = $(this).attr('href');

            // target element
            var $id = $(id);
            if ($id.length === 0) {
                return;
            }

            // prevent standard hash navigation (avoid blinking in IE)
            e.preventDefault();

            // top position relative to the document
            var pos = $id.offset().top;

            // animated top scrolling
            $("html, body, #scroll-content").animate({scrollTop: pos}, 400);

        });
        </script>

       <style>
            /* btn Scroll to Top is always visible */
            .ctrl-bot > #top { position:fixed; right:31px; bottom:31px; top:auto; }

            /* ToC is columnized */
            div#toc ul {column-count: auto; column-width: 30ex; max-width:100%;}
        </style>

        <details><summary><b>Table of Contents</b></summary>

            <div id="toc">
                <ul>
                    <cms:db_fields masterpage=k_template_name>
                        <cms:if label>
                            <li><a href="#k_element_<cms:show name />" ><cms:show label /></a></li>
                        </cms:if>
                    </cms:db_fields>
                </ul>
            </div>

        </details>
    </cms:field>

</cms:config_form_view>
Looks cool, Anton :)
Speaking about myself, I'd have not made the TOC collapsible and rather had it shown in its full glory (gory) :)
2 posts Page 1 of 1