links naar anchors: HTML DOM of PHP?

[cPT.cAPSLOCK]

Hallo allemaal, bedankt voor het lezen.

Ik ben op dit moment wat aan het hobbyen, en ik probeer nu het volgende:
Er is een pagina, met een aantal van dit soort koppen:

code:

<div id="content">
    <h1><a name="1">Kop 1</a></h1>
    <p>Blaat</p>
    <h1><a name="2">Kop 2</a></h1>
    <p>Meer geblaat</p>
    ...
</div>

Nu wil ik dat er automatisch links naar al deze kopjes komen.
Hoe zouden jullie die aanpakken?
Serverside via PHP, of clientside HTML DOM?

Met PHP heb ik nog niet eerder text laten pasen, dus het wordt voor mij redelijk ingewikkeld.

Na het lezen over HTML DOM op w3schools lijkt me dat dit een goede aanpak zou kunnen zijn, maar hoe dit precies te werk zou moeten gaan is mij ook nog een raadsel - hun text over HTML DOM is niet echt duidelijk.

Ik vraag niet om een kant en klaar scriptje of wat dan ook, slechts een duwtje in de goede richting

Alvast bedankt!

[Sebazzz]

Bedoel je niet gewoon anchors? http://www.w3.org/TR/html401/struct/links.html
Dat je via #blaat naar het kopje Blaat toespringt?

[Verwijderd]

Ik denk dat hij een inhoudsopgave wil laten maken. name="" is ook niet noodzakelijk eerst.

Je kan met onder andere jquery met bijv. $('#content h1') door alle h1's lopen in #content. Hiermee zou je een inhoudsopgave kunnen maken en een id aan de h1 kunnen geven (of een name attribuut).

Edit: Zie ook http://www.google.com/sea...official&client=firefox-a
en http://code.google.com/p/...iki/TableOfContentsPlugin (onderaan een demo)

[ Voor 29% gewijzigd door Verwijderd op 25-04-2010 17:21 ]

[cPT.cAPSLOCK]

@Sebazz: Hoe je een link naar het kopje maakt weet ik al.
Ik bedoel echter een automatische inhoudsopgave, zoals rutgerlak mijn vraag al interpreteerde. Aan het begin valt alles handmatig nog wel te regelen, maar zodra de site groeit kan dit beter automatisch.

Rutgerlak, Ik zal eens kijken naar jQuery. Het klinkt inderdaad als iets wat ik kan gebruiken.
En als het niet lukt val ik je nog een keer lastig Bedankt!

Edit / Update:
Heel erg bedankt! Het is nu gelukt met behulp van jQuery. Ik zal me er nog eens in verdiepen voor nog wat extra functionaliteit, maar de basis is er nu.

[ Voor 16% gewijzigd door cPT.cAPSLOCK op 25-04-2010 18:02 ]

[RetroTycoon]

En voor diegene die JavaScript niet aan hebben staan dan?

[Sebazzz]

RetroTycoon schreef op zondag 25 april 2010 @ 18:25:
En voor diegene die JavaScript niet aan hebben staan dan?

Die hebben het niet.

Ik kan mij voorstellen dat er voor PHP wel een HTML DOM parser is. Daarmee kan je wel wat. Het resultaat even cachen en het werkt ook voor die mensen + Google.

[cPT.cAPSLOCK]

RetroTycoon schreef op zondag 25 april 2010 @ 18:25:
En voor diegene die JavaScript niet aan hebben staan dan?

Dit is eerder een bonus voor de mensen die JS wel aan hebben, dan een gebrek voor de mensen die JS uit hebben staan.
Het normale menu is namelijk gewoon in xHTML - deze inhoudsopgave die met jQuery gemaakt wordt is slechts voor makelijkere navigatie op elke pagina zelf (minder scrollen).

[Grijze Vos]

Je gebruikt het name attribuut, maar dat moet id zijn. Name gebruik je op form elementen.

[cPT.cAPSLOCK]

Grijze Vos schreef op zondag 25 april 2010 @ 20:49:
Je gebruikt het name attribuut, maar dat moet id zijn. Name gebruik je op form elementen.

Name gebruik je ook bij de <a> tags.

Stel je voor, je typt het volgende ergens in je index.php

code:

<a name="kopje">Blaat</a>

Dan kan je met de onderstaande link direct naar 'Blaat' toe scrollen:

code:

<a href="index.php#blaat>Klik</a>

Dit zie je ook wel veel gebeuren in de stickies hier op GoT.

Bovendien, zoals ik al zei: Ik had het na rutgerlak's advies al aan de praat gekregen.

[Soultaker]

De <a name="foo"></a> constructie is de klassieke manier van werken, maar die is problematisch in combinatie met css omdat ze gestyled worden als andere links, tenzij je er expliciet een andere class aan geeft of iets dergelijks. Je kunt tegenwoordig dus beter id-attributen gebruiken; die mogen op elke tag in principe (dus ook een <h1> of een <p> tag) en hebben hetzelfde effect als een name-attribuut op <a>.

edit:
Ik zie dat GoT wel <a> tags gebruikt, maar dan zonder content, waarschijnlijk om compatibility met oudere browsers te behouden. Tegenwoordig kun je toch ook wel gewoon id-attributen gebruiken lijkt me.

[ Voor 21% gewijzigd door Soultaker op 25-04-2010 22:32 ]

[cPT.cAPSLOCK]

Het is ook zo moeilijk om class="nolink" toe te voegen aan je <a name> tag

Het kan enigszins irritant zijn, maar problematisch is wat overdreven denk ik.

[Grijze Vos]

HTML 4 staat het nog toe zie ik nu. In XHTML is de name tag iig geclassificeerd als deprecated.
Los daarvan, voor javascript is het een stuk handiger om ID's te gebruiken.

