[JS] sourceIndex werkt niet

[kleautviool]

Ik ben bezig met een workaround in IE om een menu goed te laten werken.
Ik heb namelijk de volgende menustructuur:

HTML:

<ul id="navigatie">
    <li>Kop 1
        <ul>
            <li>Subkop 1.1</li>
            <li>Subkop 1.2</li>
            <li>Subkop 1.3</li>
        </ul>
    </li>
    <li>Kop 2
        <ul>
            <li>Subkop 2.1</li>
            <li>Subkop 2.2</li>
            <li>Subkop 2.3</li>
        </ul>
    </li>
</ul>

En nu wil ik dus alle listitems met een kop (de <li>'s met Kop 1 en Kop 2) een class geven d.m.v. javascript. En ja ik kan het ook wel in de HTML doen, maar wil het liever met javascript voor elkaar krijgen
Dit heb ik geprobeerd te doen op de volgende manier, maar met die manier gebeurt er niks

JavaScript:

function _HandleTopmenu ()
    {
        if ( navigator.userAgent.indexOf ( 'MSIE' ) != -1 )
            {
                var i, li, Itemnumber, Allitems = document.getElementById ( 'navigatie' ).getElementsByTagName ( 'li' );
                for ( i = 0 ; i < Allitems.length ; i++ )
                    {
                        li = Allitems [i], Itemnumber = li.sourceIndex;
                        if ( Itemnumber == 0 && Itemnumber == 4 )
                            {
                                li.setAttribute ( 'class' , 'blaat' );
                                }
                            }
                        }
                    }

window.onload = _HandleTopmenu; 

Ik heb de class blaat in mijn css gedefineerd en die werkt.

Ik begrijp nu echt even niet waarom het niet werkt.Misschien dat iemand anders het ziet?

[Borizz]

Heb je enig idee wat sourceIndex doet?
Het pakt de index, zoals deze in de document.all verzameling. Dus in de verzameling van alle objecten! En niet alleen de elementen uit jou lijstje (Allitems).

Uit de MSDN HTML Reference:

Retrieves the ordinal position of the object, in source order, as the object appears in the document's all collection.

Verder werkt de volgende code niet:

JavaScript:

li.setAttribute('class', 'blaat');

Maar moet je dit gebruiken:

JavaScript:

li.className = 'blaat';

Verder is dit wel een heel omslachtige manier om je kopjes een andere classname te geven. Wat gebeurt er nu bijvoorbeeld als je een subkopje invoegd? dan kloppen die nummers niet meer en moet je je javascript aan gaan passen.
Je kunt dan beter je kopjes die je een andere opmaak wilt geven een id geven, zodat je ze daaraan kan ophalen en wijzigen. Het lijkt me ook dat er voor dit probleem wel een cross-browser oplossing is zonder moeilijk te doen met javascript...
Het is niet echt netjes om voor zoiets simpels van javscript uit te gaan.

[crisp]

deze pakt alleen directe childNodes van de UL:

JavaScript:

function _HandleTopmenu()
{
    var menu = document.getElementById('navigatie'), el = menu.childNodes, i = el.length;
    while (i--)
    {
        if (el[i].nodeType == 1 && el[i].tagName.toLowerCase() == 'li')
            el[i].className = 'blaat';
    }
}

maar waarom doe je het niet gewoon in CSS?

Cascading Stylesheet:

ul#navigatie li { color: blue; }
ul#navigatie li li { color: black; }

[Verwijderd]

Crisp heeft het in feite al gezegt, maar de volgende code is altijd false (in tegenstelling tot de quantum-wereld kan in javascript kan een variabele niet tegelijk 0 en 4 zijn)

JavaScript:

if ( Itemnumber == 0 && Itemnumber == 4 )

[kleautviool]

Hmm ok. Ik dacht dat sourceIndex de positie van een element in een array teruggaf

Maargoed, nu heb ik een ander raar probleempje. Ik wil nu de waarde van het ID attribuut van een element weergeven bij een mouseover. Dit probeer ik op de volgende manier:

JavaScript:

<script type="text/javascript">

    function _HandleTopmenu()
        {
            var Startelement = document.getElementById('navigatie'), Childnodes = Startelement.childNodes, i = Childnodes.length;
            while ( i-- )
                {
                    if ( Childnodes [i].nodeType == 1 && Childnodes [i].tagName.toLowerCase () == 'li' )
                        {
                            if ( Childnodes [i].getAttribute ( 'class' ) == "topmenu" )
                                {
                                    Childnodes [i].onmouseover = function ()
                                        {
                                            alert(Childnodes [i].getAttribute ( 'id' ).replace ( 'link' , '' ) );
                                            }
                                        }
                                    }
                                }
                            }

window.onload = _HandleTopmenu; 
</script>

Maar dit werkt dus niet. Ik krijg in Firefox zo'n error:

Error: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)" location: "file:///C:/Program%20Files/Maurice-k/Xylos/DEF/pubData/_html/beginpagina.html Line: 75"]

