How'd he do that? Dynamic Anchor Links using CFMX and jTidy
On a recent site I worked on (www.middlesexhospital.org) one of the requirements was to take the body from dynamic content pages and make an unordered list of anchored links pointing to the <h*> heading tags on the page.
Most copywriters today write correctly using headings (and nested headings).(Click on the example image to the left).
<h1 id="Heading-1a">Heading 1a</h1>
<p>Some paragraph text.</p>
<h2 id="Heading-2a">Heading 2a</h2>
<p>Some paragraph text.</p>
<h2 id="Heading-2b">Heading 2b</h2>
<p>Some paragraph text.</p>
<h3 id="Heading-3a">Heading 3a</h3>
<p>Some paragraph text.</p>
<p>Some paragraph text.</p>
<h2 id="Heading-2a">Heading 2a</h2>
<p>Some paragraph text.</p>
<h2 id="Heading-2b">Heading 2b</h2>
<p>Some paragraph text.</p>
<h3 id="Heading-3a">Heading 3a</h3>
<p>Some paragraph text.</p>
Referencing the id attributes for the <h*> heading tags you can now provide anchored bookmark links pointing to them in an unordered list (apply styles as needed).(Click on the example image to the right)
<ul title="Page navigation tree">
<li><a href="#Heading-1a">Heading 1a
<ul>
<li><a href="#Heading-2a">Heading 2a</a></li>
<li><a href="#Heading-2b">Heading 2b</a>
<ul>
<li><a href="#Heading-3a">Heading 3a</a></li>
</ul>
</li>
</ul>
</li>
</ul>
So given the body, how do we create the unordered list dynamically? Also, I don't want to make my users have to know how to set id attributes in <h*> heading tags (especially if they are using a WYSIWYG editor such as FCKEditor or htmlArea to edit their content).
Read more in this tutorial.