[ Voor 28% gewijzigd door Grijze Vos op 25-04-2010 22:46 ]

[crisp]

Grijze Vos schreef op zondag 25 april 2010 @ 22:46:
HTML 4 staat het nog toe zie ik nu. In XHTML is de name tag iig geclassificeerd als deprecated.
Los daarvan, voor javascript is het een stuk handiger om ID's te gebruiken.

In HTML5 is het 'obsolete but conforming': http://www.w3.org/TR/html...e-but-conforming-features

[R4gnax]

cPT.cAPSLOCK schreef op zondag 25 april 2010 @ 22:33:
Het is ook zo moeilijk om class="nolink" toe te voegen aan je <a name> tag

Moeilijk weet ik niet. Wel is nodeloos extra tags met extra attributen toe voegen meer werk dan naar een ID op de al aanwezige tag te verwijzen. Daarnaast vervuilt het ook je markup.

[Verwijderd]

cPT.cAPSLOCK schreef op zondag 25 april 2010 @ 17:23:
@Sebazz: Hoe je een link naar het kopje maakt weet ik al.
Ik bedoel echter een automatische inhoudsopgave, zoals rutgerlak mijn vraag al interpreteerde. Aan het begin valt alles handmatig nog wel te regelen, maar zodra de site groeit kan dit beter automatisch.

Rutgerlak, Ik zal eens kijken naar jQuery. Het klinkt inderdaad als iets wat ik kan gebruiken.
En als het niet lukt val ik je nog een keer lastig Bedankt!

Edit / Update:
Heel erg bedankt! Het is nu gelukt met behulp van jQuery. Ik zal me er nog eens in verdiepen voor nog wat extra functionaliteit, maar de basis is er nu.

jQuery maakt het een hoop makkelijker , maar indien het de enige plek is waar je het gebruikt is het wel een hoop javascript. Ik heb zelf eens de volgende plugin geschreven met hetzelfde doel:

JavaScript:

jQuery.fn.headerSummary = function(destinationSelector, options) {

    settings = jQuery.extend({
        headers : "h1, h2, h3, h4, h5",
        escape : function(text) { return text.replace(" ", "_"); }
    }, options);
    
    destination = jQuery(destinationSelector);
    
    this.find(settings.headers).each(function() {
        headerText = jQuery(this).text();
    
        // Create new links to headers in destination el
        jQuery(destinationSelector).append( jQuery(this).clone().wrapInner("<a href=\"#" + settings.escape( headerText ) + "\"></a>"));
    
        // Wrap existing headers with anchor
        jQuery(this).wrapInner("<a name=\"" + settings.escape( headerText ) + "\"></a>");       
    });
    
    return this;
    
}

Vervolgens hoef je alleen nog maar

JavaScript:

$("je_content").headerSummary("#waar_je_nieuwe_headers_komen")

[moozzuzz]

Ik gebruik een versie gebaseerd op http://quirksmode.org/dom/toc.html en dat werkt erg makkelijk. Geen nood aan name's etc meer :-)

JavaScript:

/*
    setToC( id )
    Creates Table of Contents based on the H2-elements in the content of the page

    id: IDname of the DIV-element where the ToC has to be shown
    
    credits: original and full script from from quirksmode.org/dom/toc.html
*/
function setToC( id ) {
    var ToCholder = document.getElementById( id );

    // array of all h2-nodes (note: searches full document!) // tobeimproved
    var toBeTOCced = document.getElementsByTagName('H2');

    if (toBeTOCced.length>1 && ToCholder) {
        for (var i=0;i<toBeTOCced.length;i++) {
            var tmp = document.createElement('a');

            tmp.innerHTML = toBeTOCced[i].innerText || toBeTOCced[i].textContent; // FF doesn't support innerText
            ToCholder.appendChild(tmp);

            // get ID of the h2 or make one up
            var headerId = toBeTOCced[i].id || 'part' + i;
            tmp.href = document.location.pathname + '#' + headerId;
            tmp.title = toBeTOCced[i].innerText; // document.location.href; //
            toBeTOCced[i].id = headerId;

            // create a to-the-toplink
            var ttt = document.createElement('a');
            ttt.className = 'naarboven';
            ttt.href = document.location.pathname + '#top';
            toBeTOCced[i].appendChild(ttt);
        }
    }
}

[cPT.cAPSLOCK]

Stukken langer dan het scriptje wat ik nu in elkaar geflanst heb:
In de head:

code:

        <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                
                $("#content h1,#content  h2,#content  h3").each(function(i) {
                    var current = $(this);
                    current.attr("id", "title" + i);
    
                    $("#dyn_toc").append("<a class='tocitem' href='#title" + i + "' title='" + current.html() + "'>&raquo; " + current.html() + "</a>");
                });
            });
        </script>

in de body:

code:

<div id="toc">
    <h1>Op deze pagina:</h1>
    <a href="#top" class="tocitem">&raquo; Naar boven</a>
        <div id="dyn_toc">
        </div>
</div>

Met als output:

code:

<div id="toc">
    <h1>Op deze pagina:</h1>
    <a class="tocitem" href="#top">» Naar boven</a>
    <div id="dyn_toc">
        <a title="Lorem" href="#title0" class="tocitem">» Lorem</a>
        <a title="Ipsum" href="#title1" class="tocitem">» Ipsum</a>
    </div>
</div>

Verder heb ik in de css #toc position: fixed; meegegeven, waardoor deze altijd in het bereik van de bezoeker is zonder te scrollen.

[ Voor 5% gewijzigd door cPT.cAPSLOCK op 26-04-2010 17:40 ]