En verder gebeurt er niks. Maar als ik nu die onmouseover functie eruit haal en dan alleen de waarde van het ID alert krijg ik wél gewoon de juiste waarde.
De fout zit hem dus in de mouseover, alleen zie ik de fout even niet

[crisp]

En daar kan je dus heel mooi gebruik maken van het 'this' keyword die in de scope van het event juist verwijst naar het element waarop het event getriggered werd ( Childnodes[i] is dan en daar logischerwijs helemaal niet bekent ):

JavaScript:

Childnodes [i].onmouseover = function ()
{
    alert(this.getAttribute('id').replace('link', ''));
}

[kleautviool]

Damn Die ben ik dus vergeten te proberen.

Maar nu doet er zich wéér een probleem voor (wordt er moe van), alleen is dit iets dat alleen in IE gebeurt. Ik heb nu deze code:

JavaScript:

    function _HandleTopmenu()
        {
            var ElementID, Showelement, ElementDisplay, Startelement = document.getElementById('navigatie'), Childnodes = Startelement.childNodes, i = Childnodes.length;
            while ( i-- )
                {
                    if ( Childnodes [i].nodeType == 1 && Childnodes [i].tagName.toLowerCase () == 'li' )
                        {
                            if ( Childnodes [i].getAttribute ( 'class' ) == "topmenu" )
                                {
                                    Childnodes [i].onmouseover = function ()
                                        {
                                            ElementID = this.getAttribute ( 'id' ).replace ( 'link' , '' ), Showelement = document.getElementById ( ElementID ), ElementDisplay = Showelement.style.visibility;
                                            alert ( Showelement.getAttribute ( 'id' ) );
                                            }
                                        }
                                    }
                                }
                            }

(Ik weer dat de variabelen ElementID en Showelement.getAttribute('id') dezelfde waarde hebben, maar ik alert die Showelement alleen even om te testen of alles werkt (niet dus))

Nu werkt bovenstaande code in Firefox prima, alleen in IE krijg ik niks te zien bij een mouseover.
Uiteindelijk wil ik voor IE dat bij een mouseover het element dat ónder het desbetreffende listitem licht weer wordt gegeven. Dit zou ik dan zo doen:

JavaScript:

    if ( ElementDisplay == "hidden" )
        ElementDisplay = "visible";
    else
        ElementDisplay = "hidden";

Maar dat werkt dus óók niet.
Ook als ik getAttribute('id') in gewoon element.id verrandert werkt het in IE niet. Wat doe ik nu weer voor leips of wat zie ik over het hoofd dat het in IE niet werkt?

[ Voor 11% gewijzigd door kleautviool op 05-07-2005 20:04 ]

[crisp]

je kan ook werken met de wetenschap die je hebt over je markup; mbv firstChild, childNodes, nextSibling etcetera kan je eenvoudig vanuit je list-item een eventuele UL daarbinnen opsporen zonder dat gedoe met id's.
Kijk bijvoorbeeld eens naar de functie siteNavHover in de GoT javascript

Overigens is het lastig te bepalen voor ons wat er nu precies misgaat zonder een compleet stukje markup en CSS erbij.

Bedenk ook dat een style-property alleen uit te lezen is als hij inline gezet is; niet als die property alleen runtime via een stylesheet is toegekent:

HTML:

<style type="text/css">
#foo {
    visibility: hidden;
}
</style>
<div id="foo">hidden</div>
<script type="text/javascript">
alert(document.getElementById('foo').style.visibility); // leeg
</script>

[ Voor 20% gewijzigd door crisp op 05-07-2005 23:17 ]

[Koeniepoenie]

crisp schreef op dinsdag 05 juli 2005 @ 22:52:

Bedenk ook dat een style-property alleen uit te lezen is als hij inline gezet is; niet als die property alleen runtime via een stylesheet is toegekent:

HTML:

<style type="text/css">
#foo {
    visibility: hidden;
}
</style>
<div id="foo">hidden</div>
<script type="text/javascript">
alert(document.getElementById('foo').style.visibility); // leeg
</script>

Je kunt het wel uitlezen, maar hiervoor hebben IE en FF beide weer verschillende methodes. In FF wordt getComputedStyle() gebruikt, en IE gebruikt obj.currentStyle. Al denk ik dat het niet verstandig is dit hier te gebruiken.

[crisp]

Koeniepoenie schreef op woensdag 06 juli 2005 @ 13:29:
[...]

Je kunt het wel uitlezen, maar hiervoor hebben IE en FF beide weer verschillende methodes. In FF wordt getComputedStyle() gebruikt, en IE gebruikt obj.currentStyle. Al denk ik dat het niet verstandig is dit hier te gebruiken.

Dat is inderdaad niet verstandig, zeker gezien je browsers als Opera en Safari dan uitsluit...

[kleautviool]

Zal de got javascripts eens doornemen.

Maar een voorbeeld van de desbetreffende pagina staat hier. Ik heb van de onmouseover even een onclick gemaakt.

Op deze pagina staat dezelfde pagina alleen dan mét het onmouseover ding.

Je zult zien dat er in IE niks gebeurt als je met je muis over 1 van de topmenu's gaat