[JS] IE weigert te jumpen naar generated anchor

[Spider.007]

De volgende Javascript code heb ik gegenereerd. Deze wordt als HTC in mijn CSS geinclude. Deze code werkt perfect in Firefox; IE wil het echter niet doen. Ondanks dat de lijst netjes wordt gegenereerd lijken de headerAnchor's niet te worden gegenereerd. Een gebrek aan debugmogelijkheden in IE (deze bied immers geen JS console) leidt tot een door mij niet op te lossen probleem.

JavaScript:

function generateInPageNavigation(){
    var headers = window.document.getElementsByTagName('h2');
    var navigationDiv = window.document.getElementById('inPageNavigation');

    for (var i=0; i<headers.length; i++ ){
        header = headers[i];

        headerAnchor = window.document.createElement('a');
        headerAnchor.name = 'headerLink' + i;
        header.parentNode.insertBefore(headerAnchor, header.nextSibling);

        navigationLink = window.document.createElement('a');
        navigationLink.href = '#headerLink' + i;
        navigationLink.title = "Jump to '" + header.innerHTML + "'";
        navigationLink.innerHTML = header.innerHTML;
        navigationDiv.appendChild(navigationLink);

        navigationDiv.appendChild(window.document.createElement('br'));
    }
}

Online voorbeeld met HTML code erbij ter referentie:
spider007.net/upload/generateInPageNavigation_example.html

Bovenstaande werkt bij mij dus wel in Firefox; maar niet in IE6. Ideeen / tips?

[Genoil]

Een interne link verwijst niet naar een anchor met een name, maar naar een willekeurig element met een id. Je hoeft alleen je H2's dus maar een id te geven:

code:

        function generateInPageNavigation(){
            var headers = window.document.getElementsByTagName('h2');
            var navigationDiv = window.document.getElementById('inPageNavigation');

            for (var i=0; i<headers.length; i++ ){
                header = headers[i];

                header.id = 'headerLink' + i; // <-- nieuw!
                
                //headerAnchor = window.document.createElement('a');
                //headerAnchor.name = 'headerLink' + i;
                //header.parentNode.insertBefore(headerAnchor, header.nextSibling);

                navigationLink = window.document.createElement('a');
                navigationLink.href = '#headerLink' + i;
                navigationLink.title = "Jump to '" + header.innerHTML + "'";
                navigationLink.innerHTML = header.innerHTML;
                navigationDiv.appendChild(navigationLink);

                navigationDiv.appendChild(window.document.createElement('br'));
            }
        }

[Spider.007]

maar goed dat ik onherkenbaar ben vandaag

Bedankt; en het werkt fantastisch. Ik had me nooit gerealiseerd dat 'a name' inderdaad op die manier geintepreteerd kon worden.

[André]

En nog een detail: als je van name nou Name gemaakt had hadden de anchors in IE tenminste een naam want nu waren het lege (<a></a>) anchors

[Spider.007]

André schreef op vrijdag 01 april 2005 @ 12:14:
En nog een detail: als je van name nou Name gemaakt had hadden de anchors in IE tenminste een naam want nu waren het lege () anchors

Volgens de mozilla DOM explorer zou het gewoon name moeten zijn (lowercase) en daar werkte het; zoals genoemd; ook perfect Ik heb geen idee of het lege Anchors waren omdat ik niet weet hoe ik dat (naast alerts ofzo) zou moeten achterhalen

[André]

John Preston schreef op vrijdag 01 april 2005 @ 12:35:
[...]

Volgens de mozilla DOM explorer zou het gewoon name moeten zijn (lowercase) en daar werkte het; zoals genoemd; ook perfect Ik heb geen idee of het lege Anchors waren omdat ik niet weet hoe ik dat (naast alerts ofzo) zou moeten achterhalen

Ik had het dus met een alert gedaan:

code:

<a href="javascript:alert(document.body.innerHTML)">Source</a>

En idd zou het lowercase moeten werken, maar dat is niet zo in IE. Maar ook als de <a>'s wel een name kregen werkte het nog steeds niet dus de oplossing van Genoil blijft het beste.

[ Voor 19% gewijzigd door André op 01-04-2005 12:42 ]