Voor een blog waar ik pas mee begonnen ben werd ik helemaal tureluurs om altijd netjes de index te maken. Links invoegen, anchors invoegen en hopen dat alles in één keer goed staat.
Nu heb ik dit probleem opgelost met het volgende javascriptje op basis van, hoe kan het ook anders: mootools!
Wanneer je een tekst hebt met verschillende subkoppen maak ik er altijd (wanneer de pagina erg lang wordt) een index boven zodat mensen snel naar het anchor kunnen springen. Dit scriptje maakt deze index zelf zonder alle links an anchors handmatig in te moeten vullen.
@wes: wat bedoel je met 'scroll gewoon zichtbaar'? daar heb ik toch ook niet aan willen zitten?
<h2>Titel 1</h2>
<p>Hier een hele hoop tekst</a>
<h2>Titel 2</h2>
<p>Hier een hele hoop tekst</p>
<h2>Titel 3</h2>
<p>Hier een hele hoop tekst</p>
<h2>Titel 4</h2>
<p>Hier een hele hoop tekst</p>
Hier kan ik door middel van dit scripje het volgende van maken:
<div id="index_list">
<a name="index" id="index">
<ol>
<li><a href="index.php#Titel 1">Titel 1</a></li>
<li><a href="index.php#Titel 2">Titel 2</a></li>
<li><a href="index.php#Titel 3">Titel 3</a></li>
<li><a href="index.php#Titel 4">Titel 4</a></li>
</ol>
</index_list>
<a name="Titel 1" id="Titel 1">
<a href="index.php#index"><h2>Titel 1</h2></a>
<p>Hier een hele hoop tekst</p>
<a name="Titel 2" id="Titel 2">
<a href="index.php#index"><h2>Titel 2</h2></a>
<p>Hier een hele hoop tekst</p>
<a name="Titel 3" id="Titel 3">
<a href="index.php#index"><h2>Titel 3</h2></a>
<p>Hier een hele hoop tekst</p>
<a name="Titel 4" id="Titel 4">
<a href="index.php#index"><h2>Titel 4</h2></a>
<p>Hier een hele hoop tekst</p>
Kunnen jullie er nu wijzer uit worden? ;)
om het misschien duidelijker te maken: index lees: inhoudsopgave...
@wes: Waarom? Dit valt voor de gebruiker toch bijna niet op?
Ik ben nog bezig met een ignore functie. Op die manier kan je dus sommige h2 elementen NIET in de inhoudsopgave laten weergeven. Ik laat jullie weten wanneer ik het netjes in een wordpress plugin heb gegoten!
